Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: imgbox + history jquery = nie działa
Forum PHP.pl > Forum > XML, AJAX
Derwu
2.12.2009, 23:00:51
Witam ponownie,

kolejny problem.

Używam pluginy do jQuery:

1. history http://www.mikage.to/jquery/jquery_history_xhtml.html#aao
2. imgbox http://jqueryglobe.com/article/imgbox

Gdy użyję tylko imgbox'a działa bez zarzutów, gdy użyję tylko history też działa ok, natomiast jeżeli probuję wykorzystać oba pluginy, nie działa ani imgbox, ani history.

Wygląda to wszystko tak i działać nie chce w takiej konfiguracji
CODE
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="imgbox/jquery.imgbox.pack.js"></script>
<link rel="stylesheet" href="imgbox/imgbox.css" />


<script type="text/javascript">
$(document).ready(function() {
$("a.galeria").imgbox();

});
</script>




<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript">
// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
if (!isNaN(hash)){
var url = "get.php?id="+ escape(hash) + "&language=<?php echo $language?>";
}
else {
if(hash!='szukaj'){
var url = "get.php?show_realizacje="+ escape(hash).replace('realizacja', '') + "&language=<?php echo $language?>";
}
else if (hash=='szukaj') {
var url = "get.php?search="+ document.forms[0].search.value +"&language=<?php echo $language?>";
}
}
if(hash) {
$("#tresc").load(url);
}
}

$(document).ready(function(){
// Initialize history plugin.
// The callback is called at once by present location.hash.
$.historyInit(pageload, "get.php?id=33&language=<?php echo $language?>");

// set onlick event for buttons
$("a[rel='menu']").click(function(){
//
var hash = this.href;
hash = hash.replace(/^.*#/, '');
// moves to a new page.
// pageload is called at once.
// hash don't contain "#", "?"
$.historyLoad(hash);
return false;
});
});
</script>


Proszę o pomoc.
vokiel
3.12.2009, 09:20:03 
[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  2. <script type="text/javascript" src="js/jquery.history.js"></script>
  3. <script type="text/javascript" src="imgbox/jquery.imgbox.pack.js"></script>
  4. <link rel="stylesheet" href="imgbox/imgbox.css" />
[HTML] pobierz, plaintext 


[JAVASCRIPT] pobierz, plaintext 
  1. <script type="text/javascript">
  2. // PageLoad function
  3. // This function is called when:
  4. // 1. after calling $.historyInit();
  5. // 2. after calling $.historyLoad();
  6. // 3. after pushing "Go Back" button of a browser
  7. function pageload(hash) {
  8.     if (!isNaN(hash)){
  9.         var url = "get.php?id="+ escape(hash) + "&language=<?php echo $language?>";
  10.     } else {
  11.         if(hash!='szukaj'){
  12.             var url = "get.php?show_realizacje="+ escape(hash).replace('realizacja', '') + "&language=<?php echo $language?>";
  13.         } else if (hash=='szukaj') {
  14.             var url = "get.php?search="+ document.forms[0].search.value +"&language=<?php echo $language?>";
  15.         }
  16.     }
  17.     if(url) {
  18.         $("#tresc").load(url);
  19.     }
  20. }
  21.  
  22. $(document).ready(function() {
  23.     // Initialize history plugin.
  24.     // The callback is called at once by present location.hash. 
  25.     $.historyInit(pageload, "get.php?id=33&language=<?php echo $language?>");
  26.     // set onlick event for buttons
  27.     $("a[rel='menu']").click(function(){
  28.         var hash = this.href;
  29.         hash = hash.replace(/^.*#/, '');
  30.         // moves to a new page. 
  31.         // pageload is called at once. 
  32.         // hash don't contain "#", "?"
  33.         $.historyLoad(hash);
  34.         return false;
  35.     });
  36.  
  37.     $("a.galeria").imgbox();
  38. });
  39. </script>
[JAVASCRIPT] pobierz, plaintext


No i teraz firebug i debuguj winksmiley.jpg
Derwu
3.12.2009, 13:09:11
Nie wiem gdzie umieścić ten JS teraz, do tej pory umieszczałem w index.php i konsola nie wyrzucała żadnych błędów, ale dla testów, wrzuciłem to wszystko co wyżej napisałeś do index.php i do get.php (pobiera mi tresc strony z bazy danych) i pokazuje błędy takie jak poniżej. No tak ale teraz to wszystko ładuje się dwa razu, najpierw z index.php potem z get.php. Gdzie ma być ten JS w końcu? Wydaje mi się, że w index.php, no ale wtedy nie działa imgbox...

Skopiowane z konsoli firebuga
CODE
jQuery.historyCallback is not a function
anonymous()2 (wiersz 116)
[Break on this error] <dt><span class="kwadrat"></span>\n#35 (wiersz 117)
Nieznana pseudoklasa lub pseudoelement "eq".
vokiel
3.12.2009, 14:10:08
get.php powinien pobierać tylko content, który wpisujesz do środka div'a o id="tresc", nie powinien przesyłać nagłówka:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. 	<head>
  4.  
  5. 	</head>
  6. 	<body>
[HTML] pobierz, plaintext


Problemem może być też to, że content jest ładowany dynamicznie, zatem przypisanie do imgbox nie zadziała. Skorzystaj z pluginu livequery
Derwu
3.12.2009, 16:09:20
Dzięki za zwrócenie uwagi co do nagłówków, get.php wypisuje teraz tylko treść.

Użyłem pluginu livequery w taki sposób jak poniżej, ale nadal nie działa, gdy włączony jest plugin history
[HTML] pobierz, plaintext 
  1. 		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  2. 		<script src="js/jquery.livequery.js" type="text/javascript" charset="utf-8"></script>
  3. 		<script type="text/javascript" src="js/jquery.history.js"></script>
  4. 		<script type="text/javascript" src="imgbox/jquery.imgbox.pack.js"></script>
  5. 		<link rel="stylesheet" href="imgbox/imgbox.css" />
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
  1.  
  2. 		<script type="text/javascript">
  3. 		// PageLoad function
  4. 		// This function is called when:
  5. 		// 1. after calling $.historyInit();
  6. 		// 2. after calling $.historyLoad();
  7. 		// 3. after pushing "Go Back" button of a browser
  8. 		function pageload(hash) {
  9. 				if (!isNaN(hash)){
  10. 						var url = "get.php?id="+ escape(hash) + "&language=<?php echo $language?>";
  11. 				} else {
  12. 						if(hash!='szukaj'){
  13. 								var url = "get.php?show_realizacje="+ escape(hash).replace('realizacja', '') + "&language=<?php echo $language?>";
  14. 						} else if (hash=='szukaj') {
  15. 								var url = "get.php?search="+ document.forms[0].search.value +"&language=<?php echo $language?>";
  16. 						}
  17. 				}
  18. 				if(url) {
  19. 						$("#tresc").load(url);
  20. 				}
  21. 		}
  22.  
  23. 		$(document).ready(function() {
  24. 				// Initialize history plugin.
  25. 				// The callback is called at once by present location.hash. 
  26. 				$.historyInit(pageload, "get.php?id=33&language=<?php echo $language?>");
  27. 				// set onlick event for buttons
  28. 				$("a[rel='menu']").click(function(){
  29. 						var hash = this.href;
  30. 						hash = hash.replace(/^.*#/, '');
  31. 						// moves to a new page. 
  32. 						// pageload is called at once. 
  33. 						// hash don't contain "#", "?"
  34. 						$.historyLoad(hash);
  35. 						return false;
  36. 				});
  37.  
  38. 				$("a.galeria").imgbox();
  39. 				$('a.galeria') 
  40. 				.livequery('click', function(event) { 
  41. 						imgbox(); 
  42. 				});
  43. 		});
  44.  
  45. 		</script>
[JAVASCRIPT] pobierz, plaintext
vokiel
3.12.2009, 17:59:51
Imgbox'a wywołuj tylko raz, masz go zainicjować, nie podpinać inicjowanie do każdego kliknięcia. Zamiast tego: 
[JAVASCRIPT] pobierz, plaintext 
  1. $("a.galeria").imgbox();
  2. $('a.galeria') 
  3.     .livequery('click', function(event) { 
  4. 	imgbox(); 
  5. });
[JAVASCRIPT] pobierz, plaintext

Daj któreś z tych (raczej drugie): 
[JAVASCRIPT] pobierz, plaintext 
  1. $('a.galeria').livequery(imgbox()); // tak pewnie nie zadziała
  2. // ale tak powinno
  3. $('a.galeria').livequery(function(){
  4.     $(this).imgbox();
  5. });
[JAVASCRIPT] pobierz, plaintext
Derwu
3.12.2009, 20:40:59
vokiel stokrotne dzięki, teraz wszystko działa jak należy.
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.