Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [jQuery, ajax] Wykorzystanie LiveQuery wraz z jqZoom
Shadow
post 10.05.2009, 01:27:15
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 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
vokiel
post 10.05.2009, 22:21:58
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


--------------------
"It's in our hands... It always was..." | It's in my hands: blog.vokiel.com... It always be...
Go to the top of the page
+Quote Post
Shadow
post 11.05.2009, 12:18:56
Post #3





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

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

Niestety, ale żaden ze sposobów nie zadziałał, próbowałem różnych kombinacji. Ani rusz sadsmiley02.gif
Go to the top of the page
+Quote Post
vokiel
post 11.05.2009, 12:52:59
Post #4





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

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

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


--------------------
"It's in our hands... It always was..." | It's in my hands: blog.vokiel.com... It always be...
Go to the top of the page
+Quote Post
Shadow
post 11.05.2009, 16:50:18
Post #5





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

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

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.
Go to the top of the page
+Quote Post
luniak
post 14.05.2009, 19:22:56
Post #6





Grupa: Zarejestrowani
Postów: 171
Pomógł: 36
Dołączył: 12.01.2008
Skąd: Puszcza Mariańska

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

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


--------------------
Jeżeli ktoś na forum Ci pomógł, możesz mu podziękować klikając w opcje "Pomógł" pod jego postem!
--------------------
Go to the top of the page
+Quote Post
Shadow
post 14.05.2009, 21:48:23
Post #7





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

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

Działa! Dzięki wielkie smile.gif

+pomógł
Go to the top of the page
+Quote Post
« Następny starszy · XML, AJAX · Następny nowszy »
 

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

 

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

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

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