Jquery einbinden,wie geht das?

**Rennsemmel** · 18.06.2010 23:28

Hallo,

Bin in Sachen Homepagebau leider nur ein Leihe deshalb bräuchte ich mal eure Hilfe.
Kennt ihr eine deutschsprachige Anleitung in der erklärt wird wie das ganze eingebunden wird?
Ich würde gerne Jquery und den Nivoslider einbinden und weiß nicht so recht wo die Codes reinkommen

Danke

**threadi** · 19.06.2010 01:19

Schau mal was ich in 2 Sekunden Googeln gefunden habe: http://www.ajaxschmiede.de/jquery/jq...ntes-werkzeug/

**Rennsemmel** · 19.06.2010 13:56

Nach dem Link war ich zwar immer noch nicht schlauer aber hier http://blog.andreas-kamleiter.de/web...ow-mit-jquery/ wird es etwas einfacher beschrieben,trotzdem danke.

Ich hab es in 2 Beispielen so mehr oder weniger hinbekommen solange man nur die Codes und .js und.css Dateien einfügen muß.
Wollte jetzt aber so eine http://opiefoto.com/articles/photoslider#example Gallerie einfügen und bin so langsam am verzweifeln.
Ich verstehe z.b. nicht wie ich die Fotos einfügen kann?Muß ich jedem Foto eine URL zuweisen bevor ich es in Dreamweaver nutzen kann?

Danke

**max.m** · 19.06.2010 17:18

Zitat von Rennsemmel

Ich verstehe z.b. nicht wie ich die Fotos einfügen kann?Muß ich jedem Foto eine URL zuweisen bevor ich es in Dreamweaver nutzen kann?

Was meinst Du damit?
Bilder hinzufügen ist doch einfach erklärt (Step 2),
hier der Pfad zum Bilderordner

Code:

FOTO.Slider.baseURL = 'http://example.com/path/';

und hier die im Beispielgenutzen 4 Bilder:

Code:

     FOTO.Slider.bucket = {  
         'default': {  
             0: {'thumb': 't_0.jpg', 'main': '0.jpg', 'caption': 'Opie'},  
             1: {'thumb': 't_1.jpg', 'main': '1.jpg'},  
             2: {'thumb': 't_2.jpg', 'main': '2.jpg', 'caption': 'Trash the Dress'},  
             3: {'thumb': 't_3.jpg', 'main': '3.jpg'}  
         }  
     };

t_0.jpg - t_3.jpg sind die Thumbnails (kleine Vorschaubilder), 0.jpg - 3.jpg sind die großen Bilder. Analog dazu kann man natürlich noch weitere Bilder hinzufügen.

**Rennsemmel** · 19.06.2010 18:49

Hallo Max,

sorry für die ungenaue Frage.Die Fotos liegen hier im Beispiel ja auf http://example.com/path/
Meine Fotos liegen momentan noch im Ordner auf der Festplatte Beispiel E:\Homepage\fotos. Ich erstelle die Homepage mit dem Dreamweaver.
Muß ich die Fotos zuerst auf meinen Webspace laden um sie zu sehen?
Hab andere jquery Tools probiert und da ging es viel leichter.Einfach auf den Code klicken wo jpeg steht und man konnte den Link setzen an die Stelle an der sich das Foto befindet, aber hier bin ich überfordert :-)
Was ich noch nicht verstehe ist Schritt 3. Wo kommt dieses "FOTO.Slider.reload('default');" hin??

Meine Html sieht momentan so aus:

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
	background-color: #FFF;
	text-align: center;
	margin: 0px;
	padding: 0px;
	width: 1280px;
}
#container {
	text-align: left;
	width: 1280px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#header {
	margin-top: 5px;
	margin-bottom: 0px;
	height: 30px;
	background-color: #FFF;
	padding: 0px;
	text-align: left;
	width: 1280px;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	line-height: 5px;
	margin-left: 5px;
}
#inhalt {
	margin-top: 0px;
	padding-top: 0px;
	height: 550px;
	background-color: #FFF;
	width: 1280px;
	text-align: center;
	font-size: 24px;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
-->
</style>
</head>
<link rel="stylesheet" type="text/css" media="screen" href="photoslider.css" />  
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="photoslider.js"></script>
<body>
<div class="photoslider" id="default"></div>  
<script type="text/javascript">  
$(document).ready(function(){  
//change the 'baseURL' to reflect the host and or path to your images  
FOTO.Slider.baseURL = 'http://example.com/path/';
//set images by filling our bucket directly  
FOTO.Slider.bucket = {  
'default': {  
0: {'thumb': 't_0.jpg', 'main': '0.jpg', 'caption': 'Opie'},  
1: {'thumb': 't_1.jpg', 'main': '1.jpg'},  
2: {'thumb': 't_3.jpg', 'main': '3.jpg', 'caption': 'Trash the Dress'},  
3: {'thumb': 't_4.jpg', 'main': '4.jpg'}  
 }  
 };  
 });  
 </script>  
