mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 13:24 Benutzername: Passwort: Auto-Login

Thema: Mehrere Slideshows vom 22.08.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Mehrere Slideshows
Autor Nachricht
duplo1
Threadersteller

Dabei seit: 26.09.2011
Ort: Bamberg
Alter: 37
Geschlecht: Männlich
Verfasst Mi 22.08.2012 16:05
Titel

Mehrere Slideshows

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
DaMiGGe

Dabei seit: 30.09.2008
Ort: Schwerin
Alter: 35
Geschlecht: Männlich
Verfasst Mi 22.08.2012 16:26
Titel

Antworten mit Zitat Zum Seitenanfang

mach mal das
Code:
$(function(){
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({
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
duplo1
Threadersteller

Dabei seit: 26.09.2011
Ort: Bamberg
Alter: 37
Geschlecht: Männlich
Verfasst Mi 22.08.2012 17:04
Titel

Antworten mit Zitat Zum Seitenanfang

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 Lächel :

$(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
  View user's profile Private Nachricht senden
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Mi 22.08.2012 18:35
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Mi 22.08.2012 18:57
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
DaMiGGe

Dabei seit: 30.09.2008
Ort: Schwerin
Alter: 35
Geschlecht: Männlich
Verfasst Do 23.08.2012 08:57
Titel

Antworten mit Zitat Zum Seitenanfang

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
Code:
});
nach dem ersten Block entfernen, wenn ich das so früh am Morgen erkenne.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
duplo1
Threadersteller

Dabei seit: 26.09.2011
Ort: Bamberg
Alter: 37
Geschlecht: Männlich
Verfasst Fr 24.08.2012 07:35
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
duplo1
Threadersteller

Dabei seit: 26.09.2011
Ort: Bamberg
Alter: 37
Geschlecht: Männlich
Verfasst Fr 24.08.2012 12:20
Titel

Antworten mit Zitat Zum Seitenanfang

problem ist gelöst Grins
  View user's profile Private Nachricht senden
 
Ähnliche Themen Best Slideshows EVER !
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.