Reputation: 4116

Simple jQuery Image Zoom - Overflow outsize browser window

I put together this simplified version of a little image zoom script I am working on.

https://jsfiddle.net/cvanderlinden/jjrhgxvv/4/

HTML:

<div class="image-zoom">
  <div class="zoom--actions">
    <a href="#" class="zoom-in">Zoom In</a>
    <a href="#" class="zoom-out">Zoom In</a>
  </div>
  <div class="zoom--img">
    <img src="https://www.google.ca/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
  </div>
</div>

JS (jQuery):

$('.zoom--actions .zoom-in').on('click', function () {
        var img = $(this).parents('.image-zoom').find('.zoom--img img');
        var width = img.width();
        var newWidth = width + 100;
        img.width(newWidth);
    }
);
$('.zoom--actions .zoom-out').on('click', function () {
        var img = $(this).parents('.image-zoom').find('.zoom--img img');
        var width = img.width();
        var newWidth = width - 100;
        img.width(newWidth);
    }
);

It's working as intended, the only problem I have found is that, it only seems to want to zoom until the window width has been reached, at which point it stops. It doesn't seem to matter on the jsfiddle, but inside a real browser, it stops. How do I allow the image to go past the browser window width, and also hide scrolling, just let the overflow happen.

Upvotes: 1

Answers (3)

ArbysGenius

Reputation: 1

I am new to html so i'm not the best but try this code! Switch up the ID's and source links, I am using a Pikachu card image as a test!

<!DOCTYPEhtml>
<html>
<head>
<style>
#pikachu-card {
border: 3px solid black;
}

#pikachu-card:hover {
width: 400px;
height: 546px;
border: 6px solid black;
}
</style>
<title>
Test
</title>
</head>
<body>
<h1>Hover to zoom</h1>
<img src="http://cdn.bulbagarden.net/upload/thumb/7/78/PikachuBaseSet58.png/200px-PikachuBaseSet58.png" id="pikachu-card">
</body>
</html>

Upvotes: -1