Antworten auf deine Fragen:
Neues Thema erstellen

tutorial jquery bilder scrollen

bibifellow

Nicht mehr ganz neu hier

Hi, ich habe ein Tutorial in dem man die bilder scrollen kann ausprobiert
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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery.js" type="text/javascript">
<script src="jquery.tools.min.js"></script>
/* <![CDATA[ */
$(document).ready(function() {
$(".scrollable").scrollable({speed: 700, circular: true});
})
/* ]]> */
</script>



<title>Untitled Document</title>
</head>

<body>
<style type="text/css">
/* <![CDATA[ */
.scrollable {
	position:relative;
	overflow:hidden;
	width:680px;
	height:120px;
	border:1px solid #ccc;
}
.scrollable .items {
	width:20000em;
	position:absolute;
	clear:both;
}
.items div {
	float:left;
	width:680px;
}
.scrollable img {
	float:left;
	maragin:20px 5px 20px 21px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
}
.scrollable {
	float:left;
}
a.disable {
	visibility:hidden !important;
}
/* ]]>*/
</style>
<a class="prev" href="#">links</a>
<a class="next" href="#">rechts</a>
<div>
<div class="scrollable">
<div class="items">


<div>
<img src="bild1.jpg"/>
<img src="bild2.jpg"/>
<img src="bild3.jpg"/>
<img src="bild4.jpg"/>
</div>
<div>
<img src="bild5.jpg"/>
<img src="bild6.jpg"/>
<img src="bild7.jpg"/>
<img src="bild8.jpg"/>
</div>
</div>
</div>
</body>
</html>
Ich habe mir auch die Jquery tools jquery.tools.min.js heruntergeladen und in
den Ordner eingefügt und eingebunden.
Leider zeigt mit die Seite nur ein Bild und zwar nur ein Ausschnitt beim Klicken auf rechts und links passiert gar nicht und daneben habe ich dann noch /*/ stehen.
Bei den Bildern denke ich mir muss ich die Größen bestimmt mit % oder px an die divs anpassen. Ich habe zum probieren einfach ein paar Bilder von der Kamera genommen.
Aber ich glaube da muss noch ein Fehler sein, weil bei den rechts links Klicks nichts passiert.
 

AW: tutorial jquery bilder scrollen

Hm. So wie ich es sehe, sollten dann deine Buttons auch gleiche Klassen haben, wie die im Demo-Script. Also class="prev browse left", und class="next browse right".
 
AW: tutorial jquery bilder scrollen

Ich habe es geändert aber ich sehe nur die ersten vier Bilder wenn ich den div vergrößere sehe ich nach einem Abstand die restlichen Bilder und es passiert bei dem Anklicken von links und rechts rein gar nichts.

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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.tools.min.js" type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
$(".scrollable").scrollable({speed: 700, circular: true});
})
/* ]]>*/
</script>



<title>Untitled Document</title>
</head>

<body>
<style type="text/css">
/* <![CDATA[ */
.scrollable {
	position:relative;
	overflow:hidden;
	width:680px;
	height:120px;
	border:1px solid #ccc;
}
.scrollable .items {
	width:20000em;
	position:absolute;
	clear:both;
}
.items div {
	float:left;
	width:680px;
}
.scrollable img {
	float:left;
	maragin:20px 5px 20px 21px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
}
.scrollable {
	float:left;
}
a.disable {
	visibility:hidden !important;
}
/* ]]>*/
</style>
<a class="prev browse left" href="#">links</a>
<a class="next browse right" href="#">rechts</a>
<div>
<div class="scrollable">
<div class="items">


<div>
<img src="bild1.jpg" height="80px width="80px"/>
<img src="bild2.jpg" height="80px width="80px/>
<img src="bild3.jpg" height="80px width="80px/>
<img src="bild4.jpg" height="80px width="80px/>
</div>
<div>
<img src="bild5.jpg" height="80px width="80px/>
<img src="bild6.jpg" height="80px width="80px/>
<img src="bild7.jpg" height="80px width="80px/>
<img src="bild8.jpg" height="80px width="80px/>
</div>
</div>
</div>
</body>
</html>

Weiß wirklich nicht was verkehrt ist.
 
Zuletzt bearbeitet:
AW: tutorial jquery bilder scrollen

Hast du das Script schon mal mit Firebug (oder ähnlichem) versucht zu debuggen? Liefert dir die Konsole irgendwelche Hinweise was falsch sein könnte?
Es hilft eigentlich immer das JS Schritt für Schritt durchzugehen im Firebug, dann sieht man auch wo das Script nicht weiterkommt.

L. G.
 
AW: tutorial jquery bilder scrollen

