Autor |
Nachricht |
duplo1
Threadersteller
Dabei seit: 26.09.2011
Ort: Bamberg
Alter: 37
Geschlecht:
|
Verfasst Mi 22.08.2012 16:05
Titel Mehrere Slideshows |
|
|
hallo,
ich stehe vor einem problem bei dem ich eure hilfe brauche.
Ich möchte 2 slideshows auf einer webseite einbauen. für die erste slideshow habe ich folgenden jQuery Code der funktioniert.
$(function(){
$('#slideshow').slideshow({
preload: true,
preloadImage: 'loading.gif',
play: 2000,
pause: 1000,
hoverPause: true
});
});
nun benutze ich wieder diesen Code für meine zweite slideshow und ändere bloß nur den namen von slideshow zu slideshow2 wie auch der container der zweiten slideshow heißt. aber es funzt nicht. warum finktioniert die zweite slideshow nicht?
$(function(){
$('#slideshow2').slideshow2({
preload: true,
preloadImage: 'loading.gif',
play: 2000,
pause: 1000,
hoverPause: true
});
});
Zuletzt bearbeitet von duplo1 am Mi 22.08.2012 16:07, insgesamt 2-mal bearbeitet
|
|
|
|
|
DaMiGGe
Dabei seit: 30.09.2008
Ort: Schwerin
Alter: 35
Geschlecht:
|
Verfasst Mi 22.08.2012 16:26
Titel
|
|
|
mach mal das vor den beiden sachen weg und stecks in eine Code: | $(document).ready(function(){ |
(die schließenden geschweiften klammern nicht vergessen^^)
du musst nur die id/klasse des elementes ändern, welche die slideshow aufruft.
bei der 2. slideshow:
Code: | $('#slideshow2').slideshow({ | statt Code: | $('#slideshow2').slideshow2({ |
|
|
|
|
|
Anzeige
|
|
|
duplo1
Threadersteller
Dabei seit: 26.09.2011
Ort: Bamberg
Alter: 37
Geschlecht:
|
Verfasst Mi 22.08.2012 17:04
Titel
|
|
|
hallo und danke für deinen beitrag,
meinst du jetzt so oder habe ich falsch verstanden, denn es funktioniert jetzt weder die erste slidehow noch die andere :
$(document).ready(function(){
$('#slideshow').slideshow({
preload: true,
preloadImage: 'loading.gif',
play: 2000,
pause: 1000,
hoverPause: true
});
});
$('#slideshow2').slideshow({
preload: true,
preloadImage: 'loading.gif',
play: 2000,
pause: 1000,
hoverPause: true
});
});
Zuletzt bearbeitet von duplo1 am Mi 22.08.2012 17:05, insgesamt 1-mal bearbeitet
|
|
|
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Mi 22.08.2012 18:35
Titel
|
|
|
Die Tipps waren auch beide fürn Hintern.
1. $(function () { // Code }); ist eine ganz offizielle Kurzschreibweise für das ready-Event.
2. Entscheidend ist, dass Du den slideshow()-Aufruf auf eine Menge anwendest, die beide DOM-Knoten adressiert. Das geht bspw., indem Du statt IDs eine CSS-Klasse verwendest und den Selektor entspr. ausrichtest oder bspw. mit Komma mehrere Nodes adressierst oder mit jQuerys .add weitere Elemente hinzufügst.
|
|
|
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Mi 22.08.2012 18:57
Titel
|
|
|
Ich sehe gerade slideshow2 stammt vom TE, nicht von DaMigge. Insofern relativiere ich meine Hintern-Aussage. Allerdings nicht vollständig, denn dass eine jQuery-Erweiterung mit mehreren Aufrufen funktioniert, muss nicht zwingend gegeben sein.
Code: | $(function () {
var cmnSetup = {
preload: true,
preloadImage: 'loading.gif',
play: 2000,
pause: 1000,
hoverPause: true
};
$('#slideshow, #slideshow2').slideshow(cmnSetup);
// besser: $('.slideshow').slideshow (cmnSetup);
// oder: $('#slideshow').add('other selector').slideshow (cmnSetup);
}); |
Zuletzt bearbeitet von pantonine am Mi 22.08.2012 19:01, insgesamt 1-mal bearbeitet
|
|
|
|
|
DaMiGGe
Dabei seit: 30.09.2008
Ort: Schwerin
Alter: 35
Geschlecht:
|
Verfasst Do 23.08.2012 08:57
Titel
|
|
|
Wenn (wie beim TE vorgegeben) alle Werte der Slideshows gleich sein sollen, kannst du natürlich alles in eine Variable stecken und beide mit einer Klasse versehen.
Der Übersichtshalber (für Anfänger gar nicht so schlecht) würde ich beiden Slideshows eindeutige Bezeichnungen geben, egal ob ID oder Klasse.
@TE:
fast, einmal nach dem ersten Block entfernen, wenn ich das so früh am Morgen erkenne.
|
|
|
|
|
duplo1
Threadersteller
Dabei seit: 26.09.2011
Ort: Bamberg
Alter: 37
Geschlecht:
|
Verfasst Fr 24.08.2012 07:35
Titel
|
|
|
morgen,
danke, ja beide varianten klappen wunderbar. blos die zweite slideshow funktioniert nicht, dann liegt wohl der fehler an meinem CSS Code. den Code habe ich mir schon zig tausend mal durchgeschaut und ich finds den fehler nicht. und vor allem ist der Code der zweiten slideshow mit der ersten identisch kann doch nichts falsch sein. wäre super wenn jemand einen kurzen blick auf mein Code werfen würde.
/*erste slideshow*/
#container {
width:530px;
height: 330px;
margin: auto;
position:relative;
z-index:0;
}
#slides {
position:absolute;
top: 10px;
z-index:100;
left: 10px;
height: 300px;
}
.slides_container {
width:500px;
overflow:hidden;
position:relative;
display:none;
}
.slides_container a {
width:500px;
height:300px;
display:block;
}
.slides_container a img {
display:block;
margin: 0 10px 0 0;
}
-------------------------------------------------------------------------------------------------------
*/zweite slideshow*/
#container2 {
width:530px;
height: 330px;
margin: auto;
position:relative;
z-index:0;
}
#slides2 {
position:absolute;
top: 10px;
z-index:100;
left: 10px;
height: 300px;
}
.slides_container2 {
width:500px;
overflow:hidden;
position:relative;
display:none;
}
.slides_container2 a {
width:500px;
height:300px;
display:block;
}
.slides_container2 a img {
display:block;
margin: 0 10px 0 0;
}
Zuletzt bearbeitet von duplo1 am Fr 24.08.2012 07:37, insgesamt 1-mal bearbeitet
|
|
|
|
|
duplo1
Threadersteller
Dabei seit: 26.09.2011
Ort: Bamberg
Alter: 37
Geschlecht:
|
Verfasst Fr 24.08.2012 12:20
Titel
|
|
|
problem ist gelöst
|
|
|
|
|
|
|
|
Ähnliche Themen |
Best Slideshows EVER !
|
|