Archive | JQuery RSS for this section

jCarouselLite Extended, Carousel Slider with Paging, NFL.com Style

If you’ve done some Googling you’ve come across jCarousel Lite and jCarousel by now. Both are excellent solutions as they stand. jCarousel in particular is a full featured JQuery carousel/slider plugin that makes slick presentations of unordered lists a snap. The “Lite” version is just that. A much smaller footprint for a lack of a better term is the main difference. Base functionality is very similar. I extended the “Lite” version as for most implementations it was perfect but there are just a couple key things I wanted that it didn’t have. So I extended it to include these features:

  • Pause the slide when hovered.
  • Add paging that was simple and customizable via css.
  • At the end of the last slide go to the first slide.
    To me those key additions make this already solid plugin even better. In the download below you’ll find two files. The extended uncompressed source and the minified counterpart. This was based on the original source of jCarouselLite v1.0.1  as of 8/1/2011.

DOWNLOAD

What you’ll end up with.

image

I won’t go into the full CSS styling. You can find this here in the documentation by the author. The below CSS is all you’ll need to add the pager feature. Please note that I chose this method rather than using images for ease of use. If you want to use images simply add your image as a background to the LI and position it centered for both x/y using CSS. It works just fine and makes the plugin nice and light weight as we aren’t managing images for the different states. As long as your image is properly positioned and correctly sized according to the size of your LI it will have a similar effect as if the image tags were right inside the LI.

NOTE: The Html for the pager is dynamically built within the plugin for simplicity. You could certainly extend this for your needs quite easily if desired. The structure of the dynamic elements are very basic and simplistic. In fact you could easily wire up some custom JQuery using .appendTo() if you wanted to add some sort of element to the li’s.

Dynamic Pager Html

<div class="pager">
    <ul>
    <li class=”0”></li>
    <li class=”1”></li>
    <li class=”2”></li>
    <li class=”3”></li>
    </ul>
</div>

CSS Styles for above NFL.com carousel look.

The pager styling:

.pager
{    
    position: absolute;
    height: 24px;
    right: 15px;
    bottom: 30px;    
}

.pager ul
{    
    list-style-type: none;
    margin: 0px; 
    padding: 0px;  
}

.pager li
{
    border: 1px solid #333333;
    line-height: 15px;
    height: 15px;
    width: 15px;
    display: inline-block;
    background-color: #F7F7F7;
    margin: 2px 4px 2px 4px;
    vertical-align: middle; 
    float: right; /* float:right; required for IE because it sucks and can't handle inline-block*/ 
    
    /* CSS 3 Styles */
    opacity: .50;
    filter: “alpha(opacity=50)”;
    -moz-border-right: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
}

.pager li:hover
{
    background-color: #C41313;
    cursor: pointer;
    
    /* CSS 3 Styles */
    opacity:100;
    filter:alpha(opacity=100);
    filter: “alpha(opacity=100)”;
}

.pager li.selected
{
    /* CSS 3 Styles */
   background-color: #C41313;
   opacity:100;
   filter:alpha(opacity=100);
   filter: “alpha(opacity=100)”;
}

The Overlay style that sits under the pager and contains the description text for the given slide:

.carousel-overlay
{
    position: relative;
    bottom: 95px;
    width: 725px;
    height: 75px;    
    background-image: url('Images/Backgrounds/carousel_bkgrnd.png');
    background-repeat: no-repeat;
}

.carousel-overlay div
{
  padding: 3px 24px 3px 24px;
  width: 450px;
}

.carousel-overlay-caption
{
    font-weight: 600;
    font-size: 1.1em;
    color: #F2F2F2;
}

.carousel-overlay-description
{    
    color: #F2F2F2;
}

Again I didn’t enclose the Html or the styling for the carousel itself. If you need this please follow the detailed documentation at the author’s site here. If you would like to use the overlay image in the demo you can DOWNLOAD it along with the source plugin.

Wiring Up Your Carousel

Wiring up the carousel is extensively covered by the author so I’m only going to hit on the extended options which are very simple.

<script type="text/javascript">
    $('.carousel').jCarouselLite({
        visible: 1,
        auto: 8000,
        speed: 1200,
        circular: false, // Set circular to false to use onEndFirst.
        onEndFirst: true, // Navigates to first slide on end.
        showPager: true, // Boolean to show or hide the pager.
        pauseOnHover: true, // Pauses the carousel when hovered over
        pager: 'pager', // The class to use for the pager.
        scroll: 1
    });