Habe mir das Tool installiert aber sehr schwer damit umzugehen, wenn man es nicht kennt. Fehler zeigte er mir folgende.
Unerwartetes Token im Attribut-Selektor: '!'.
[Bei diesem Fehler anhalten]
Unbekannte Eigenschaft 'maragin'. Deklaration ignoriert.
[Bei diesem Fehler anhalten] maragin:20px 5px 20px 21px;

Ich muss doch die Konsole anklicken und dann die Seite starten und die Fehler anzeigen.
 
AW: tutorial jquery bilder scrollen

Der Fehler bringt dich doch schon einmal weiter:
Die Eigenschaft maragin ist unbekannt, das sollte wohl margin heißen
Zur Benützung von Firebug:
Du kannst auch in den Skript - Bereich von Firebug wechseln und dann dort bei deinem Script in der ersten Zeile einen Breakpoint setzen. Das machst du indem du zuerst dein Skript auswählst (falls es das noch nicht ist) und neben der Zeilennummer einen Mausklick machst. Dann erscheint ein roter Kreis, welcher den Breakpoint symbolisiert.
Dann bleibt das Skript automatisch an der Stelle stehen und du kannst mit F10 (oder indem du auf den überspringen-Button klickst) das Skript Schritt für Schritt ausführen lassen. Dann siehst du genau ab welcher Zeile er nicht weitermacht.
 
AW: tutorial jquery bilder scrollen

Ich habe einen Mac. Das überprüfen starte ich doch in dem ich die Seite noch einmal aktualisiere. Dieser Fehler bleibt
Unerwartetes Token im Attribut-Selektor: '!'.

Ich habe fast alle ! gelöscht aber der Fehler bleibt.

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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery.js" type="text/javascript">

<script src="jquery.tools.min.js" type="text/javascript">
<script type="text/javascipt">
/* <![CDATA[ */
$(document).ready(function() {
$(".scrollable").scrollable({speed: 700, circular: true});
})
 /*]]> */
</script>



<title>Untitled Document</title>
</head>

<body>
<style type="text/css">
/* <[CDATA[ */
.scrollable {
	position:relative;
	overflow:hidden;
	width:580px;
	height:120px;
	border:1px solid #ccc;
}
.scrollable .items {
	width:20000em;
	position:absolute;
	clear:both;
}
.items div {
	float:left;
	width:680px;
}
.scrollable img {
	float:left;
	margin:20px 5px 20px 21px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
}
.scrollable {
	float:left;
}
a.disable {
	visibility:hidden;
}
/* ]]>*/
</style>

<div>
<div class="scrollable">
<div class="items">
</div>

<div>
<img src="bild1.jpg" height="80px" width="80px"/>
<img src="bild2.jpg" height="80px" width="80px"/>
<img src="bild3.jpg" height="80px" width="80px"/>
<img src="bild4.jpg" height="80px" width="80px"/>
</div>
<div>
<img src="bild5.jpg" height="80px" width="80px"/>
<img src="bild6.jpg" height="80px" width="80px"/>
<img src="bild7.jpg" height="80px" width="80px"/>
<img src="bild8.jpg" height="80px" width="80px"/>
</div>
<div>
<img src="bild1.jpg" height="80px" width="80px"/>
<img src="bild2.jpg" height="80px" width="80px"/>
<img src="bild3.jpg" height="80px" width="80px"/>
<img src="bild4.jpg" height="80px" width="80px"/>
</div>
</div>
</div>

<a class="prev" href="#">links</a>
<a class="next" href="#">rechts</a>
</body>
</html>
Also es muss jetzt fast alles richtig sein. Die Bilder sind in einer Reihe nur das Scrollen funktioniert noch nicht. Es wird besser.
 
AW: tutorial jquery bilder scrollen

Vielleicht sind ja die jquery scrollable.UI tools nicht richtig. Ich habe sie von der seite flowplayer unten den Source Code von Scollable unter
jquery.tools.min.js abgespeichert.
Ist das richtig??? Es kann nur an Java liegen.:'(
 
AW: tutorial jquery bilder scrollen

Ich habe einen Mac. Das überprüfen starte ich doch in dem ich die Seite noch einmal aktualisiere.

Ja in deinem Fall schon, da deine Funktion automatisch nach dem Laden der Seite ausgeführt wird.
Es liegt aber zu 100% nicht am Java, ganz einfach deshalb weil du keines verwendest. Wenn schon, dann am Javascript

Kann man deine Seite auch einmal irgendwo online sehen? Oder kannst du genau sagen, welches Plugin du runtergeladen hast? (Also einen genauen Link dazu) Bzw. gibt es eine Dokumentation zu dem Plugin wo drinnen steht was man dabei beachten muss?

L. G.
 
AW: tutorial jquery bilder scrollen

Also das ist die Seite

Ich habe dann unten unter Scrollable die Datei Autoscroll plugin mit 1,5 kb
heruntergeladen und unter jquery.tools.min.js abgespeichert.
Hoffe dass das richtig ist.
Ist halt für mich nur eine Übung und das will ich dann in eine WS einbauen.
 
