Masking met .draggable en .resizable
Deze atom is bedoeld om je te laten zien hoe je, doormiddel van jQueryUI, met .draggable en .resizable heel simpel een foto/div kan positioneren in een masking box. Je kunt hierdoor iets maken zoals je hieronder ziet:
De HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="stylesheets/css.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="javascripts/draggable.js"></script>
</head>
<body>
<div class="mask-wrap" style="width: 200px; height: 200px; top: 100px; left: 300px;">
<div class="my-mask" style="width: 200px; height: 200px;">
<div class="my-image-copy">
<img src="http://placekitten.com/600/300" />
</div>
</div>
<div class="my-image">
<img src="http://placekitten.com/600/300"/>
</div>
</div>
</body>
</html>
In de head importeer je het volgende:
- jQuery
- jQeuryUI
- jQueryUI theme CSS
- CSS (css.css)
- Javascript (draggable.js)
In de body:
- Een wrapper om je mask (mask-wrap), zodat je de mask kan positioneren.
- Een mask (my-mask) met een breedte en hoogte.
- Een div (my-image-copy) binnen de mask waarin de afbeelding zit, deze div kan je later draggen en resizen.
- Een nieuwe div (my-image) met dezelfde afbeelding als eerder is aangegeven. Dit wordt het ‘doorzichtige’ buiten je mask.
De CSS (css.css)
body {
margin: 0;
padding: 0;
border: 0;
background: #000;
}
.mask-wrap{
position: absolute;
}
.my-mask {
position: relative;
overflow: hidden;
border: 1px dashed #fff;
}
.my-image, .my-image-copy {
position: absolute;
top: 0; left: 0;
width: 600px; height: 300px;
cursor: pointer;
}
.my-image{
opacity: 0.2 !important;
}
.my-image img, .my-image-copy img {
width: 100%;
height: 100%;
}
.my-maskheeft overflow hidden, zodat de afbeelding die erin zit niet buiten de mask komt..my-imageheeft een opacity van 0.2 zodat je de afbeelding buiten de mask doorzichtig kan zien.
De Javascript (draggable.js)
$(document).ready(function() {
/* Draggen en resizen van de class my-image en my-image-copy */
$(".my-image").draggable({
drag: function(event, ui){
var position = ui.position;
$(".my-image-copy").css({
top: position.top+"px",
left: position.left+"px"
})
}
}).resizable({
handles: 'all', autoHide: true,
alsoResize: '.my-image-copy',
aspectRatio: true
});
});
De div .my-image geef je de functies .draggable en .resizable mee zodat je deze kan draggen en resizen.
Binnen de .draggable voer je een drag event uit waarin je de positie van de class .my-image meegeeft aan de class .my-image-copy. Hierdoor zal het andere beeld meebewegen tijdens het slepen.
Binnen de .resizable geef je aan dat je vanuit alle hoeken de handles kan gebruiken, dat de handles worden verborgen als je niet met je muis op het object zit, dat de class my-image-copy ook moet resizen en dat alles zijn aspectratio moet behouden.
Dit alles zorgt ervoor dat als je het ene beeld beweegt, het andere beeld meegaat. Het is een manier van croppen die je niet vaak tegenkomt op het web, maar behoorlijk handig kan werken.
Files
Comments (3)
Inderdaad een leuke manier van croppen. Erg tof. :)
Thanks ! :D
Place a new comment
Sign in via:
Log in via Twitter, Facebook, LinkedIn en Github om reacties te plaatsen op Atoms en favorieten bij te houden.
Geplaatst op 22/09/2011 om 14:30
Super, heel cool Ingmar!