Search code examples
drupaldrupal-7drupal-modulesdrupal-theming

Thumbnail Carousel


I am building a site that has a photo gallery. I am using colorbox to display the images when clicked. However, instead of having all the thumbnails on screen I was wondering if there is a way I can display them in a carousel effect.

So for example, I have 10 thumbnails but I want to place them in a small area that would only allow 3 to be seen at a time. I want the user to be able to scroll back and fourth through the thumbnails and then use colorbox to view the selected image.

I have played with various options but they all seem to display the larger image above the thumbnail, instead of a colorbox popup. Is there an option/module that would help that maybe I have missed?

Thanks


Solution

  • I don't have any code to give you at this time. I could probably rig something up in a couple of hours, but I have no need for it. I would look into using jQuery to get this done. You can have an array of strings representing the paths to your images...you can then style 3 div's used for left, right, and center with an arrow icon on each side. Then all you have to do is set the source for the background-image on the divs to 3 images in the array and each time you click an arrow you would move a marker through the array. The hardest case is accounting for reaching the end of the array when you click the right arrow and reaching the beginning of the array when you click the left arrow (both are easy checks...)