Andrew Pallant

Software & Web Developer

Donate To Support My Blog Donate if this post helped you. Coffee money is always welcomed!

jQuery Image Gallery

Physical Link: 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:

        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.
        	<script type="text/javascript">
            jQuery(document).ready(function () {
                // Initialize Controls

                // 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("#imgBig" + jQuery(this).attr('indexedVal')).fadeIn("Slow");

                // Set Initial Image

        <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 class="thumbCtrl">
		            <li class="thumb">
			            <a href="#" onclick="return false;"><img id='thumb0' src='image1.jpg' /></a>
		            <li class="thumb">
			            <a href="#" onclick="return false;"><img id='thumb1' src='image2.jpg' /></a>
		            <li class="thumb">
			            <a href="#" onclick="return false;"><img id='thumb2' src='image3.jpg' /></a>
		            <li class="thumb">
			            <a href="#" onclick="return false;"><img id='thumb3' src='image4.jpg' /></a>



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

Categories: Image Gallery, jQuery, Web

©2024 LdnDeveloper