✔ jQuery Slider und Toolbar Konflikt

[patrikb]

Hallo zusammen,

vorweg möchte ich sagen, dass ich in jQuery & Javascripte unerfahren bin.
Ich hoffe, ich kann das Problem gut genug schildern, falls es Fragen gibt einfach nach hacken Wäre euch sehr dankbar.

1. Aktueller Zustand: Link
Das ist die Seite an der ich arbeite. Auf der Startseite direkt wird das nächste Event angekündigt und dort soll jetzt auch das darauf folgende Event beworben werden.

2. jQuery Slider Link
Mit Hilfe eines Sliders möchte ich erreichen, dass man zum nächsten Event gelangt (natürlich auch wieder zurück). Auf dem Link klappt das wunderbar, da ich die Toolbar (die auf der richtigen Seite trotzdem erscheinen soll) weg gelassen.

3. Kombination Link
Verwende ich jetzt den Slider und die Toolbar zusammen in einer HTML Datei so verschwindet auf ein Mal der Slider.
Die Toolbar wird mit diesem Script hervorgerufen:

<script src="http://cdn.wibiya.com/Toolbars/dir_0668/Toolbar_668898/Loader_668898.js" type="text/javascript"></script>

Im Internet habe ich auch schon versucht nachzuforschen, jedoch bin ich auf kein Ergebnis gekommen weil ich mich zu wenig damit auskenne.

Unter anderem auf diese Seite: Using jQuery with Other Libraries
Leider ohne Erfolg. Vielleicht ist auf der Seite die Lösung für mich beschrieben, nur ich komme leider nicht darauf durch meine wenigen Kenntnisse. Wäre froh wenn mir weiter geholfen werden kann

Grüße
Patrik

 

[rd4eva]

Unter anderem auf diese Seite: Using jQuery with Other Libraries

Da bist du schon auf der richtigen Fährte.

Du hast bereits prototype und scriptaculous eingebunden und willst nun zusätzlich auch noch jQuery einbinden.
Das Problem dabei ist das prototype und jQuery ( bei scriptaculous weiss ich es nicht ) den selben "Identifizerer" verwenden um angesprochen zu werden ( nämlich $ ).

Es passiert im Prinzip genau das gleiche was passieren würde wenn du zwei Funktionen erstellst die beide den selben Namen haben. Die letzte überschreibt die erste.

Also lange rede kurzer Sinn, du musst genau das machen was in der jQuery doku geschrieben steht :

<script src="prototype.js"></script>
<script src="jquery.js"></script>
   <script>
     jQuery.noConflict();
     
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });
   </script>

Also:
Zuerst protoype, scriptaculous einbinden und dann jQuery.
Danach jQuery.noConflict(); in ein Script-Block schreiben.
Alle jQuery Aufrufe nicht mehr mit $... sondern mit jQuery... beginnen.
Zum Beispiel in deinem Fall:

Anstatt

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 760;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
.
.
.

Muss es dann so aussehen

jQuery(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 760;
  var slides = jQuery('.slide');
  var numberOfSlides = slides.length;
.
.
.

 

[patrikb]

Wow! Einfacher als gedacht. Sehr schön und ausführlich von dir erklärt.
Habe nun die $-Zeichen durch "jQuery" ersetzt und es klappt. Jetzt kann ich mich an die nächste Eventgrafik setzen.

Vielen vielen Dank!