CODEWITHSUNDEEP
javascriptjqueryhtml
Gabriel Santos
Gabriel Santos

Reputation: 4974

Jquery + HTML Thumbnail scroll

I want to create a list of thumbnails with a button previous and another next, showing 10 thumbnails at a time and hiding the rest, and when you reach the 10th tumbnail and click the next button, the 1st disappear and appear the 11th.

I've tried with: Javascript

jQuery(document).ready(function() {
    var count = 0;
    var images = 11;
    var page = 1;
    var current = 1;

    jQuery('.ice-navigator li').each(function(index) {
        count++;

        jQuery(this).attr('id', 'menu-item-' + count);
        jQuery(this).attr('class', 'menu-page-' + page);

        if(count >= (page * images)) {
            page++;
        }

        jQuery(this).hide();
    })

    jQuery('.ice-navigator li.menu-page-1').show();
    jQuery('.ice-next').click(function() {
        if(current >= count) {
            current = 1;
        } else {
            current++;
        }

        item = jQuery('.ice-navigator li#menu-item-' + current);
        if(jQuery(item).hasClass('active')) {
            jQuery(item).removeClass('active');
            page = jQuery('.ice-navigator li#menu-item-' + current).attr('class');
            jQuery(item).addClass('active');
        } else {
            page = jQuery('.ice-navigator li#menu-item-' + current).attr('class');
        }

        jQuery('.ice-navigator li').hide();
        jQuery('.ice-navigator li.' + page).show();
    })

    jQuery('.ice-previous').click(function() {
        current--;
        if(current <= 0) {
            current = count;        
        }

        item = jQuery('.ice-navigator li#menu-item-' + current);
        if(jQuery(item).hasClass('active')) {
            jQuery(item).removeClass('active');
            page = jQuery('.ice-navigator li#menu-item-' + current).attr('class');
            jQuery(item).addClass('active');
        } else {
            page = jQuery('.ice-navigator li#menu-item-' + current).attr('class');
        }
    })

    jQuery('.ice-navigator li').click(function() {
        current = jQuery(this).attr('id').replace('menu-item-', '');
    })
})

HTML

<div class="ice-previous">Previous</div>
<div class="ice-navigator-wrapper clearfix">
    <div class="ice-navigator-outer">
        <ul class="ice-navigator">
            <li>THUMBNAIL 1</li>
            <li>THUMBNAIL 2</li>
            [...]
            <li>THUMBNAIL 11</li>
            <li>THUMBNAIL 12</li>
        </ul>
    </div>
</div>
<div class="ice-next">Next</div>

Thanks!

Upvotes: 0

Views: 2443

Answers (2)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Edit: I now understand it is like a circular ref. I have made some changes accordingly.

See my updated DEMO here

Below is for regular nav which stops when you reach the end.

Check my old DEMO here.

I used 2 pointers to manage the start and end position. Implemented adjustNav function to show/hide div based on start and end position.

Upvotes: 1

Tim
Tim

Reputation: 4101

This looks like a job for jCarousel: http://sorgalla.com/jcarousel/

There are other plugins that provide this functionality. I just used jCarousel on another project and it was the first thing I thought of.

EDIT

I didn't realize you don't want to use a plugin. You could do this with hand-coded jQuery, but you're going to be writing a lot of code.

Upvotes: 0

Related Questions