Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>Image popup fun</title>
    <style>
        #idLargePicturePopupWindow {
            position:               absolute;
            background:             white;
            border:                 3px double blue;
            margin:                 1ex;
            opacity:                1.0;
            z-index:                1222;
            min-height:             100px;
            min-width:              200px;
            padding:                0;
            display:                none;
            top:                    10em;
            left:                   10em;
​
        }
        #idLargePicturePopupWindow img {
            margin:                 0;
            margin-bottom:          -4px;
            padding:                0;
        }
​
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready (jQueryMain);
​
        function jQueryMain () {
            $("body").append ('<div id="idLargePicturePopupWindow"><img></div>');
​
            $('#idLargePicturePopupWindow').bind (
                "mouseenter mouseleave",
                {bInPopup: true},
                myImageHover
            );
​
            $('#profPhotos .profPhotoLink > img').bind (
                "mouseenter mouseleave",
                {bInPopup: false},
                myImageHover
            );
​
            function myImageHover (zEvent) {
                if (zEvent.type == 'mouseenter') {
​
                    if ( ! zEvent.data.bInPopup) {
​
                        var imgurl = this.src.toString();
                        //need to replace '/thumbs/75x60/' part with '/photos/' to get the full size image
                        var bigimg = imgurl.replace(/\/thumbs\/[0-9x]+\//i, "/photos/");
​
                        $("#idLargePicturePopupWindow img").attr ('src', bigimg);
                    }
​
                    $("#idLargePicturePopupWindow").show ();
                }
                else {
                    $("#idLargePicturePopupWindow").hide ();
                }
            }
        }
    </script>
</head>
<body>
    <div id="profPhotos">
        <a class="profPhotoLink" href="photo.php?pid=9223981&uid=1319044306">
            <img width="95" height="130" src="http://th0.max.ipstatic.net/thumbs/163x130/8f/fd/588x800_1319044306_9223981.jpg">
        </a>
        <br>
        <a class="profPhotoLink" href="photo.php?pid=9254715&uid=1319044306">
            <img width="75" height="60" src="http://th2.max.ipstatic.net/thumbs/75x60/f0/d9/604x453_1319044306_9254715.jpg">
        </a>
        <a class="profPhotoLink" href="photo.php?pid=9237298&uid=1319044306">
            <img width="45" height="60" src="http://th0.max.ipstatic.net/thumbs/75x60/fc/2a/600x800_1319044306_9237298.jpg">
        </a>
        <a class="profPhotoLink" href="photo.php?pid=9237297&uid=1319044306">
            <img width="45" height="60" src="http://th0.max.ipstatic.net/thumbs/75x60/1d/91/600x800_1319044306_9237297.jpg">
        </a>
        <a class="profPhotoLink" href="photo.php?pid=9217873&uid=1319044306">
            <img width="45" height="60" src="http://th0.max.ipstatic.net/thumbs/75x60/ff/5b/600x800_1319044306_9217873.jpg">
        </a>
        <br>
    </div>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers