CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
joehungjohn
joehungjohn

Reputation: 71

Javascript image-hover-zoom pop window

I was trying to make this from scratch.

My idea is to set the pop-up back ground as a larger version of the image being hovered over. Then you move the background image like a collection of image snippets that make up a single sprite image.

I'm not sure if I'm missing something. Right now with this demo, I'm trying to hide the rest of the image by using z-index but it doesn't seem to be working.

There is 110 lines of code so I am just posting a working demo link if that's alright.

Working demo

This is the primary driver code though

This is inside the mousemove tag which is inside the mouseover tag

The idea is when you hover over the image, a coordinate x/y is updated (first step I did to get the x,y coordinates), then the image is appended once, appended image is set as absolutely positioned, then create some variables, now the coordinates represent the center of the image that is moving, mapped to the cursor hovering over the small image.

on mouse out, reset.

<script>
$("#coordinates").empty();
        $("#coordinates").append('x: ' + event.clientX + ' ' + ',' + 'y: ' + event.clientY + ' ');

        // append image
        if(imageAppended == "none") {
          $("#zoomed-in").append('<img id="image" src="nicephoto.jpg" width="600px" height="auto" />');
          imageAppended = "yes";
        }
        // set background image
        $("#image").css({
          'position' : 'absolute'
        });

        // hover image coordinates
        var imagePosition     = $("#image-container").position();
            imagePositionTop  = imagePosition.top,
            imagePositionLeft = imagePosition.left,
            imageWidthOffset  = ( ( $("#image").width() ) /2 ),  // move image by center
            imageHeightOffset = ( ( $("#image").height() ) /2 ); // move image by center

        // move the image
        $("#image").css({
          'top' : (event.clientY)-imagePositionTop-imageHeightOffset,
          'left' : (event.clientX)-imagePositionLeft-imageWidthOffset
        });
</script>

Upvotes: 0

Views: 431

Answers (1)

apieceofbart
apieceofbart

Reputation: 2197

I'm not sure I follow you but try to set overflow:hidden on #zoomed-in.

Upvotes: 2

Related Questions