Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: mintAjax + jQuery
Forum PHP.pl > Forum > XML, AJAX
neo1986kk
9.10.2010, 00:12:57
Witam mam w mintAjax tabsy czyli takie dynamiczne menu, oraz plik zdjecia.html gdzie dzięki jQuery wyświetlają się ładnie obrazki i teraz tak:

po wejsciu strony wszystko trzyma sie pliku index, każda podstrona jest w tabsach...

Problem polega na tym że po wejściu w:

1) www.mojserwer.pl/zdjecia.html - wszystko działa, zdjęcia pokazują się w jQuery elegancko przyciemnia się stronka mozna przerzucać foteczki - git.
2)www.mojserwer.pl --> kliknięcie zakładkę GALERIA --> pokazje się w tabsie plik zdjęcia.html i tu juz jest problem bo po wybraniu zdjęcia jQuery nie działa poprostu przechodzi mi do www.mojserwer.pl/images/01.jpg

dlaczego tak jest? czy poprostu mint gdyzie się z jQuery? czy moze problem polega na czym innym? ogolnie oba skrypty działają ale osobno, razem nie da rady...;(

mam nadzieje ze da się to jakoś połączyć ze sobą, pozdrawiam.
krowal
19.10.2010, 10:37:38
W mint jak i w jQuery jest funkcja '$' mogą się między sobą gryźć i będą na pewno winksmiley.jpg Załaduj najpierw jQuery, później mint, potem zrób coś takiego: var J = jQuery.noConflict() i zamiast $() (chcąc użyć jQuery) użyj J() jeśli to nie zadziała to zastanów się czy jQuery po wczytaniu zakładki widzi te elementy na których chcesz coś zrobić. Możliwe że powinieneś skorzystać z .live() (poczytaj do czego to jest).
vokiel
19.10.2010, 13:24:08
Z drugiej strony. Czy używasz mintAjax tylko do tych zakładek? Jeśli tak to możesz poszukać zamiennika do jQuery, korzystać tylko z jednej biblioteki i nie mieć tych problemów.
neo1986kk
20.10.2010, 02:36:50
nie za bardzo wiem czy dobrze zrobiłem ale tak :
[PHP] pobierz, plaintext 
  1. <head>
  2. <script=jq.js/>
  3. <script=mint.js/>
  4. <script>
  5. 	var J = jQuery.noConflict();
  6. 		J(document).ready(function(){
  7. 			J(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_square',slideshow:2000, autoplay_slideshow: true});
  8. 			J(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'fast',slideshow:10000});
  9.  
  10. 			J("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
  11. 				custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
  12. 				changepicturecallback: function(){ initialize(); }
  13. 			});
  14.  
  15. 			J("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
  16. 				custom_markup: '<div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
  17. 				changepicturecallback: function(){ _bsap.exec(); }
  18. 			});
  19. 		});
  20.  
  21. TERAZ MINT
  22.  
  23.  
  24.  function OnLoad() {  
  25.     var tabs = mint.gui.CreateTabWidget("tabsContent");
  26.  
  27.     tabs.fading = true;
  28.     tabs.activeClass = "active";
  29.     tabs.hoverClass = "hover";
  30.  
  31.     tabs.AddItem("tab1", "tab1", "text", "panel1.php");
  32.     tabs.AddItem("tab2", "tab2", "text", "panel2.php");
  33.     tabs.AddItem("tab3", "tab3", "text", "panel3.php");
  34.     tabs.AddItem("tab4", "tab4", "text", "zdjecia1.php");
  35.  
  36.  
  37.      mint.fx.Round("tabsContentOuter", "all", "small", true);
  38. }
  39. </script>
  40.  
  41. no i tutaj body zakladki itd
  42.  
  43. <div id="tab1" class="menuitem">START</div>
  44. <div id="tab2" class="menuitem">NOWOŚCI</div>
  45. <div id="tab3" class="menuitem">O MNIE</div>
  46. <div id="tab4" class="menuitem">GALERIA</a></div>
  47.  
  48. <div></div> - TU POJAWIAJĄ SIĘ DANE Z TABSÓW 
  49.  
  50.  
  51.  
[PHP] pobierz, plaintext


i nadal po załadowaniu galeri nie działa to JQ, a live to już w ogóle czarna magia... nawet nie wiem gdzie miałbym tego użyć

Dzięki za zainteresowanie
krowal
20.10.2010, 06:59:17
Ten kod:
[HTML] pobierz, plaintext 
  1. <script>
  2. J(document).ready(function(){
  3. 			J(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_square',slideshow:2000, autoplay_slideshow: true});
  4. 			J(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'fast',slideshow:10000});
  5.  
  6. 			J("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
  7. 				custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
  8. 				changepicturecallback: function(){ initialize(); }
  9. 			});
  10.  
  11. 			J("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
  12. 				custom_markup: '<div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
  13. 				changepicturecallback: function(){ _bsap.exec(); }
  14. 			});
  15. 		});
  16. </script>
