Einfaches jQuery Bild Zoom - Überlauf übergroßes Browserfenster

Ich stelle diese vereinfachte Version eines kleinen Bildzoomskriptes zusammen, an dem ich gerade arbeite.Einfaches jQuery Bild Zoom - Überlauf übergroßes Browserfenster

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); 
    } 
);

Es funktioniert wie beabsichtigt, das einzige Problem, das ich gefunden habe, ist, dass es nur scheint zu zoomen, bis die Fensterbreite erreicht ist, an welcher Stelle es sto ps. Es scheint nicht wichtig zu sein, aber in einem echten Browser hört es auf. Wie erlaube ich dem Bild, über die Breite des Browserfensters hinauszugehen und Scrolling auszublenden, lassen Sie einfach den Überlauf passieren.

Quelle

2017-02-17 Bobby S

es scheint, dass die Erweiterung einige CSS-Regel Grenzen auf das Bild. Wenn Sie den Stil hinzufügen: 'img { max-width: 100%; } 'zu deiner Geige bekommst du den gleichen Effekt. Sie müssen also Ihr Stylesheet überprüfen oder es hier bereitstellen. https://jsfiddle.net/banzay52/d2jaxbbn/ – Banzay

Danke Banzay! Das war's! –

Es wurde auf die Antwort verschoben. – Banzay

Es dass auf Bildvergrößerung einige CSS-Regel Grenzen scheint. Wenn Sie den Stil hinzu:

img { max-width: 100%; }

auf Ihre Geige, werden Sie den gleichen Effekt. Sie müssen also Ihr Stylesheet auf ähnliche Regel Existenz prüfen. Hier ist eine Geige Demo issue

Quelle

2017-02-17 22:40:57 Banzay

einfache CSS den Trick: body{overflow-x: visible;}

Quelle

2017-02-17 22:24:23

Das war meine erste Vermutung, aber es scheint nichts zu tun. Versuchte es auf Körper- und Elternelementen. Steht immer noch an der Fensterbreite. –

meine Antwort bearbeitet, hat Ihre Frage vor –

leider nicht verstanden, das gleiche Ergebnis. –

-1

Ich bin neu zu html, also bin ich nicht die beste, aber versuchen Sie diesen Code! Schalten Sie die IDs und Quelllinks ein, ich benutze ein Pikachu-Kartenbild als 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>

Quelle

2017-02-17 22:45:59 ArbysGenius

Dies beantwortet die Frage nicht. –

Einfaches jQuery Bild Zoom - Überlauf übergroßes Browserfenster

Antwort

Verwandte Themen