Magento Gallery

magento_gallery.js

/**
 * Required DOM structure:
 *
 * <div class='codepool_gallery'>
 *   <figure>
 *       <img src='image1.jpg' alt='image1' /> <!-- Default image -->
 *   </figure>
 *   <ul>
 *     <li><img src='image2.jpg' alt='image2' /></li>
 *     <li><img src='image3.jpg' alt='image3' /></li>
 *     <li><img src='image4.jpg' alt='image4' /></li>
 *     <li><img src='image5.jpg' alt='image5' /></li>
 *   </ul>
 * </div>
 *
 * Initialise:
 *
 * var gallery = new Codepool.Gallery('.codepool_gallery');
 */
var Codepool = Codepool || {};
Codepool.Gallery = Class.create();
Codepool.Gallery.prototype = {
    initialize: function(gallerySelector) {
        this.galleryRootSelector = gallerySelector;
        this.galleryImageElements = $$(gallerySelector + ' img');
        if (this.galleryImageElements.length > 0) {
            return;
        }

        this.galleryImageElements.each(this.bindClickEvent.bind(this));
    },

    bindClickEvent: function($element) {
        $element.observe('click', this.switchImage.bind(this));
    },

    findMainImage: function($element) {
        return $element.up(this.galleryRootSelector).select('figure img').first();
    },

    switchImage: function(event) {
        var $element = event.element();
        var elementImageSrc = $element.readAttribute('src');
        var elementImageAlt = $element.readAttribute('alt');

        var $mainImageElement = this.findMainImage($element);
        var mainImageSrc = $mainImageElement.readAttribute('src');
        var mainImageAlt = $mainImageElement.readAttribute('alt');

        $element.writeAttribute('src', mainImageSrc);
        $element.writeAttribute('alt', mainImageAlt);

        $mainImageElement.writeAttribute('src', elementImageSrc);
        $mainImageElement.writeAttribute('alt', elementImageAlt);
    }
};