[HTML] pobierz, plaintext


daj do plików które generują kod wyświetlany w zakładkach, jeśli mint parsuje tagi '<script>' to powinno być ok.
neo1986kk
20.10.2010, 11:50:06
czyli do mojego pliku zdjecia.php? jeśli tak to niestety też nie działa...

Wypróbowałem też 2 metody czyli tabsy z Jquery i bez zmian sam plik zdjecia.php dziala a w tabsie nie:(
index
[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  5.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  6.   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  7.  
  8.   		<!--script src="js/jquery.lint.js" type="text/javascript" charset="utf-8"></script-->
  9. 		<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
  10. 		<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
  11.  
  12.   <script>
  13.   $(document).ready(function() {
  14.     $("#tabs").tabs();
  15.   });
  16.  
  17.  
  18. 		$(document).ready(function(){
  19. 			$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_square',slideshow:2000, autoplay_slideshow: true});
  20. 			$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'fast',slideshow:10000});
  21.  
  22. 			$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
  23. 				custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
  24. 				changepicturecallback: function(){ initialize(); }
  25. 			});
  26.  
  27. 			$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
  28. 				custom_markup: '<div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
  29. 				changepicturecallback: function(){ _bsap.exec(); }
  30. 			});
  31. 		});
  32. 		</script>
  33.  
  34. </head>
  35. <body style="font-size:62.5%;">
  36.  
  37. <div id="tabs">
  38.     <ul>
  39.         <li><a href="panel1.php"><span>One</span></a></li>
  40.         <li><a href="panel2.php"><span>Two</span></a></li>
  41.         <li><a href="zdjecia1.php"><span>Three</span></a></li>
  42.     </ul>
  43.  
  44. </div>
  45. </body>
  46. </html>
  47.  
[PHP] pobierz, plaintext



zdjecia

[PHP] pobierz, plaintext 
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html>
  5. 	<head>
  6. 		<title>Coby Laren Galeria zdjęć</title>
  7. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. 		<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
  9. 		<!--script src="js/jquery.lint.js" type="text/javascript" charset="utf-8"></script-->
  10. 		<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
  11. 		<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
  12. 		 <link type="text/css" href="style.css" rel="stylesheet"></link>
  13.  
  14. 			<script type="text/javascript">
  15. 		$(document).ready(function(){
  16. 			$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_square',slideshow:2000, autoplay_slideshow: true});
  17. 			$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'fast',slideshow:10000});
  18.  
  19. 			$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
  20. 				custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
  21. 				changepicturecallback: function(){ initialize(); }
  22. 			});
  23.  
  24. 			$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
  25. 				custom_markup: '<div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
  26. 				changepicturecallback: function(){ _bsap.exec(); }
  27. 			});
  28. 		});
  29. 		</script>
  30. 		<style type="text/css" media="screen">
  31. 			* { margin: 0; padding: 0; }
  32.  
  33. 			body {
  34. 				font: 62.5%/1.2 Arial, Verdana, Sans-Serif;
  35. 				padding: 0 20px;
  36. 			}
  37.  
  38. 			h4 { margin: 15px 0 5px 0; }
  39.  
  40. 			h4, p { font-size: 1.2em; }
  41.  
  42. 			ul li { display: inline; }
  43.  
  44. 			.wide {
  45. 				border-bottom: 1px #000 solid;
  46. 				width: 4000px;
  47. 			}
  48. 			li {
  49. margin:10px;
  50. }
  51. img {
  52. border:1px solid white;
  53. white-space:undefined;
  54. }
  55.  
  56. 		</style>
  57. 	</head>
  58. 	<body>
  59.  
  60.  
  61. 		<ul class="gallery clearfix">
  62.  
  63. 		</ul>
  64. 		<h4>Gallery 2</h4>
  65. 		<ul class="gallery clearfix">
  66. 		<?
  67. include('zbaza.php');
  68. //pobieram zawartość links...  
  69. $pokaz_foto=mysql_query("select * from gallery");
  70. while($row=mysql_fetch_array($pokaz_foto))
  71. {
  72. $id=$row[0];
  73. $opis=$row[1];
  74. $image=$row[2];
  75.  
  76. echo'<li><a href="gallery/'.$image.'" rel="prettyPhoto[gallery2]"><img src="gallery/'.$image.'" width="60" height="60" alt="" /></a></li>';
  77. 			}
  78. 			?>
  79. 		</ul>
  80.  
  81.  
  82. 	</body>
  83. </html>
  84.  
  85. osobno działają fotki, razem z indexem nie da rady...
  86.  
[PHP] pobierz, plaintext
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.