Menu
I am doing a research project in Psychology, so I'm really a beginner in JavaScript. Still, I have to get this done and it is very specific.
I want to zoom on an element of a page (a book cover) on click, have extra contents opening next to it at the same time (some text) and I want to be able to get out (close the text and zoom back out) in one click.
So far, I managed to have the zooming part easy with zoomooz.js and I got the rest with jQuery. My book cover and my text page (one div each) are on top of each other in a bigger div ("container"). When the container is clicked, cover and text get animated: one moves on the left, the other on the right. On click out of the container and using a stopPropagation, they get back together in the middle, hiding the text behind the cover as planned.
Now my problem is, that when I try to use zoomooz while animating my divs, they conflict. The way there, zooming in, works fine: zooming and animation at the same time. But for the way back, zooming out, I can't get them to work together. Zoomooz takes over. I tried to code zoomooz by hand but I don't know what I a doing -I just have a feeling that it has to do with a "stopPropagation" somewhere.
Down here is my mock-up/testing page, it contains everything and should make things clearer. I would be so happy if someone could give me a hand. Thanks so much.
<!DOCTYPE html>
<html>
<head>
<style>
div#main {background:yellow;z-index:1;}
div#container {position:relative;
width:232px;height:152px;border:2px dotted black;
background:#eee;margin:0 auto;z-index:10;}
div.cover {z-index:30;position:absolute;left:58px;
background:blue;width:116px;height:152px}
div.text {z-index:20;position:absolute;left:58px;
background:green;width:116px;height:152px}
p {font-size:0.3em;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- ZOOMOOZ-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.zoomooz.min.js"></script>
<script type="text/javascript" src="src/js/jquery.zoomooz-helpers.js"></script>
<script type="text/javascript" src="src/js/jquery.zoomooz-anim.js"></script>
<script type="text/javascript" src="src/js/jquery.zoomooz-core.js"></script>
<script type="text/javascript" src="src/js/jquery.zoomooz-zoomTarget.js"></script>
<script type="text/javascript" src="src/js/jquery.zoomooz-zoomContainer.js"></script>
<script type="text/javascript" src="src/js/purecssmatrix.js"></script>
<script type="text/javascript" src="src/js/sylvester.src.stripped.js"></script>
</head>
<body>
<div id="main">
<div id="container"> <!--ADD A class="zoomTarget" TO HAVE THE ZOOMING WORKING FINE BUT ONLY ONE WAY -->
<div class="text">
<p>aefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhze</p>
<p>aefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhze</p>
<p>aefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhze</p>
</div>
<div class="cover">
</div>
</div>
</div>
</div>
<!-- script COVER + CONTENTS-->
<script>
$(document).ready(function() {
$("#container").click(function(e) {
$(".cover").animate({left: '0px'});
$(".text").animate({left: '116px'});
e.stopPropagation();
});
$(document).click(function() {
$(".cover").animate({left: '58px'});
$(".text").animate({left: '58px'});
});
});
</script>
</body>
</html>
227
I got it!
Pretty simple, in fact. To zoom out, I had to order zooming to the body. See the "zooming out" coding by itself:
<script>
$(document).click(function() {
$('body').zoomTo({targetsize:0.75, duration:600});
});
</script>
And as an example for more intricated use, the whole set of functions together:
<script>
$(document).ready(function() {
$(".cover").click(function(e) {
$(this).animate({left: '0px'});
$(this).siblings(".text").animate({left: '116px'});
$(this).parent().siblings().fadeOut();
$(this).parent().zoomTo({targetsize:0.75, duration:600});
e.stopPropagation();
});
$(document).click(function() {
$(".cover").animate({left: '58px'});
$(".text").animate({left: '58px'});
$(".container").fadeIn();
$('body').zoomTo({targetsize:0.75, duration:600});
});
});
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With