CODEWITHSUNDEEP
jquerygallery
mysterious
mysterious

Reputation: 1478

custom jquery gallery

I am creating a template. All xhtml/css work is done but a jquery image gallery. There are too many jquery galleries around and i do not know how to customize them according to situation

This is a three column template..First column has navigation. second column will have image selected from thumbnails of 3rd column. Also there are up/down buttons in 3rd column that rotate thumbnails. ON clicking a thumbnail image should load in 2nd column's image div.

Do i have to provide any more info?

alt text

Upvotes: 1

Views: 1532

Answers (2)

Naitik Shah
Naitik Shah

Reputation: 311

Galleriffic Is Your Solution

http://www.twospy.com/galleriffic/index.html

Its very Customizable and Easy to Integrate.

Upvotes: 0

Nathan
Nathan

Reputation: 11149

Since you haven't actually asked a question, I'm going to assume you're asking how to get started. You also haven't given your HTML structure, so I'm going to have to assume that too.

HTML structure

<div id="gallery">
    <img id="main_image" />
    <div>
        <img src="image1-thumbnail.jpg" />
        <img src="image2-thumbnail.jpg" />
        <img src="image3-thumbnail.jpg" />
        <img src="image4-thumbnail.jpg" />
    </div>
</div>

Start off by creating a jQuery plugin:

(function ($) {
    $.fn.gallery = function () {

    };
})(jQuery)

This ensures that your code will be completely re-usable and won't cause naming clashes if you want to use it with another framework in future. Next you want to add a click event to each thumbnail to make it modify the SRC of the main image:

(function ($) {
    $.fn.gallery = function () {
        this.find($(this).attr('id') + '>div>img').click(function () {
            $(this).siblings('img').removeClass('selected');
            $(this).addClass('selected');
            var mainImageSrc = $(this).attr('src').replace('-thumbnail','');
            $(this).parent().siblings('img').attr('src',mainImageSrc);
        });
        return this; // jQuery plugins should (nearly) always return this to make them chainable
    };
})(jQuery);

Finally call your function:

jQuery(function ($) {
    $('#gallery').gallery();
});

This code should provide the basic functionality. I'll leave you to work on making the thumbnails scrollable, and if you really feel up to it, making a fade between images (hint: you need two img tags, with CSS to lay them on top of each other, then .animate() the opacity to fade between them). Hopefully this should get you going though.

Upvotes: 4

Related Questions