</script>

Wrapping Up

Please note as normal you will need to add reference in your header to JQuery itself and the extended jCarousellite plugin as normal. I know you are aware of this but for those that are new and in the interest of being complete it should be mentioned.

To reiterate the ‘”pager” was intentionally created using only CSS and the basic dynamic html for structure. This was because your pager could literally look like anything and may need to be placed in many locations. If you want to place the pager outside of the main carousel element use neg. values for top, bottom, right, left. By using CSS only rather than embedding images it becomes much more tolerant of your unique design.

This was tested in Opera, Chrome, FireFox, IE 9 and IE 8. I have not tested on any other browsers.

JQuery Hylite Plugin

Wrote a little plugin this am to highlight rows of a table or unordered list. This has a little twist to it in that it has a couple of neat little features. Often we need to iterate over rows of data, maybe pullout a guid or index of the row and so on. This is a common task in just about every web application. So I quickly threw this one together. Obviously no guarantees and I’m sure it can be improved upon…feel free to do so.

What can HyLite do?

  • – highlight a table or list row on hover.
  • – can set a row as selected and then toggle off when clicked again.
  • – when row is selected it can either simply change to the selected class or do a mild animation.
  • – can also animate use JQuery UI. simply pass in your effect and options or use the default pulsate effect.
  • – on hover or click a callback function can report back the index of the row, the guid if you specify the guid element to lookup, the total number of rows and the rows selected on clear.
  • – has two modes select and navigate. select will do just that, navigate will redirect to the url passed.
  • – query string params are supported too. you can pass in an array of key/values and they will be concatenated to the url. if you pass the key guid in the query string params it will if you’ve set the option find the guid element specified and use it, otherwise if it can’t find it, it will use the value you’ve passed.

Download
jquery-hylite-1.1.js

jquery-hylite-1.1.min.js

 

Instruction
Nothing different here. Install the one of the above downloaded files in your script directory and then add a reference to the top of your page, master page, mvc shared layout etc. CSS styling is really straight forward. For what ever element you are iterating over just add three states in CSS. Your default, hover and selected states. You can also changes those class names to whatever you want, those are just the defaults so for example your CSS may look something like this:

CSS

.mylist
{
    /* default style*/
}

mylist.hover

{
    /* hover style*/
}

mylist.selected

{
    /* selected style*/
}

HTML

Your html is equally simplistic. Say you have an unordered list or table it would be something like the below:

<ul class=”mylist”>
    <li>My first row of data<span class=”myguid”>100</span></li>
    <li>My second row of data<span class=”myguid”>101</span></li>
</ul>

PLUGIN

*** obviously the below would be wrapped in pageLoad or $(document).ready()***

– basic usage

$(.mylist li).hylite();

– animate using JQuery UI

animation is only used when in select mode.

$(.mylist li).hylite({
    uiAnimate: { enabled: true, effect: ‘pulsate’, opt: { times: 1 }, speed: 500 }
});

– turn animation off

$(.mylist li).hylite({
    animate: false
});

– changing default selected and hover styles

$(.mylist li).hylite({
    hoverStyle: ‘some-hover-style’,
    selectedStyle: ‘some-selected-style’
});

– navigate to new page after click

onclick navigate to new page example url: ‘/mypage.html?key1=value&key2=value’

$(.mylist li).hylite({
    mode: ‘navigate’,
    navParams: { url: ‘/mypage.html’, qsParams: { key1: ‘value’, key2: ‘value’ }
});

– using a unique identifier

$(.mylist li).hylite({
    guidElement: ‘.myGuid’,
    }, myCallbackFunction
);

function myCallbackFunction (element, data){
    // using the above you could update an input for example anytime there is
    // a mouseover or click event. I like JSON that way it is always in that format no matter what I’m doing.
    // possible options when calling back from main init method are:
    // obj.index (index hovered or selected), obj.rows (total count), obj.guid (the guidElemement )
    // possible options when calling back from clear method (see below)
    // obj.rows, obj.selected (counts the rows that were selected that you’ve cleared)
    // these properties passed back could in part be accessed from the JQuery object that also gets
    // passed back in the init method. meaning element above represents $(this)

    var obj = $.parseJSON(data);
    alert(obj.index);
}

– clearing selected rows when in select mode

$(.mylist li).hylite( ‘clear’, myClearCallback);

function myClearCallback(data){
    var obj = $.parseJSON(data);
    alert(‘There were ‘ + obj.selected + ‘ rows cleared.’
)