Carousel Clickable Image Gallery?

Question

I've searched everywhere and can't seem to find something related! I'm doing a website for an Airline Company. It goes more or less like this:

http://i.stack.imgur.com/L4AD0.jpg

QUICK INFO:

Database with 4 fields:

• 'id'(INT): simple AUTO INCREMENT ID.
• 'thumbnail'(TEXT): route for a small size image of a City, used on the carousel. Ex: img/bali/thumb/bali_thumb.jpg
• 'complete'(TEXT): route to a larger size of the thumbnail. Ex: img/bali/bali.jpg
• 'gallery'(TEXT): route to a directory with multiple images, to be used as a gallery. Ex: img/bali/gallery/

As you can see, there's a Carousel listing all the cities the Airline offers service to. This is a Carousel library known as JCarousel. When people clicks on a determined city, the image from 'complete' loads on the DIV.

MY QUESTION:

The Airline wants a change. They want that when people clicks on a determined city, instead of loading just 1 image, it loads a GALLERY OF IMAGES. This has been driving me mad since last thursday, and I just can't find any solution for it. I've tried a lot of things, and haven't found the solution to it. I mean, I can make it load one image, but can't make it load a gallery.

Thanks for taking the time to read this, I'm completely lost! I hope this great community can help me find a solution :)

Answer 1

You will have to write some backend code, but I think YUI has an option to do that. There is support for a "multi-row" carousel. Maybe that's what you want? ( http://developer.yahoo.com/yui/examples/carousel/csl_multirow_clean.html )

Answer 2

We had the same problem and could not find a suitable solution. I suspect you will have to do it yourself, as we had to. We used jCarousel and integrated knockout.js to fire events when images in the carousel were clicked.

I'm afraid I have no sample code, but there are plenty of examples of how to use knockout.js here http://knockoutjs.com/ and it isn't too bad to integrate it into jcarousel