Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery, ajax] Wykorzystanie LiveQuery wraz z jqZoom
Shadow
post
Post #1





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 13.12.2004

Ostrzeżenie: (0%)
-----

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:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. 		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  4.  
  5. <head>
  6. 		<title>shdw.pl // coding, design, everything you need</title>
  7. 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8. 		<link rel="stylesheet" type="text/css" href="css/style.css" />
  9. 		<link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
  10. 		<link rel="stylesheet" type="text/css" href="css/jcarousel.skin.css" />
  11. 		<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />
  12. 		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  13. 		<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
  14. 		<script type='text/javascript' src="js/jquery.jqzoom1.0.1.js"></script>
  15. 		<script type="text/javascript" src="js/ajax.navigation2.js"></script>
  16.  
  17. 		<script type="text/javascript">
  18. 			jQuery(document).ready(function() {
  19. 				jQuery('#mycarousel').jcarousel({
  20. 					vertical: true,
  21. 					scroll: 1
  22. 				});
  23. 			});
  24. 		</script>
  25.  
  26. 		<script type="text/javascript">
  27. 			$(document).ready(function(){
  28. 				var options = {
  29. 					zoomWidth: 390,
  30. 					zoomHeight: 412,
  31. 						xOffset: 120,
  32. 						yOffset: -20,
  33. 						showPreload: false,
  34. 						title: false
  35. 			};
  36. 				$(".jqzoom").jqzoom(options);
  37. 			});
  38.  
  39. 		</script>
  40. </head>
  41.  
  42. <body>
  43.  
  44. 		<div id="product_photos_wrapper">
  45. 			<div id="thumbnails_list">
  46. 				<ul id="mycarousel" class="jcarousel jcarousel-skin-simple">
  47. 					<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>
  48. 					<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>
  49. 					<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>
  50. 					<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>
  51. 					<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>
  52. 					<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>
  53. 					<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>
  54. 					<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>
  55. 					<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>
  56. 					<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>
  57. 				</ul>
  58. 			</div><!-- thumbnails_list -->
  59.  
  60. 			<div id="big_image_wrapper">
  61. 				<div id="big_image_content">
  62. 					<a href="img/big_1.jpg" class="jqzoom"  title="Nice Dress">
  63. 						<img src="img/image_1.jpg" title="Brand New Colorful Dress"  >
  64. 					</a>
  65. 				</div><!-- big_image_content -->
  66.  
  67. 				<a href="#" id="full_size_image">View Full-Size Image</a>
  68. 			</div><!-- big_image_wrapper -->
  69.  
  70. 			<div class="clear"></div>
  71. 		</div><!-- product_photos_wrapper -->
  72.  
  73. </body>
  74. </html>
[HTML] pobierz, plaintext


Kod thumb_1.html:

[HTML] pobierz, plaintext 
  1. <a href="img/big_1.jpg" class="jqzoom"  title="Nice Dress">
  2. 	<img src="img/image_1.jpg" title="Brand New Colorful Dress"  >
  3. </a>
[HTML] pobierz, plaintext


Kod thumb_2.html:

[HTML] pobierz, plaintext 
  1. <a href="img/big_2.jpg" class="jqzoom"  title="Nice Dress">
  2. 	<img src="img/image_2.jpg" title="Brand New Colorful Dress"  >
  3. </a>
[HTML] pobierz, plaintext


Cały element do podglądu: http://shdw.pl/tmp/netaporter/

Użyte skrypty:
JQZoom
Ajax Navigation 2
JCarousel

Z góry dziękuje za pomoc i pozdrawiam,
Kamil

Ten post edytował Shadow 10.05.2009, 01:30:15
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
vokiel
post
Post #2





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----

Z livequery korzysta się tak samo jak z live, tyle, że działa dla przyszłych elementów, pobranych np ajaxem.
[PHP] pobierz, plaintext 
  1. <?php
  2. <script type="text/javascript">
  3. $(this).livequery('click', function(event) { });
  4. /* Czyli u Ciebie być może tak:*/
  5. $(".jqzoom").livequery('hover',function(){
  6.     $(this).jqzoom(options);
  7. });
  8. //albo moze samo
  9. $(".jqzoom").livequery('hover',$(this).jqzoom(options));
  10. </script>
  11. ?>
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post

Posty w temacie
- Shadow   [jQuery, ajax] Wykorzystanie LiveQuery wraz z jqZoom   10.05.2009, 01:27:15
- - vokiel   Z livequery korzysta się tak samo jak z live, tyle...   10.05.2009, 22:21:58
- - Shadow   Niestety, ale żaden ze sposobów nie zadziałał, pró...   11.05.2009, 12:18:56
- - vokiel   A dołączyłeś plugin livequery? [PHP] pobierz, pla...   11.05.2009, 12:52:59
- - Shadow   Oczywiście, że tak Kod<script type="text...   11.05.2009, 16:50:18
- - luniak   poprawiona działajace wersja , może nei do końca z...   14.05.2009, 19:22:56
- - Shadow   Działa! Dzięki wielkie +pomógł   14.05.2009, 21:48:23

« Następny starszy · XML, AJAX · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 10.10.2025 - 13:31
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn