Adding a Next/Prev that moves images in a "carousel" fasion.
We have a lightbox slider on our website, and it contains a little carousel at the bottom with clickable images. When you click one, it displays larger in the center of the lightbox.
I'm trying to add next/prev actions to the thumbnail carousel slider, so that a user can click next, and see 5 more thumbnails they could potentially click on.. if that makes sense.
Right now the script tied to the carousel is
- /**
- * Set the gallery thumbnails
- */
- (function($)
- {
- $.fn.setThumbnailData = function( gallery_id, photo_id )
- {
- // The data we're working with
- var data = suprflickr[gallery_id].photos;
-
- // The string to set
- var str = "";
- for ( p in data )
- {
- if (photo_id == data[p].id)
- str += "<a href='#' gallery_id='" + gallery_id + "' photo_id='" + data[p].id + "' class='thumb current'>";
- else
- str += "<a href='#' gallery_id='" + gallery_id + "' photo_id='" + data[p].id + "' class='thumb'>";
- str += "<span class='img'><img src='" + data[p].url_sq + "' /></span>";
- str += "</a>";
- }
-
-
- // Set the content
- $(this).find('.slider').html( str );
-
-
- // Set the actions on the thumbnails
- $(this).find('.thumb').unbind('click').click(function()
- {
- var t = $('#suprflickrGallery .list .content a[photo_id="' + $(this).attr('photo_id') + '"]');
- $('#suprflickrLB').setLightboxData($(t), 'fade');
- $('#suprflickrGallery .list .content a.current').removeClass('current');
- $(this).addClass('current');
- $(t).addClass('current');
- $(this).parent().setThumbnailSliderPosition();
- return false;
- });
-
-
- // Set the width of the thumbnail container
- $(this).find('.slider').setThumbnailSliderPosition();
- }
- })(jQuery);
You can see the example here :
http://d.perich.com/grand-hotel/2013/index.php/named-rooms#72157623652852736&7160479178
Any help would be greatly appreciated.