<div class="pics"></div> 
<div id="container">
  <div id="header">
    <p>&nbsp;</p>
<blockquote>&nbsp;</blockquote>
  </div>
  <div id="inhalt">
    <blockquote>&nbsp;</blockquote>
  </div>
  <div id="footer"></div>
</div>
</body>
</html>

Vielen Dank für die Hilfe

**max.m** · 19.06.2010 19:11

Das:

Code:

 <script type="text/javascript">  
     $(document).ready(function(){  
         var ids = new Array(0,1,2,3);  
         FOTO.Slider.importBucketFromIds('default',ids);  
         FOTO.Slider.reload('default');  
         FOTO.Slider.preloadImages('default');  
         FOTO.Slider.enableSlideshow('default');  
     });  
 </script>

muss wohl genauso wie die 3 Zeilen:

Code:

<link rel="stylesheet" type="text/css" media="screen" href="photoslider.css" />  
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="photoslider.js"></script>

in den Head-Bereich, also zwischen die Tags <head></head>.
Wegen der URL: hast Du einen lokalen Testserver? XAMPP wird da recht häufig verwendet, dann kannst Du als baseURL auch http://localhost/projekt/fotos/ angeben. Ob E:\Homepage\fotos\ funktioniert solltest Du mal testen.

**Rennsemmel** · 19.06.2010 20:22

Auf die Gefahr hin das ich hier gesteinigt werde,ist das so richtig?Bis auf die Ordnerangabe der Fotos mein ich.

Vielen Dank.

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
	background-color: #FFF;
	text-align: center;
	margin: 0px;
	padding: 0px;
	width: 1280px;
}
#container {
	text-align: left;
	width: 1280px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#header {
	margin-top: 5px;
	margin-bottom: 0px;
	height: 30px;
	background-color: #FFF;
	padding: 0px;
	text-align: left;
	width: 1280px;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	line-height: 5px;
	margin-left: 5px;
}
#inhalt {
	margin-top: 0px;
	padding-top: 0px;
	height: 550px;
	background-color: #FFF;
	width: 1280px;
	text-align: center;
	font-size: 24px;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
-->
</style>
<link rel="stylesheet" type="text/css" media="screen" href="photoslider.css" />  
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="photoslider.js"></script>

<body><script type="text/javascript">  
     $(document).ready(function(){  
         var ids = new Array(0,1,2,3);  
         FOTO.Slider.importBucketFromIds('default',ids);  
         FOTO.Slider.reload('default');  
         FOTO.Slider.preloadImages('default');  
         FOTO.Slider.enableSlideshow('default');  
     });  
 </script>
</head>

<body>
<div class="photoslider" id="default"></div>  
   
<script type="text/javascript">  
$(document).ready(function(){  
//change the 'baseURL' to reflect the host and or path to your images  
FOTO.Slider.baseURL = 'http://example.com/path/';  
//set images by filling our bucket directly  
FOTO.Slider.bucket = {  
'default': {  
0: {'thumb': 't_0.jpg', 'main': '0.jpg', 'caption': 'Opie'},  
1: {'thumb': 't_1.jpg', 'main': '1.jpg'},  
2: {'thumb': 't_2.jpg', 'main': '2.jpg', 'caption': 'Trash the Dress'},  
3: {'thumb': 't_3.jpg', 'main': '3.jpg'}  
}  
};  
});  
 </script>  
<div class="pics"></div> 
<div id="container">
  <div id="header">
    <p>&nbsp;</p>
<blockquote>&nbsp;</blockquote>
  </div>
  <div id="inhalt">
    <blockquote>&nbsp;</blockquote>
  </div>
  <div id="footer"></div>
</div>
</body>
</html>

**max.m** · 19.06.2010 20:25

Teste es doch einfach.

Das <body>-Tag im <head></head>-Bereich muss raus, sonst sieht es auf den ersten Blick gut aus.

**Rennsemmel** · 19.06.2010 21:06

Ok,hab das Body-Tag entfernt.
Hab eben versucht die Fotos auf meinen Webspace per FTP hochzuladen aber dann hab ich als URL:ftp://web574@srv13.sysproserver.de/html/test
was wiederrum nicht funktionieren kann wegen der Passwortabfrage.
Gibt es noch eine Alternative zu XAMPP?Hab von HTML leider nur sehr sehr wenig Ahnung.

Gruß
Rennsemmel

**max.m** · 19.06.2010 21:12

Das ist die falsche URL. Die URL heisst: http://deineDomain.de/hierLiegenDieBilder/ (auf den abschliessenden Slash achten!)

zur Startseite vom TP

Thema: Jquery einbinden,wie geht das?

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Jquery einbinden,wie geht das?

Ähnliche Themen

jQuery UI 1.8 ist raus.

Prototype vs. jQuery

CEs über marker einbinden - wie geht das?

html dateien in seiten per CSS einbinden geht das ????

Newsletter in Site einbinden - geht das in meinem Fall?

Aktive Benutzer

Aktive Benutzer