Category: jQuery

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