...

View Full Version : How to use jqZoom with LiveQuery



shdwcustoms
05-11-2009, 01:41 PM
Hello,
I have a little problem, that I cannot solve for a few long days.
I want to create gallery with 'magnifying glass' script, carousel script and ajax navigation.
'Magnifying glass' and carousel work great until I reload content (image) with ajax. Than 'magnifying glass' just isn't working.
I read that I can fix it using livequery, but this pluggin have really small documentation and every example is about 'click' function, not like in this 'magnifiying glass' script, onmouse, without clicking. I don't know how to use jquery at all, I want to learn it soon. Can someone help me with this?

index.html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
<title>shdw.pl // coding, design, everything you need</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="css/jcarousel.skin.css" />
<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<script type='text/javascript' src="js/jquery.jqzoom1.0.1.js"></script>
<script type="text/javascript" src="js/ajax.navigation2.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: true,
scroll: 1
});
});
</script>

<script type="text/javascript">
$(document).ready(function(){
var options = {
zoomWidth: 390,
zoomHeight: 412,
xOffset: 120,
yOffset: -20,
showPreload: false,
title: false
};
$(".jqzoom").jqzoom(options);
});

</script>
</head>

<body>

<div id="product_photos_wrapper">
<div id="thumbnails_list">
<ul id="mycarousel" class="jcarousel jcarousel-skin-simple">
<li><a href="javascript:void(0)" onclick="open_url('html/thumb_1.html','big_image_content');"><img src="img/thumb_1.jpg" width="56" height="84" alt="" /></a></li>
<li><a href="javascript:void(0)" onclick="open_url('html/thumb_2.html','big_image_content');"><img src="img/thumb_2.jpg" width="56" height="84" alt="" /></a></li>
<li><a href="javascript:void(0)" onclick="open_url('html/thumb_1.html','big_image_content');"><img src="img/thumb_1.jpg" width="56" height="84" alt="" /></a></li>
<li><a href="javascript:void(0)" onclick="open_url('html/thumb_2.html','big_image_content');"><img src="img/thumb_2.jpg" width="56" height="84" alt="" /></a></li>
<li><a href="javascript:void(0)" onclick="open_url('html/thumb_1.html','big_image_content');"><img src="img/thumb_1.jpg" width="56" height="84" alt="" /></a></li>
<li><a href="javascript:void(0)" onclick="open_url('html/thumb_2.html','big_image_content');"><img src="img/thumb_2.jpg" width="56" height="84" alt="" /></a></li>
<li><a href="javascript:void(0)" onclick="open_url('html/thumb_1.html','big_image_content');"><img src="img/thumb_1.jpg" width="56" height="84" alt="" /></a></li>
<li><a href="javascript:void(0)" onclick="open_url('html/thumb_2.html','big_image_content');"><img src="img/thumb_2.jpg" width="56" height="84" alt="" /></a></li>
<li><a href="javascript:void(0)" onclick="open_url('html/thumb_1.html','big_image_content');"><img src="img/thumb_1.jpg" width="56" height="84" alt="" /></a></li>
<li><a href="javascript:void(0)" onclick="open_url('html/thumb_2.html','big_image_content');"><img src="img/thumb_2.jpg" width="56" height="84" alt="" /></a></li>
</ul>
</div><!-- thumbnails_list -->

<div id="big_image_wrapper">
<div id="big_image_content">
<a href="img/big_1.jpg" class="jqzoom" title="Nice Dress">
<img src="img/image_1.jpg" title="Brand New Colorful Dress" >
</a>
</div><!-- big_image_content -->

<a href="#" id="full_size_image">View Full-Size Image</a>
</div><!-- big_image_wrapper -->

<div class="clear"></div>
</div><!-- product_photos_wrapper -->

</body>
</html>

thumb_1.html:


<a href="img/big_1.jpg" class="jqzoom" title="Nice Dress">
<img src="img/image_1.jpg" title="Brand New Colorful Dress" >
</a>

thumb_2.html:


<a href="img/big_2.jpg" class="jqzoom" title="Nice Dress">
<img src="img/image_2.jpg" title="Brand New Colorful Dress" >
</a>

Whole page preview: http://shdw.pl/tmp/netaporter/

Used scripts:
JQZoom (http://www.mind-projects.it/projects/jqzoom/)
Ajax Navigation 2 (http://javascript.internet.com/ajax/ajax-navigation2.html)
JCarousel (http://sorgalla.com/jcarousel/)

Thanks a lot,
Kamil



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum