Change Image Using jQuery – Part Two

Change Image Using jQuery – Part Two

Welcome again!  This is part 2 for the tutorial that I wrote called “Change Image Using jQuery“.

Today we are going to add the code that makes the image pop up in a modal form when the user hovers the image.  So let’s get started, shall we?

First thing we will do is add a div to the index page that will be used to create the modal form, so open up the index.html file and add the following div directly following the linkpane div (really it doesn’t matter where, this is how I did it):

<div id="boxes">
    <!-- #customize your modal window here -->
    <div id="dialog" class="window">
        <img src="img/facebook.jpg" id="pop_image" />
        <!-- close button is defined as close class -->
        <br /><a href="#" class="close">Close it</a>
    </div>
    <!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
    <div id="mask"></div>
</div>

This sets up the modal popup window, so let’s get some styling going on for it now!  Open the file, main.css, that is located in the css folder and go to the bottom of the file.  Add the following css style rules:

/* Popup window styles */
/* default styles */
#mask {
    position:absolute;
    z-index:9000;
    background-color:#000;
    display:none;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#boxes .window {
    position:fixed;
    display:none;
    z-index:9999;
}

/* Customize your modal window here */
#boxes #dialog {
    width: 60px;
    height: 60px;
    top: 132px;
}

#boxes #dialog a {
  color: white;
}

#boxes #dialog img {
  width: 36px;
  margin: 0 auto;
}

Go ahead and play with the settings and see how it affects the output if you want… but, before you do, let’s put the jQuery goodness in place!  Open the file, main.js, in the js folder and add the following code to the end of the document ready function in the file:

$('img#image').hover(function(e) {
    var id = 'img#image';
  
    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set height and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});

    //transition effect
    $('#mask').fadeIn(1000);
    $('#mask').fadeTo("slow",0.8);

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css('top', winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);
    $('img#pop_image').attr('src', $(id).attr('src'));
    $('#boxes #dialog').css('display', 'block');

    //transition effect
    $(id).fadeIn(2000);

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
    });

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });

Now, when you hover the image, it will popup in a modal window and darken the background!  I hope you enjoyed this tutorial, please comment below if you have questions or comments!  Suggestions for improvements are always welcomed and appreciated!  If you want to download the updated code, you can get it here!

Thanks,
Bud Manz

PS-This tutorial was created using the awesome work found at http://www.queness.com/post/77/simple-jquery-modal-window-tutorial… just giving credit where credit is due! 🙂