Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery, ajax] Wykorzystanie LiveQuery wraz z jqZoom
Forum PHP.pl > Forum > XML, AJAX
Shadow
10.05.2009, 01:27:15
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 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
vokiel
10.05.2009, 22:21:58
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
Shadow
11.05.2009, 12:18:56
Niestety, ale żaden ze sposobów nie zadziałał, próbowałem różnych kombinacji. Ani rusz sadsmiley02.gif
vokiel
11.05.2009, 12:52:59
A dołączyłeś plugin livequery?

[PHP] pobierz, plaintext 
  1. <?php
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4.     $('#mycarousel').live(function(){
  5.         $(this).jcarousel({
  6.             vertical: true,
  7.             scroll: 1
  8.         });
  9.     });
  10.     
  11.     var options = {
  12.         zoomWidth: 390,
  13.         zoomHeight: 412,
  14.         xOffset: 120,
  15.         yOffset: -20,
  16.         showPreload: false,
  17.         title: false
  18.     };
  19.     $(".jqzoom").live(function(){
  20.         $(this).jqzoom(options);
  21.     });    
  22. });
  23. </script>
  24. ?>
[PHP] pobierz, plaintext
Shadow
11.05.2009, 16:50:18
Oczywiście, że tak smile.gif

Kod
<script type="text/javascript" src="js/jquery.livequery.js"></script>


w/w kod niestety nie działa, a do tego dodatkowo używając go zarówno menu jak i zoom nie działają wcale.
luniak
14.05.2009, 19:22:56
poprawiona działajace wersja , może nei do końca zgodna ze standardami ale działa tongue.gif <br>
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. </head>
  26.  
  27. <body>
  28.  
  29. <div id="product_photos_wrapper">
  30. <div id="thumbnails_list">
  31. <ul id="mycarousel" class="jcarousel jcarousel-skin-simple">
  32. <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>
  33. <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>
  34. <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>
  35. <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>
  36. <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>
  37. <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>
  38. <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>
  39. <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>
  40. <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>
  41. <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>
  42. </ul>
  43. </div><!-- thumbnails_list -->
  44.  
  45. <div id="big_image_wrapper">
  46. <div id="big_image_content">
  47. <script type="text/javascript">
  48. $(document).ready(function(){
  49. var options = {
  50. zoomWidth: 390,
  51. zoomHeight: 412,
  52. xOffset: 120,
  53. yOffset: -20,
  54. showPreload: false,
  55. title: false
  56. };
  57. $(".jqzoom").jqzoom(options);
  58. });
  59.  
  60. </script>
  61. <a href="img/big_1.jpg" class="jqzoom" title="Nice Dress">
  62. <img src="img/image_1.jpg" title="Brand New Colorful Dress" >
  63. </a>
  64. </div><!-- big_image_content -->
  65.  
  66. <a href="#" id="full_size_image">View Full-Size Image</a>
  67. </div><!-- big_image_wrapper -->
  68.  
  69. <div class="clear"></div>
  70. </div><!-- product_photos_wrapper -->
  71.  
  72. </body>
  73. </html>
[HTML] pobierz, plaintext


Kod thumb_1.html:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. var options = {
  4. zoomWidth: 390,
  5. zoomHeight: 412,
  6. xOffset: 120,
  7. yOffset: -20,
  8. showPreload: false,
  9. title: false
  10. };
  11. $(".jqzoom").jqzoom(options);
  12. });
  13.  
  14. </script>
  15. <a href="img/big_1.jpg" class="jqzoom" title="Nice Dress">
  16. <img src="img/image_1.jpg" title="Brand New Colorful Dress" >
  17. </a>
[HTML] pobierz, plaintext


Kod thumb_2.html:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. var options = {
  4. zoomWidth: 390,
  5. zoomHeight: 412,
  6. xOffset: 120,
  7. yOffset: -20,
  8. showPreload: false,
  9. title: false
  10. };
  11. $(".jqzoom").jqzoom(options);
  12. });
  13.  
  14. </script>
  15. <a href="img/big_2.jpg" class="jqzoom" title="Nice Dress">
  16. <img src="img/image_2.jpg" title="Brand New Colorful Dress" >
  17. </a>
[HTML] pobierz, plaintext
Shadow
14.05.2009, 21:48:23
Działa! Dzięki wielkie smile.gif

+pomógł
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.