Mindless Philosophy






Simple Jquery Image Swap

by Darren Street

Created on: Wednesday November 27, 2013

Comment on this post

Yet another of those simple bits of functionality that I thought the Internet sea would be awash with. Sadly all to complex and difficult to follow. So I though I make one. Nice and easy to follow even I could make one. Err right.

simple-jquery-image-swap-demo

We are building today a simple image swap applet so that when you click on a link (table tr in this case) a picture is faded in.

But it could be easily modified so that the links could be thumbs or buttons or what ever you wanted. Let’s start.

First off this is how it will look. Click the demo button

The HTML



<div id="photo" data-active=""> 
            <div id="title" data-active=""><h1>A really simple Jquery image swap demo</h1> </div>
        
            <div id="selection">
                <table cellpadding="0" cellspacing="10">
                    <tr>
                    <th>Select a Photo</th>
                    <th>Size</th>
                    </tr>
                    <tr class="selectable" data-image="Images/Pic1.jpg" data-title="Boabab Tree">
                    <td>Boabab Tree</td>
                    <td>jpeg 200kb</td>

                    </tr>
                    <tr class="selectable" data-image="Images/Pic2.jpg" data-title="Fireworks over Sydney Opera House">
                    <td>Fireworks over Sydney Opera House</td>
                    <td>jpeg 214kb</td>

                    </tr>
                    <tr class="selectable" data-image="Images/Pic3.jpg" data-title="A rushing stream in the jungle">
                    <td>A rushing stream in the jungle</td>
                    <td>jpeg 220kb</td>

                    </tr>
                    <tr class="selectable" data-image="Images/Pic4.jpg" data-title="Sydney Harbour">
                    <td>Sydney Harbour</td>
                    <td>jpeg 154kb</td>

                    </tr>
                    <tr class="selectable" data-image="Images/Pic5.jpg" data-title="Twelve (err eleven) apostles">
                    <td>Twelve (err eleven) apostles</td>
                    <td>jpeg 95kb</td>
                    </tr>

                </table>
            </div>

        </div>

So what we have is a core div that holds the photo image. Within that we have the title and selection ids. These are absolutely positioned but they needn’t be.  Of note is the class associated with the table rows, class="selectable" and the data-image which is the value passed to the script.

Easy huh.  Next up the CSS.

The CSS



        <style type="text/css">
    
        html, body, div, span {margin: 0; padding: 0; border: 0;    font-size: 100%; font: inherit;    vertical-align: baseline;}
        body {line-height: 1;}
        table {font-family:Arial;}

        @font-face {
          font-family: 'Signika Negative';
          font-style: normal;
          font-weight: 300;
          src: local('Signika Negative Light'), local('SignikaNegative-Light'), url(http://themes.googleusercontent.com/static/fonts/signikanegative/v2/q5TOjIw4CenPw6C-TW06FsC-V7OaTEQVGc9Xldn9X1c.woff) format('woff');
        }
    
        body {font-family: 'Signika Negative', sans-serif; }
        #photo {background: url(Images/Pic1.jpg) no-repeat; width:960px; height:600px; position:relative;}
        #title, #selection {color: rgba(237, 241, 241, 0.80); background-color: rgba(160, 157, 157, 0.54); padding: 20px;}
        #title {position: absolute; top: 0px; right: 0px; text-align: right; width: 150px; height:560px; border-left:1px solid #999;z-index:9;}  
        #title h1 {font-weight: 300;letter-spacing: -4px;line-height: 1em;font-size: 3.5em;  }        
        #selection {position: absolute; bottom: 0px; left: 0px; height:150px; width:730px; border-top:1px solid #999;z-index:10;}
        table tr td {cursor:pointer; font-size:0.8em;}
        table tr td:hover {color:#333;}
        
        
        </style>

I am using a fancy Google webfont so you can skip that bit. The first three lines of the CSS are resets which you should have already setup so you can skip that too. Next the jQuery goodness.

The Jquery



$(function () {

               preload([
                'Images/Pic1.jpg',
                'Images/Pic2.jpg',
                'Images/Pic3.jpg',
                'Images/Pic4.jpg',
                'Images/Pic5.jpg'
            ]);


               $('tr.selectable').click(function () {
                   $('tr.selectable').removeClass('active');
                   $(this).addClass('active');
                   var image = $(this).attr('data-image');
                   var title = $(this).attr('data-title');

                   $('#photo').fadeOut(400);

                   setTimeout(function () {
                       $('#photo').css("background-image", "url(" + image + ")");
                       $('#photo').fadeIn(400);
                   }, 400);


               });
           });


           function preload(arrayOfImages) {
               $(arrayOfImages).each(function () {
                   $('<img/>')[0].src = this;
               });
           }

The script preloads the swap images so that you don’t get a delay when clicking. Then it attaches to the tr.click event and adds a class “active”. We don’t use it here but you could set some css to highlight the row or something fancy. Next it loads in the image from the data-image attribute and assigns the Title attribute too.

And finally it fade the next photo in/out.

The demo can be download from here. If this blog has been of use to you please link to my site. Every little SEO helps. Thanks for viewing.

0 comments





Have your say


Sorry this post is no longer accepting comments.