zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Wie jQuery Slideshow mehrfach einfügen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.04.2012, 20:00
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.04.2009
Beiträge: 45
MythTakes befindet sich auf einem aufstrebenden Ast
Standard Wie jQuery Slideshow mehrfach einfügen?

Hallo sehr geehrte Commune,

ich habe eine Frage zu meiner Slideshow, die ich auf meiner One-Page-Site mehrfach verwenden möchte.

Ich möchte, dass ich sie mehrfach (für mehrere Container) anwenden kann. Bin aber leider noch nicht ganz vertraut mit jQuery. So kommt es bei mir zu den Problem, dass der neu angelegte Container mit dem Slider sofort dem ersten Slider im ersten Container angefügt wird.

Momentan verwende ich diesen Code:

Code:
<script type="text/javascript">

$(document).ready(function(){

  var currentPosition = 0;

  var slideWidth = 960;

  var slides = $('.slide');

  var numberOfSlides = slides.length;



  // Remove scrollbar in JS

  $('#slidesContainer').css('overflow', 'hidden');



  // Wrap all .slides with #slideInner div

  slides

    .wrapAll('<div id="slideInner"></div>')

    // Float left to display horizontally, readjust .slides width

	.css({

      'float' : 'left',

      'width' : slideWidth

    });



  // Set #slideInner width equal to total width of all slides

  $('#slideInner').css('width', slideWidth * numberOfSlides);



  // Insert controls in the DOM

  $('#slideshow')

    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')

    .append('<span class="control" id="rightControl">Clicking moves right</span>');



  // Hide left arrow control on first load

  manageControls(currentPosition);



  // Create event listeners for .controls clicks

  $('.control')

    .bind('click', function(){

    // Determine new position

	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

    

	// Hide / show controls

    manageControls(currentPosition);

    // Move slideInner using margin-left

    $('#slideInner').animate({

      'marginLeft' : slideWidth*(-currentPosition)

    });

  });



  // manageControls: Hides and Shows controls depending on currentPosition

  function manageControls(position){

    // Hide left arrow if position is first slide

	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }

	// Hide right arrow if position is last slide

    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }

  }	

});

</script>
Um voranzukommen habe ich erst mal eine Quick'n'Dirty Variante genommen, und habe diesen Code dupliziert und jede Klasse neu benannt.

Zu meinem Anliegen:
Wie muss ich den Code ändern, dass der Loop sauber nach jedem Container endet und der Slider im neuen Container nur die Elemente greift, die dort angelegt sind?

Vielen Dank für jeden Ratschlag und Hilfe.

MythTakes
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.05.2012, 15:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.04.2009
Beiträge: 45
MythTakes befindet sich auf einem aufstrebenden Ast
Standard

Kann mir niemand weiterhelfen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.05.2012, 14:32
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Hallo,

ich denke es wäre sinnvoll, wenn du uns deinen Versuch online zur Verfügung stellen würdest. Ich kann dir hierfür jsFiddle und Tinkerbin wärmstens empfehlen.

Gruß, lotti.
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
Mit Zitat antworten
  #4 (permalink)  
Alt 03.05.2012, 22:47
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.04.2009
Beiträge: 45
MythTakes befindet sich auf einem aufstrebenden Ast
Standard

Okay, ich habe die Seite mal hochgeladen und nur den relevanten Bereich zur Verfügung gestellt.

Unter
http://bit.ly/K6zlZk


Und Doktor, können Sie mir helfen?

Geändert von MythTakes (03.05.2012 um 22:58 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 04.05.2012, 10:52
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Hallo,

du benutzt zwar verschiedene IDs für deine Container (#slideshow, #slideInner, ..), allerdings bindest du die Click-Events immer anhand des Selektors '.control' (also für JEDES Element der Klasse '.control'). Das führt letztlich dazu, dass beim Auslösen eines Klicks auf Elemente der Klasse '.control' ALLE Slides durchgeführt werden. Hier solltest du das Ganze etwas umstrukturieren und die Elemente der Klasse '.control' abhängig von einem Eltern-Element selektieren. Beispielsweise so: $( '#slideshow .control' ). Du könntest natürlich auch mit next() und prev() arbeiten.

Ich hoffe ich konnte dir vorerst helfen, auch wenn ich den Code nur kurz überflogen habe. Dass du das Ganze besser in ein Plug-In packst, ist hoffentlich klar

Gruß, lotti.
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint

Geändert von lottikarotti (04.05.2012 um 11:48 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 04.05.2012, 17:29
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.04.2009
Beiträge: 45
MythTakes befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank. So funktioniert es.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Slideshow einfügen in html Die Hilfesuchende (X)HTML 4 08.04.2012 20:56
php tag mittel jquery einfügen? benzrecordings Javascript & Ajax 4 16.12.2011 00:34
Ladezeitenstatus-Bild bei JQuery Slideshow möglich? MarkusStar Javascript & Ajax 2 19.04.2010 21:44
jquery slideshow uwehamburg Javascript & Ajax 3 28.05.2009 12:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:44 Uhr.