Image Gallery

by Craig Martin

HTML

<div class="heroGalleryController faderController" for=".imageFader:first">
    <ul>
        <li>
            <span class="subTitle"></span>
            <a href="#">Image 1</a>
        </li>
        <li>
            <span class="subTitle"></span>
            <a href="#">Image 2</a>
        </li>
        <li>
            <span class="subTitle"></span>
            <a href="#">Image 3</a>
        </li>
        <li>
            <span class="subTitle"></span>
            <a href="#">Image 4</a>
        </li>
        <li>
            <span class="subTitle"></span>
            <a href="#">Image 5</a>
        </li>
    </ul>
</div>

<div class="heroGallery imageFader">
    <div class="panel">
        <h3>Hero Image Title 1</h3>
        <div class="description">Convenient Medical Treatment</div>
        <a href=""></a>
        <div class="content"><img alt="Convenient Medical Treatment" src="http://indianapublicmedia.org/support/files/2011/09/04_03_1-Stock-Market-Prices_web.jpg"></div>
    </div>
    <div class="panel">
        <h3>Hero Image Title 2</h3>
        <div class="description">Hero Image SubTitle 2</div>
        <a href=""></a>
        <div class="content"><img alt="Hero Image Title 2" src="http://4.bp.blogspot.com/-zGelw2sj1Sg/TnK7p1Y7qyI/AAAAAAAAAzk/UlF2knCSIas/s1600/stock+market.jpg"></div>
    </div>
    <div class="panel">
        <h3>Hero Image Title 3</h3>
        <div class="description">Hero Image SubTitle 3</div>
        <a href=""></a>
        <div class="content"><img alt="Hero Image Title 3" src="http://borsetrading.com/wp-content/uploads/2012/03/stock_market_game.jpg"></div>
    </div>
    <div class="panel">
        <h3>Hero Image Title 4</h3>
        <div class="description">Hero Image SubTitle 4</div>
        <a href=""></a>
        <div class="content"><img alt="Hero Image Title 4" src="http://www.stockmarketinvesting.com/wp-includes/images/nasdaq-quotes.jpg"></div>
    </div>
    <div class="panel">
        <h3>Hero Image Title 5</h3>
       ...

CSS

.heroGallery img { width: 300px; height: 200px; }
.heroGallery .panel { display: none; }
.heroGallery .panel:first-child { display: block; }

.heroGalleryController li.active {background-color: #999; color: #eee; }

JavaScript

/***************************************
 Fader
 ****************************************/

var fader = {
    name: "Fader",
    author: "Jeff Stagg",
    
    ready: function() {
        $('.imageFader').each(function() {
            var $this = $(this);
            var $panels = $this.find('.panel');
            var index = 0;

            $this.bind('refresh', function() {
                var $panel = $($panels[index]);
                $panels.removeClass('active').hide();
                $panel.addClass('active').fadeIn('slow');
            });

            $this.bind('show', function(event, imgIndex) {
                index = imgIndex;
                $this.trigger('refresh');
            });
        });
    }
};


/***************************************
 Fader Controller
 ****************************************/
var fader_controller = {
    name: "Fader Controller",
    author: "Jeff Stagg",
    
    ready: function(){
        $('.faderController').each(function() {
            var $this = $(this);
            var $buttons = $this.find('li');
            var $for = $($this.attr('for'));
            var index = 0;

            $this.bind('refresh', function() {
                index = $for.find('.active').index();
            });

            $this.bind('show', function(event, index) {
                $for.trigger('show', [index]);
                $buttons.removeClass('active');
                $($buttons[index]).addClass('active');
            });
            
            $this.bind('setSubtitle', function(event, index, subtitle) {
                $buttons.find('.subTitle').empty();
                $($buttons[index]).find('.subTitle').text(subtitle);
            });
                
            $buttons.each(function() {
                $(this).click( function() {
                    var buttonIndex = $buttons.index(this);
                    $this.trigger('show', [buttonIndex]);
                    var subtitle = $for.find('.panel.active...