Ein Problem mit Booklet (Jquery-Plugin)

Bomberus

Tripel-As

Dabei seit: 12.06.2010

Beiträge: 167

Donnerstag, 30. Juni 2011, 12:49

Hab mir das Jquery-Plugin Booklet besorgt. Nur irgendwie will das bei mir nicht funktionieren.
Hier vom Anbieter ein kleines Tutorial
und hier mein Quelltext:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="script/jquery.booklet.1.2.0.min.js" type="text/javascript"></script>
<script src="script/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="script/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="script/jquery-ui-1.8.14.min.js" type="text/javascript"></script>
<script src="script/main.js" type="text/javascript"></script>
<link href="css/jquery.booklet.1.2.0.css" type="text/css" rel="stylesheet"/>
<link href="css/main.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Saftpresse - Die Schülerzeitung</title>
</head>
<body>
<div id="wrapper">
 <div id="book">
  <div class="b-load">
	<div> 
		<h3>Yay, Page 1!</h3>
	</div>
	<div> 
		<h3>Yay, Page 2!</h3>
	</div>
	<div> 
		<h3>Yay, Page 3!</h3>
	</div>
	<div> 
		<h3>Yay, Page 4!</h3>
	</div>
  </div>
 </div>
</div>
<script type="text/javascript">
  $(function(){
	  $('#book').booklet();
	  });
</script>
</body>
</html>

Wenn ich dies nun ausführe, sehe ich nur eine Liste mit meinen Divs, könnt ihr den Fehler erkennen?

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 624

Donnerstag, 30. Juni 2011, 14:03

Kannst du den Link zu diesem Beispiel geben?

Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

jegi0605

Routinier

Dabei seit: 10.01.2011

Beiträge: 259

Donnerstag, 30. Juni 2011, 14:28

Pack die Function in den HEAD Bereich und mach noch Document.Ready function dazu.

Dann sollte das klappen.

So sollte es aussehen:

	Javascript-Quelltext
1 2 3 4 5	$(document).ready(function() { $(function(){ $('#book').booklet(); }); });

Besser noch , Du speicherst das als Datei ab "meinscript.js" und lädst das JS File im HEADER

	HTML
1	<script src="script/meinscript.js" type="text/javascript"></script>

Gruß
Jens

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »jegi0605« (30. Juni 2011, 14:28)

Bomberus

Tripel-As

Dabei seit: 12.06.2010

Beiträge: 167

Donnerstag, 30. Juni 2011, 14:40

Leider Fehlanzeige, es klappt leider immer noch nicht, mein Quelltext sieht nun so aus:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="script/jquery.booklet.1.2.0.min.js" type="text/javascript"></script>
<script src="script/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="script/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="script/jquery-ui-1.8.14.min.js" type="text/javascript"></script>
<script src="script/main.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
        $(function(){
          alert('test'); // Ausführtest -> Klappt!
	  $('#book').booklet();
	});
});
</script>
<link href="css/jquery.booklet.1.2.0.css" type="text/css" rel="stylesheet"/>
<link href="css/main.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Saftpresse - Die Schülerzeitung</title>
</head>
<body>
<div id="wrapper">
 <div id="book">
  <div class="b-load">
	<div> 
		<h3>Yay, Page 1!</h3>
	</div>
	<div> 
		<h3>Yay, Page 2!</h3>
	</div>
	<div> 
		<h3>Yay, Page 3!</h3>
	</div>
	<div> 
		<h3>Yay, Page 4!</h3>
	</div>
  </div>
 </div>
</div>
</body>
</html>

Ich verstehe das nicht so ganz, habe das so durchgeführt, wie auf der Website (http://builtbywill.com/code/booklet/installation) beschrieben, bin kurz vorm verzweifeln.
Also Funktion wird ordnungsgemäß ausgeführt, beim Aufruf zeigt er mir den Alert.
Nur will er das "Buch" nicht darstellen.
Auf dieser Seite scheint das Plugin zu funktionieren.
Jedoch habe ich noch nicht den Grund dafür herausgefunden. Hat jemand noch eine Idee?

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 624

Donnerstag, 30. Juni 2011, 15:03

Wie gesagt .... Link dann kann man sich das mal online ansehen....

Ausserdem ist es egal ob du nun das Script mit $(document).ready(function() im Head Bereich includest oder ganz unten als letztes im html Bereich. Das document ready bewerikt das der Coder erste ausgeführt wird wenn die Seite komplett geladen wurde. Wenn du es ganz unten stehen hast wird ja automatisch zum schluss geladen. Vom daher kann das nicht das Problem sein wie jegi0605 meint.

Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Josephine« (30. Juni 2011, 15:03)

Bomberus

Tripel-As

Dabei seit: 12.06.2010

Beiträge: 167

Donnerstag, 30. Juni 2011, 15:07

Ok hab das mal online gestellt: *klick*, sieht sehr ernüchternd aus, also eigentlich sollte das
so aussehen

lorenz

Haudegen

Dabei seit: 05.11.2002

Beiträge: 647

Donnerstag, 30. Juni 2011, 15:29

deine includes der scripte sind in der falschen reinfolge

Javascript-Quelltext

<script src="script/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="script/jquery-ui-1.8.14.min.js" type="text/javascript"></script>
<script src="script/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="script/jquery.booklet.1.2.0.min.js" type="text/javascript"></script>


<script src="script/main.js" type="text/javascript"></script>

-LA

Bomberus

Tripel-As

Dabei seit: 12.06.2010

Beiträge: 167

Donnerstag, 30. Juni 2011, 15:31

oh man wieder so was Triviales, danke hast mir echt den Tag gerettet

jperl

Super Moderator

Dabei seit: 09.04.2003

Beiträge: 3 453

Donnerstag, 30. Juni 2011, 15:42

darauf wärst du relativ leicht gekommen, wenn du die javascript fehlerkonsole verwendet hättest.
zb. bei firefox startest du diese mit strg + shift + j.

jperl

Konfuzius [chinesischer Philosoph (551 - 479 v. Chr.)]
Das Entscheidende am Wissen ist, daß man es beherzigt und anwendet.