dynamically preview large image on mouseover using jquery and css

Posted: October 8, 2010 in Asp.net

Steps To Follow :

1) Add CSS Styles :


/* Image Hover **/



A.imageEnlarge
{
border-top-width: 0px;
display: block;
border-left-width: 0px;
background: #ffffff;
float: left;
border-bottom-width: 0px;
width: 65px;
height: 65px;
border-right-width: 0px;
text-decoration: none;
}
A.imageEnlarge IMG
{
border-top-width: 0px;
display: block;
border-left-width: 0px;
border-bottom-width: 0px;
border-right-width: 0px;
}
A.imageEnlarge:hover
{
z-index: 500;
color: #000;
position: relative;
background-color: #ffffff;
text-decoration: none;
}
A.imageEnlarge B
{
padding-right: 10px;
display: block;
padding-left: 10px;
left: -9999px;
padding-bottom: 10px;
padding-top: 10px;
position: absolute;
-o-border-radius: 8px;
-icab-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
opacity: 0;
filter: alpha(opacity=0);
-o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-webkit-transition: opacity 0.6s ease-in-out;
width: 401px;
height: 401px;
}
A.imageEnlarge:hover B
{
border-right: #aaa 1px solid;
padding-right: 10px;
border-top: #aaa 1px solid;
padding-left: 10px;
background: #ffffff;
left: 80px;
padding-bottom: 10px;
border-left: #aaa 1px solid;
padding-top: 10px;
border-bottom: #aaa 1px solid;
top: -85px;
opacity: 1.0;
filter: alpha(opacity=100);
width: 401px;
height: 401px;
}


/* Image Hover End */

2) Html Format Must be:

<script type="text/javascript">
    $(document).ready(function() {
      $("img[src*=’_Small.jpg’]").thumbPopup({
        imgSmallFlag: "_Small",
        imgLargeFlag: "_Large"
      });
    });
</script>

<html>
<body>

  <a class="imageEnlarge" href="#">
                <img src="myimage_Small.jpg" />
                    <b>
                      <div id="thumbPopup" style="display:none">
                      </div>
                    </b>
                  </a>

</body>
</html>


3) Jquery To Be Used :

(function($) {
    $.fn.thumbPopup = function(options) {
        //Combine the passed in options with the default settings
        settings = jQuery.extend({
            popupId: "thumbPopup",
            imgSmallFlag: "_t",
            imgLargeFlag: "_l",
            loadingHtml: "<span style=’padding: 5px;’>Loading</span>"
        }, options);

        //Create our popup element
        popup =
        $("<div />")
        .attr("id", settings.popupId)
        .appendTo("b").hide();

        //Attach hover events that manage the popup
        $(this)
        .hover(setPopup);

        function setPopup(event) {
            var fullImgURL = $(this).attr("src").replace(settings.imgSmallFlag, settings.imgLargeFlag);

            $(this).data("hovered", true);

            //Load full image in popup
            $("<img />")
            .bind("load", { thumbImage: this }, function(event) {
                //Only display the larger image if the thumbnail is still being hovered
                if ($(event.data.thumbImage).data("hovered") == true) {
                    $(popup).empty().append(this);
                    $(popup).show();
                }
                $(event.data.thumbImage).data("cached", true);
            })
            .attr("src", fullImgURL);

            //If no image has been loaded yet then place a loading message
            if ($(this).data("cached") != true) {
                $(popup).append($(settings.loadingHtml));
                $(popup).show();
            }

        }

        //Return original selection for chaining
        return this;
    };
})(jQuery);

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s