jQuery Image Gallery

I was asked to create a simple jQuery routine that could replace a current flash control. The challenge was not actually the jQuery portion but creating the HTML dynamically. The current code create a XML file that was passed to a flash object. Once the HTML was dynamically created, the jQuery was pretty easy.

Here is a sample of what I created:

<html>
    <!--
        Author:  Andrew Pallant
        Date:    July 2013

        Image Gallery jQuery Code - Created for a client to replace a flash solution.
        Code has been dumbed down for sample purposes.  Actually HTML code is more dynamic, but the jQuery code is the same no mater what.
    -->
    <head>
        	<script type="text/javascript">
            jQuery(document).ready(function () {
                // Initialize Controls
                jQuery("[id^=imgBig]").hide();

                // Set Mouse Over Events
                jQuery("[id^=thumb]").mouseover(function () { jQuery(this).fadeTo(0, 0.6); });
                jQuery("[id^=thumb]").mouseout(function () { jQuery(this).fadeTo(0, 1); });

                // Set Thumb Indexed Values
                for (var x = 0; x < 7; x++) {
                    jQuery("#thumb" + x).attr('indexedVal', x);
                }

                // Thumb Click Events
                jQuery("[id^=thumb]").click(function () {
                    jQuery("[id^=imgBig]").hide();

                    jQuery("#imgBig" + jQuery(this).attr('indexedVal')).fadeIn("Slow");
                });

                // Set Initial Image
                jQuery("#imgBig0").show();
            });
        </script>
    </head>

    <body>
        <div class="imgGallery">
	        <div class="BigImageContainer">
		        <img id='imgBig0' src='image1.jpg' />
		        <img id='imgBig1' src='image2.jpg' />
		        <img id='imgBig2' src='image3.jpg' />
		        <img id='imgBig3' src='image4.jpg' />
	        </div>
	        <div class="thumbCtrl">
		        <ul>
		            <li class="thumb">
			            <a href="#" onclick="return false;"><img id='thumb0' src='image1.jpg' /></a>
		            </li>
		            <li class="thumb">
			            <a href="#" onclick="return false;"><img id='thumb1' src='image2.jpg' /></a>
		            </li>
		            <li class="thumb">
			            <a href="#" onclick="return false;"><img id='thumb2' src='image3.jpg' /></a>
		            </li>
		            <li class="thumb">
			            <a href="#" onclick="return false;"><img id='thumb3' src='image4.jpg' /></a>
		            </li>
		        </ul>
	        </div>
        </div>

    </body>

</html>
photo gallery
Sample Image of the Gallery of what it could look like: currently being used on www.SoftwareCity.ca and www.pc-canada.com

Image of Finished Product

Published by

ldnDeveloper

Andrew Pallant (@LdnDeveloper) has been a web, database and desktop developer for over 16 years. Andrew has worked on projects that ranged from factory automation to writing business applications. Most recently he has been heavily involved in various forms for ecommerce projects. Over the years Andrew has worn many hats: Project Manager, IT Manager, Lead Developer, Supervisor of Developers and many more - See more at: http://www.unlatched.com/#sthash.8DiTkpKy.dpuf