 Moderator |
|
Wauw, dat was moeilijker dan ik dacht.
Ik heb de volgende oplossing bedacht met jQuery.
Het idee is als volgt:
- je plaatst initieel de fullblown afbeelding in een div
- vervolgens gebruik je JavaScript om:
- de bron en afmetingen te bepalen
- deze div leeg te maken
- de afbeelding in de achtergrond van deze div te plaatsen
- met behulp van de oorspronkelijke afmetingen en een uitgangs-breedte de div te resizen
De afbeelding wordt dan uitgevuld over de achtergrond van de div door middel van de background-size css-property (100%).
En vervolgens heb je twee knoppen om de div groter en kleiner te maken. In de JavaScript zitten geen afbeelding-specifieke zaken, dus deze zou je naar een .js bestandje kunnen verplaatsen.
bron:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
div#scale_me { background-size: 100%; background-repeat: no-repeat; }
</style>
</head>
<body>
<button type="button" id="scale_down"> - </button>
<button type="button" id="scale_up"> + </button>
<div id="scale_me"><img src="afbeelding.jpg" alt="" /></div>
<script type="text/javascript">
//<![CDATA[
$(window).load(function() {
// determine original dimensions
var src = $('#scale_me img').attr('src');
var origWidth = $('#scale_me img').width();
var origHeight = $('#scale_me img').height();
// cut image out
$('#scale_me').html('');
// build initial div based on an appropriate width, say 320px
var width = 320;
var scale = origWidth/width;
var height = Math.round(origHeight/scale);
// init div
$('#scale_me').css('background-image', 'url('+src+')').width(width).height(height);
// now we are good to go!
$('#scale_down').click(function(e) {
scaleImage(1/1.2); // you can tweak the "step" 1.2 to your liking
});
$('#scale_up').click(function(e) {
scaleImage(1.2); // you can tweak the "step" 1.2 to your liking
});
function scaleImage(factor) {
var width = Math.round($('#scale_me').width() * factor);
var height = Math.round($('#scale_me').height() * factor);
$('#scale_me').width(width).height(height);
}
});
//]]>
</script>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <style type="text/css"> div#scale_me { background-size: 100%; background-repeat: no-repeat; } </style> </head> <body> <button type="button" id="scale_down"> - </button> <button type="button" id="scale_up"> + </button> <div id="scale_me"><img src="afbeelding.jpg" alt="" /></div> <script type="text/javascript"> //<![CDATA[ $(window).load(function() { // determine original dimensions var src = $('#scale_me img').attr('src'); var origWidth = $('#scale_me img').width(); var origHeight = $('#scale_me img').height(); // cut image out $('#scale_me').html(''); // build initial div based on an appropriate width, say 320px var width = 320; var scale = origWidth/width; var height = Math .round(origHeight /scale ); // init div $('#scale_me').css('background-image', 'url('+src+')').width(width).height(height); // now we are good to go! $('#scale_down').click(function(e) { scaleImage(1/1.2); // you can tweak the "step" 1.2 to your liking }); $('#scale_up').click(function(e) { scaleImage(1.2); // you can tweak the "step" 1.2 to your liking }); function scaleImage(factor) { var width = Math .round($ ('#scale_me').width () * factor ); var height = Math .round($ ('#scale_me').height () * factor ); $('#scale_me').width(width).height(height); } }); //]]> </script> </body> </html>
Werkend voorbeeld:
http://fangorn....rs/jorisvh/
Het enige wat je hoeft te doen in de popup is dus:
- includen jQuery (lokaal of remote)
- includen js-bestandje
- zorgen dat je een div hebt met id "scale_me" waar je je fullblown afbeelding in plaatst. JavaScript doet de rest!
EDIT: als je afbeeldingen erg groot zijn, of je webserver niet al te snel, loont het misschien de moeite om een timeout in te bouwen voordat jQuery dingen gaat controleren, de afbeelding is mogelijk nog niet geladen.
EDIT 2: niet nodig, gebruik $(window).load() ipv $(document).ready() - code aangepast. |
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