AW: tutorial jquery bilder scrollen

Ich habe noch einen Fehler gefunden. Nach jedem Einbinden muss doch ein
HTML:
</script>
kommen

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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="scroll.css" rel="stylesheet" type="text/css" media="screen" />

<script src="jquery.js" type="text/javascript"> </script>
<script src="jquery.tools.min.js" type="text/javascript"> </script>
<script type="text/javascript">

/* <![CDATA[ */
$(document).ready(function() {
$(".scrollable").scrollable({speed: 700, circular: true});
});
 /*]]> */
</script>



<title>Untitled Document</title>
</head>

<body>


<div>
<div class="scrollable">
<div class="items">
</div>

<div>
<img src="bild1.jpg" height="80px" width="80px"/>
<img src="bild2.jpg" height="80px" width="80px"/>
<img src="bild3.jpg" height="80px" width="80px"/>
<img src="bild4.jpg" height="80px" width="80px"/>
</div>
<div>
<img src="bild5.jpg" height="80px" width="80px"/>
<img src="bild6.jpg" height="80px" width="80px"/>
<img src="bild7.jpg" height="80px" width="80px"/>
<img src="bild8.jpg" height="80px" width="80px"/>
</div>
<div>
<img src="bild1.jpg" height="80px" width="80px"/>
<img src="bild2.jpg" height="80px" width="80px"/>
<img src="bild3.jpg" height="80px" width="80px"/>
<img src="bild4.jpg" height="80px" width="80px"/>
</div>
</div>
</div>

<a class="prev" href="#">links</a>
<a class="next" href="#">rechts</a>
</body>
</html>

Jetzt lautet die Fehlermeldung in Firebug

$.tools is undefined
[Bei diesem Fehler anhalten] var t = $.tools.scrollable;
jquery....min.js (Zeile 14)
$(".scrollable").scrollable is not a function
[Bei diesem Fehler anhalten] $(".scrollable").scrollable({speed: 700, circular: true});

Vielleicht kann jetzt eine Lösung gefunden werden. :'(
 
AW: tutorial jquery bilder scrollen

Guten Morgen bibifellow.

Also das ist die Seite

Ich habe dann unten unter Scrollable die Datei Autoscroll plugin mit 1,5 kb
heruntergeladen und unter jquery.tools.min.js abgespeichert.
Hoffe dass das richtig ist.

Soweit ich das auf der Seite verstanden habe, hast du mit dem 1,5kb großen JS nur den Autoscrollteil heruntergeladen, welcher aber scheinbar von Scrollable abhängig ist. Also du musst Scrollable & Autoscroll anwählen und dann unterhalb der Liste auf den "Download now" Button klicken.
Der Fehler den du bekommst (tools.scrollable ist keine Funktion...) heißt ja auch, dass die Funktion nicht vorhanden ist. Und die Funktion wird wohl in dem Scrollable JS definiert. :-)
Ich hoffe das war klar ausgedrückt.

L. G.
 
AW: tutorial jquery bilder scrollen

Hi ich habe die Dateien noch einmal heruntergeladen habe aber immer noch die Fehlermeldung. Hatte vorher schon folgende Zeile eingefügt
HTML:
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
und damit hat es funktioniert. Ich weiß zwar nicht warum aber so funktioniert es. Dieses Problem hatte ich auch mit jquery cyle. Da funktionierte es auch nur wenn ich es online verlinkt habe. Keine Ahnung warum ich fände es auch besser mit der Datei aber es geht nicht. Trotzdem danke für die Hilfe.
 
AW: tutorial jquery bilder scrollen

Wie gesagt, wenn du nur die 1.5kb große JS Datei runtergeladen hast dann war das einfach die falsche Datei (bzw. nicht alles)
In der von dir verlinkten jquery.tools.min.js sind, wie auch auf der von dir verlinkten Webseite ersichtlich, folgende Teile enthalten:
jQuery 1.4.2
Tabs
Tooltip
Scrollable
Overlay
Wie gesagt, wenn du Scrollable und Autoscroll plugin auswählst und dann die 4.22kB runterlädst, sollte es eigentlich funktionieren. (jQuery brauchst du dann auch noch, aber das hast du ja schon eingebunden)
Falls dir das zu kompliziert ist dann kopiere den src-Pfad von dem <script> Tag und rufe die Adresse aus. dann kannst du alles markieren und Lokal bei dir abspeichern und hast es in einer eigenen Datei.

L. G.
 
AW: tutorial jquery bilder scrollen

Ich habe den Link aufgerufen und die Daten abgespeichert und es hat funktioniert. Lieben Dank für die Geduld.
Werde dann mal die weiteren Tutorials erarbeiten.
;)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.965
Beiträge
1.540.137
Mitglieder
68.145
Neuestes Mitglied
filmzeugs
Oben