Witam,
Otóż mam problem z jquery i ajaxem, którego od kilku długich dni nie mogę rozwiązać.
Chcę stworzyć galerię ubrań, która wyposażona jest w funkcję 'lupy', przesuwaną listę oraz przeładowywanie treści (w tym wypadku zdjęcia) bez przeładowywania całej strony.
Lupa oraz lista działają pięknie do póki nie przeładuje obrazka, wtedy 'lupa' zaprzestaje swojego działania.
Wina zapewne leży w braku ponownego załadowania skryptu 'lupy', przy przeładowaniu treści, lub jak się doczytałem na tym forum braku "otagowania" nowo załadowanych elementów.
Czytałem, iż jednym z rozwiązać jest użycie "livequery", jednakże nigdzie nie jest opisane w jaki sposób wykorzystać go do elementów, które nie korzystają z "kliknięcia" (lupa działa na zasadzie onmouse, bez kliknięcia).
Nie jestem obeznany w w/w językach, mogę nawet powiedzieć, że jestem po prostu zielony. W związku z czym prosiłbym o pomoc lub chociażby porady, podpowiedzi w jaki sposób połączyć działanie Ajax Navigation wraz z JQZoom przy pomocy LiveQuery (chyba, że jest inny sposób (IMG:
http://forum.php.pl/style_emoticons/default/smile.gif) )
Kod 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">
<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 type="text/javascript"> $(document).ready(function(){
var options = {
zoomWidth: 390,
zoomHeight: 412,
xOffset: 120,
yOffset: -20,
showPreload: false,
title: false
};
$(".jqzoom").jqzoom(options);
});
<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> </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" > </div><!-- big_image_content -->
<a href="#" id="full_size_image">View Full-Size Image
</a> </div><!-- big_image_wrapper -->
</div><!-- product_photos_wrapper -->
Kod 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" >
Kod 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" >
Cały element do podglądu:
http://shdw.pl/tmp/netaporter/Użyte skrypty:
JQZoomAjax Navigation 2JCarouselZ góry dziękuje za pomoc i pozdrawiam,
Kamil
Ten post edytował Shadow 10.05.2009, 01:30:15
[jQuery, ajax] Wykorzystanie LiveQuery wraz z jqZoom
Shadow [jQuery, ajax] Wykorzystanie LiveQuery wraz z jqZoom 10.05.2009, 01:27:15 
