www.webdeveloper.com
Results 1 to 3 of 3

Thread: In need of a little help setting up a carousel

  1. #1
    Join Date
    May 2011
    Posts
    5

    In need of a little help setting up a carousel

    Hi there,

    Can anyone help me with this one please?! I'm setting up the Richard Scarrott - jQuery - Carousel Plugin but I'm having some difficulties getting everything in the right spot. The carousel has some pagination and Next Prev links on the bottom and I've been trying for almost two days (without any improvements) to rearrange the script so they would appear on top of the images. Can anyone help me? How can I hack this thing up?? I bet this is a piece of cake but I'm kind of new to the JS land and this has revealed kind of tricky to me.


    This is how i'm seeting up the plugin so far:


    Code:
    //html
    
    <head>
    ...
    $(document).ready(function() {
    $('#my-carousel').carousel();
    });
    
    </head>
    
    <body>
    ...
    <div id="container">
    <div id="my-carousel" class="carousel module">
    <ul>
    <li>
    <<img src="/FLR/imgs/BeackeyBeasley/BEA-2011b_E.jpg" width:"1080px" alt="Beckey \ The outside setting_1" />
    </li>
    <li>
    <<img src="/FLR/imgs/BeackeyBeasley/BEA-006.jpg" height:"720px" alt="Beckey \ The outside setting_2" />
    </li>
    <li>
    <<img src="/FLR/imgs/BeackeyBeasley/BEA-2011a_E.jpg" width:"1080px" alt="Beckey \ The outside setting_3" />
    </li>
    <li>
    <<img src="/FLR/imgs/BeackeyBeasley/imE254.jpg" width:"1080px" alt="Beckey \ The outside setting_4" />
    </li>
    <li>
    <<img src="/FLR/imgs/BeackeyBeasley/imE255.jpg" width:"1080px" alt="Beckey \ The outside setting_5" />
    </li>
    </ul>
    </div>
    </div>
    
    
    //CSS script
    
    .carousel ul {
    position:relative;
    clear:both;
    overflow:hidden;
    margin:0;
    padding:0;
    float:left;
    }
    
    .no-js .carousel ul {position:static;}
    
    .carousel .mask {
    position:relative;
    clear:both;
    float:left;
    overflow:hidden;
    width:1080px;
    height:720px;
    }
    
    .carousel ul li {
    float:left;
    width:1080px;
    height:720px;
    color:#ffffff;
    margin:0px;
    }
    
    .carousel .pagination-links {
    list-style:none;
    font-family: "TyponineSans Regular 8", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size:14px;
    letter-spacing: 0.03em;
    line-height:1.3;
    margin:0;
    padding:0;
    }
    
    .carousel .pagination-links li {
    display:inline;
    font-family: "TyponineSans Regular 8", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size:14px;
    letter-spacing: 0.03em;
    line-height:1.3;
    }
    
    .carousel .pagination-links li a {
    padding: 2px 6px;
    }
    
    .carousel .pagination-links li a:hover {text-decoration:none;}
    
    .carousel .pagination-links li.current a {
    background:#ffffff;
    color:#000000;
    }
    
    .prev {
    font-family: "TyponineSans Regular 8", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size:14px;
    letter-spacing: 0.03em;
    line-height:1.3;
    }
    
    .next {
    font-family: "TyponineSans Regular 8", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size:14px;
    letter-spacing: 0.03em;
    line-height:1.3;
    }
    
    .carousel .disabled {
    color:gray;
    cursor:default;
    }
    
    #my-carousel {
    position:relative;
    clear:both;
    float:left;
    width:1080px;
    height:720px;
    }
    
    #my-carousel .mask {
    position:relative;
    clear:both;
    float:left;
    width:1080px;
    height:720px;
    }
    
    
    // Jquery - Carousel plugin Script
    
    // prototypal inheritance
    if (typeof Object.create !== 'function') {
    Object.create = function (o) {
    function F() {}
    F.prototype = o;
    return new F();
    };
    }
    
    (function($) {
    // ie alias
    var headache = $.browser.msie && $.browser.version.substr(0,1)<9;
    
    // carousel
    var Carousel = {
    settings: {
    itemsPerPage: 1,
    itemsPerTransition: 1,
    noOfRows: 1,
    pagination: true,
    nextPrevLinks: true,
    speed: 'normal',
    easing: 'swing'
    },
    init: function(el, options) {
    if (!el.length) {return false;}
    this.options = $.extend({}, this.settings, options);
    this.itemIndex = 0;
    this.container = el;
    this.runner = this.container.find('ul');
    this.items = this.runner.children('li');
    this.noOfItems = this.items.length;
    this.setRunnerWidth();
    if (this.noOfItems <= this.options.itemsPerPage) {return false;} // bail if there are too few items to paginate
    this.insertMask();
    this.noOfPages = Math.ceil((this.noOfItems - this.options.itemsPerPage) / this.options.itemsPerTransition) + 1;
    if (this.options.pagination) {this.insertPagination();}
    if (this.options.nextPrevLinks) {this.insertNextPrevLinks();}
    this.updateBtnStyles();
    },
    insertMask: function() {
    this.runner.wrap('<div class="mask" />');
    this.mask = this.container.find('div.mask');
    
    // set mask height so items can be of varying height
    var maskHeight = this.runner.outerHeight(true);
    this.mask = this.container.find('div.mask');
    this.mask.height(maskHeight);
    },
    setRunnerWidth: function() {
    this.noOfItems = Math.round(this.noOfItems / this.options.noOfRows);
    var width = this.items.outerWidth(true) * this.noOfItems;
    this.runner.width(width);
    },
    insertPagination: function() {
    var i, links = [];
    this.paginationLinks = $('<ol class="pagination-links" />');
    for (i = 0; i < this.noOfPages; i++) {
    links[i] = '<li><a href="#item-' + i + '">' + (i + 1) + '</a></li>';
    }
    this.paginationLinks
    .append(links.join(''))
    .appendTo(this.container)
    .find('a')
    .bind('click.carousel', $.proxy(this, 'paginationHandler'));
    },
    paginationHandler: function(e) {
    this.itemIndex = e.target.hash.substr(1).split('-')[1] * this.options.itemsPerTransition;
    this.animate();
    return false;
    },
    insertNextPrevLinks: function() {
    this.prevLink = $('<a href="#" class="prev">Prev</a>')
    .bind('click.carousel', $.proxy(this, 'prevItem'))
    .appendTo(this.container);
    this.nextLink = $('<a href="#" class="next">Next</a>')
    .bind('click.carousel', $.proxy(this, 'nextItem'))
    .appendTo(this.container);
    },
    nextItem: function() {
    this.itemIndex = this.itemIndex + this.options.itemsPerTransition;
    this.animate();
    return false;
    },
    prevItem: function() {
    this.itemIndex = this.itemIndex - this.options.itemsPerTransition;
    this.animate();
    return false;
    },
    updateBtnStyles: function() {
    if (this.options.pagination) {
    this.paginationLinks
    .children('li')
    .removeClass('current')
    .eq(Math.ceil(this.itemIndex / this.options.itemsPerTransition))
    .addClass('current');
    }
    
    if (this.options.nextPrevLinks) {
    this.nextLink
    .add(this.prevLink)
    .removeClass('disabled');
    if (this.itemIndex === (this.noOfItems - this.options.itemsPerPage)) {
    this.nextLink.addClass('disabled');
    }
    else if (this.itemIndex === 0) {
    this.prevLink.addClass('disabled');
    }
    }
    },
    animate: function() {
    var nextItem, pos;
    // check whether there are enough items to animate to
    if (this.itemIndex > (this.noOfItems - this.options.itemsPerPage)) {
    this.itemIndex = this.noOfItems - this.options.itemsPerPage; // go to last panel - items per transition
    }
    if (this.itemIndex < 0) {
    this.itemIndex = 0; // go to first
    }
    nextItem = this.items.eq(this.itemIndex);
    pos = nextItem.position();
    
    if (headache) {
    this.runner
    .stop()
    .animate({left: -pos.left}, this.options.speed, this.options.easing);
    }
    else {
    this.mask
    .stop()
    .animate({scrollLeft: pos.left}, this.options.speed, this.options.easing);
    }
    this.updateBtnStyles();
    }
    };
    
    // bridge
    $.fn.carousel = function(options) {
    return this.each(function() {
    var obj = Object.create(Carousel);
    obj.init($(this), options);
    $.data(this, 'carousel', obj);
    });
    };
    })(jQuery);
    
    </script>
    
    Thanks you,

  2. #2
    Join Date
    May 2011
    Posts
    5
    Ok. I guess I got it. Just changed the .append() method to .prepend()
    This kind of did the trick eheh.

  3. #3
    Join Date
    May 2011
    Posts
    5
    Hi there again,
    Have another question.

    The pagination and Next Prev links are looking something like this:

    Prev ← Next →
    1 2 3 4 5

    Can anyone help me with the steps to make them more like this:

    Prev ← Next → {1 \ 5}

    So i guess I need to know the current item and add the noOfItems after it. I know this is basic stuff but I'm not really getting how to do it in this script. here's the carousel script so far:

    Code:
    if (typeof Object.create !== 'function') {
    Object.create = function (o) {
    function F() {}
    F.prototype = o;
    return new F();
    };
    }
    
    (function($) {
    // ie alias
    var headache = $.browser.msie && $.browser.version.substr(0,1)<9;
    
    // carousel
    var Carousel = {
    settings: {
    itemsPerPage: 1,
    itemsPerTransition: 1,
    noOfRows: 1,
    pagination: true,
    nextPrevLinks: true,
    speed: 'normal',
    easing: 'swing'
    },
    init: function(el, options) {
    if (!el.length) {return false;}
    this.options = $.extend({}, this.settings, options);
    this.itemIndex = 0;
    this.container = el;
    this.runner = this.container.find('ul');
    this.items = this.runner.children('li');
    this.noOfItems = this.items.length;
    this.setRunnerWidth();
    if (this.noOfItems <= this.options.itemsPerPage) {return false;} // bail if there are too few items to paginate
    this.insertMask();
    this.noOfPages = Math.ceil((this.noOfItems - this.options.itemsPerPage) / this.options.itemsPerTransition) + 1;
    if (this.options.pagination) {this.insertPagination();}
    if (this.options.nextPrevLinks) {this.insertNextPrevLinks();}
    this.updateBtnStyles();
    },
    insertMask: function() {
    this.runner.wrap('<div class="mask" />');
    this.mask = this.container.find('div.mask');
    
    // set mask height so items can be of varying height
    var maskHeight = this.runner.outerHeight(true);
    this.mask = this.container.find('div.mask');
    this.mask.height(maskHeight);
    },
    setRunnerWidth: function() {
    this.noOfItems = Math.round(this.noOfItems / this.options.noOfRows);
    var width = this.items.outerWidth(true) * this.noOfItems;
    this.runner.width(width);
    },
    insertPagination: function() {
    var i, links = [];
    this.paginationLinks = $('<ol class="pagination-links" />');
    for (i = 0; i < this.noOfPages; i++) {
    links[i] = '<li><a href="#item-' + i + '">' + (i + 1) + '</a></li>';
    }
    this.paginationLinks
    .prepend(links.join(''))
    .prependTo(this.container)
    .find('a')
    .bind('click.carousel', $.proxy(this, 'paginationHandler'));
    },
    paginationHandler: function(e) {
    this.itemIndex = e.target.hash.substr(1).split('-')[1] * this.options.itemsPerTransition;
    this.animate();
    return false;
    },
    insertNextPrevLinks: function() {
    this.nextLink = $('<a href="#" class="next">Next  → </a>')
    .bind('click.carousel', $.proxy(this, 'nextItem'))
    .prependTo(this.container);
    this.prevLink = $('<a href="#" class="prev">Prev ← </a>')
    .bind('click.carousel', $.proxy(this, 'prevItem'))
    .prependTo(this.container);
    },
    nextItem: function() {
    this.itemIndex = this.itemIndex + this.options.itemsPerTransition;
    this.animate();
    return false;
    },
    prevItem: function() {
    this.itemIndex = this.itemIndex - this.options.itemsPerTransition;
    this.animate();
    return false;
    },
    updateBtnStyles: function() {
    if (this.options.pagination) {
    this.paginationLinks
    .children('li')
    .removeClass('current')
    .eq(Math.ceil(this.itemIndex / this.options.itemsPerTransition))
    .addClass('current');
    }
    
    if (this.options.nextPrevLinks) {
    this.nextLink
    .add(this.prevLink)
    .removeClass('disabled');
    if (this.itemIndex === (this.noOfItems - this.options.itemsPerPage)) {
    this.nextLink.addClass('disabled');
    }
    else if (this.itemIndex === 0) {
    this.prevLink.addClass('disabled');
    }
    }
    },
    animate: function() {
    var nextItem, pos;
    // check whether there are enough items to animate to
    if (this.itemIndex > (this.noOfItems - this.options.itemsPerPage)) {
    this.itemIndex = this.noOfItems - this.options.itemsPerPage; // go to last panel - items per transition
    }
    if (this.itemIndex < 0) {
    this.itemIndex = 0; // go to first
    }
    nextItem = this.items.eq(this.itemIndex);
    pos = nextItem.position();
    
    if (headache) {
    this.runner
    .stop()
    .animate({left: -pos.left}, this.options.speed, this.options.easing);
    }
    else {
    this.mask
    .stop()
    .animate({scrollLeft: pos.left}, this.options.speed, this.options.easing);
    }
    this.updateBtnStyles();
    }
    };
    
    // bridge
    $.fn.carousel = function(options) {
    return this.each(function() {
    var obj = Object.create(Carousel);
    obj.init($(this), options);
    $.data(this, 'carousel', obj);
    });
    };
    })(jQuery);

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles