problem po dodaniu Lightbox2

0

Witam.

Dodałem do swojej strony lightbox2:

		<link rel="stylesheet" href="lightbox2/css/lightbox.css" type="text/css" media="screen" />
		<script type="text/javascript" src="lightbox2/js/prototype.js"></script>
		<script type="text/javascript" src="lightbox2/js/scriptaculous.js?load=effects,builder"></script>
		<script type="text/javascript" src="lightbox2/js/lightbox.js"></script>

I przez to nie wykonuje mi się scrypt Java który umieściłem w sekcji head. Po usunięciu tego co wkleiłem wyżej wszystko działa.

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="jquery/jquery.js"></script>
		<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
		<meta http-equiv="Content-Type"
		content="text/html; charset=iso-8859-2" />
		<script type="text/javascript">
			$(document).ready(function() {
				$('#top_zdjecie').css({
					background : "url('loga/" + Math.floor(Math.random() * 12) + ".jpg')"
				});
			});
			setInterval(rotator, 10000);
			var a = 0;
			function rotator() {
				if(a == 0) {
					$('#top_zdjecie').fadeOut(10000);
				};
				if(a == 1) {
					$('#top_zdjecie').css({
						background : "url('loga/" + Math.floor(Math.random() * 12) + ".jpg')"
					});
					$('#top_zdjecie').fadeIn(5000);
					a = -50;
				};
				a++;
			};
		</script>
		<link rel="stylesheet" href="lightbox2/css/lightbox.css" type="text/css" media="screen" />
		<script type="text/javascript" src="lightbox2/js/prototype.js"></script>
		<script type="text/javascript" src="lightbox2/js/scriptaculous.js?load=effects,builder"></script>
		<script type="text/javascript" src="lightbox2/js/lightbox.js"></script>
		<link rel="stylesheet" type="text/css" media="all" href="style/style.css" />
		
	</head>
0

prototype/scriptaculous mogą się "gryźć" z jQuery. od błędów javascript masz konsolę błędów (klepaj google, żeby zobaczyć, gdzie Twoja przeglądarka ma taką konsolę). naprościej - pobierz lightbox dla jQuery. oszczędzisz nerwów i kilobajtów odwiedzającym (i sobie).

a moim osobistym zdaniem lightbox jest brzydki i źle działa, prettyPhoto jest 1000x lepsze (klik) - tylko wyłącz deep linking i opcje społecznościowe (jest dokumentacja, czytaj)

0

Mam taki błąd:

Błąd: $(document).ready is not a function
Plik źródłowy: http://127.0.0.1/modelarstwo_php/
Wiersz: 23

Czyli chyba miałeś rację ;)

0

Nie "mogą" się gryźć, tylko na pewno się gryzą z jQuery, jeśli pozostawimy te biblioteki samym sobie.

Po prostu jQuery definiuje funkcję-konstruktor (i zarazem swoistą przestrzeń nazw) o nazwie $. Funkcja ta tworzy kolekcje jQuery. Kolekcje jQuery mają m.in. metodę .ready().

Tymczasem Prototype również definiuje funkcję o tej samej nazwie -- znak dolara % -- i jeśli dołączymy Prototype po jQuery, to ta funkcja z Prototype nadpisze tą z jQuery. Funkcja $ z Prototype to zupełnie inna funkcja. Nie tworzy kolekcji jQuery; obiekty przez nie utworzone nie mają metody .ready() i tych parudziesięciu innych metod, które mają kolekcje jQuery. Stąd ten błąd w konsoli.

Można korzystać z jQuery wraz z innymi bibliotekami, bo oprócz funkcji $, jQuery definiuje jeszcze funkcję o nazwie... jQuery, która robi dokładnie to samo. Wystarczy korzystać z niej, a nie z nazwy $ i już jesteśmy kuloodporni -- w końcu żadna inna biblioteka nie zdefiniuje raczej funkcji o nazwie jQuery, prawda?

Jeśli mamy fragment kodu, który korzysta tylko z jQuery, a nie z prototype, to istnieją metody, byśmy w tym fragmencie mieli dostępną krótką nazwę $, mimo że globalnie mielibyśmy tylko długą nazwę jQuery. Wystarczy np. opatulić nasz kod w konstrukcję języka JavaScript zwaną IIFE (google it!) w taki sposób:

// tutaj nazwa $ mogła już zostać napisana przez prototype

(function($) {
  // w tym bloku funkcja $ oznacza jQuery
  $(document).ready(...); // działa!
}(jQuery));

// tutaj nazwa $ mogła już zostać napisana przez prototype

Gdyby to jQuery nadpisywało nam funkcję $ z Prototype, musielibyśmy użyć funkcji jQuery.noConflict() (poszukaj w dokumentacji: api.jquery.com).

To uściśliwszy, zgadzam się z @dzek69. Jak już masz jQuery, to korzystaj z bibliotek, które używają jQuery, a nie innych frameworków. Po co mnożyć byty, dorzucać kilobajtów do strony, kombinować z tymi wszystkimi konfliktami.

0

No to zrobiłem prettyPhoto. Rzeczywiście jest dużo lepszy i ma więcej opcji :).
Jednak jak chciałem dodać:

social_tools: '<div class="pp_social"><div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="http://www.facebook.com/plugins/like.php?locale=en_US&href='+location.href+'&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div></div>' /* html or false to disable */

To przestaje mi działać cały prettyImage.

		<script type="text/javascript" charset="utf-8">
			  $(document).ready(function(){
			    $("a[rel^='prettyPhoto']").prettyPhoto({
			    	animation_speed: 'normal', /* fast/slow/normal */
			    	theme: 'facebook', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
			    	deeplinking: true, /* Allow prettyPhoto to update the url to enable deeplinking. */
			    	social_tools: '<div class="pp_social"><div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="http://www.facebook.com/plugins/like.php?locale=en_US&href='+location.href+'&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div></div>' /* html or false to disable */
			    });
			  });
		</script>
0

Ja Ci mówiłem, żebyś wyłączył social_tools (chyba, że potrzebujesz) i deeplinking (wkurza, czasem psuje inne skrypty).

Na pierwszy rzut oka nic nie widzę, a nie chce mi się wgłębiać, więc parę spraw:
animation_speed możesz wyrzucić - wartość "normal" jest domyślna z tego co kojarzę
theme wybierz jakiś (tu: facebook). wywal komentarz, bo jest zbędny.
deeplinking: ustaw false
social_tools: false, A JEŻELI CHCESZ MIEĆ WŁĄCZONE - to zostaw puste (tj usun tę linię). Ten długi kod z divami jest wartością domyślną.

1 użytkowników online, w tym zalogowanych: 0, gości: 1