Jquery Konflikte

thomasabe · 30.11.2011

Hallo,

ich arbeite gerade an einer Website, in der ich mehrere jQuery-Applikationen einbinden moechte. Zurzeit sind es drei

1. Den BackgroundStretcher2, der dafuer sorgt, dass ein Hintergrundbild an die Aufloesung des jeweiligen Monitors des Website-Besuchers angepasst wird (gibts hier zu finden http://www.ajaxblender.com/bgstretch...n-updated.html)

2. Die Lightbox v2.05, die u.a. dafuer sorgt, dass Bilder auf der Website geoffnet werden und der Hintergrund gleichzeitig abgedunkelt wird (hier zu finden http://lokeshdhakar.com/projects/lightbox2/)

3. Eine Funktion, die einen verzoegerten Scroll zum Anfang der Website ermoeglicht (http://www.webdevtuts.net/javascript...-using-jquery/)

Eine Vierte mit einer Slideshow ist auch noch geplant (http://galleria.aino.se/).

Leider schaffe ich es nicht, alle Funktionen gleichzeitig zum Laufen zu bringen. Ich habe jetzt seit drei Tagen im Internet recherchiert. Mein Problem liegt wohl darin, dass die Funktionen sich alle an bestimmten Stellen ueberschneiden bzw. es Probleme mit den Bibliotheken gibt. Ich denke die Funktion jQuery.noConflict() wird vielleicht weiter helfen koennen. Ich weiss aber nicht, wie ich diese in meine Skripte einbauen muss. Die Anleitung von jQuery selbst (http://docs.jquery.com/Using_jQuery_...ther_Libraries) verstehe ich ueberhaupt nicht.

Ich bin total verzweifelt und komme nicht weiter mit der Website, die aber in zwei Wochen fertig sein sollte... Ich hoffe sehr, jemand von euch kann mir verstaendlich (ich bin absoluter Laie in Sachen jQuery) erklaeren, wie ich meine Funktionen sauber voneinander trennen kann. Ich habe eine Testseite erstellt, die alle Funktionen beinhaltet (http://www.test.redberrylake.hosting.../conflicts.php). Den Header moechte ich aus Platzgruenden aber gerne nicht in meinen Beitrag kopieren. Ich wuerde euch deshalb bitten die Seite aufzurufen und einen Blick auf den Quellcode zu werfen. Ich habe die jeweiligen Funktionen mit Kommentaren versehen, so dass diese einfacher zu finden sind. Ich kann auch gerne die Dateien persoenlich an jemanden rueberschicken.

Ich hoffe sehr, dass mir jemand in meiner ausweglosen Situtation weiter helfen kann und bedanke mich recht herzlich fuer jegliche Hilfestellungen!

sokie · 30.11.2011

AW: Jquery Konflikte

Dafür gibt es eine lösung (also EINE!) und zwar alles mi jQiuery zu machen. die ersten beiden Dinge habe ich schon als jQuery Plugins verwendet.
1. http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html
2.

ps. ich sehe grad, dass der backgroundstretcher schon der ist, den Du verwendest, also nur die gute alte lightbox2 (andere Frameworks), gegen die jQuery Variante austauschen, so sollte es gehen

thomasabe · 30.11.2011

AW: Jquery Konflikte

Hi Sokie,

vielen Dank fuer Deine Antwort. Ich habe jetzt die Lightbox gegen die von Dir empfohlende Version ausgetauscht. Leider kann ich nach wie vor nicht alle Funktionen zum Laufen bringen. Wenn ich die Scroll to the top Funktion deaktiviere, funktioniert nur die Lightbox. Deaktiviere ich die Lightbox funktioniert nur der topscroll. Deaktiviere ich den bgstretcher funktioniert auch nur der topscroll. Der BackgroundStretcher funktioniert nur, wenn ich die beiden anderen Funktionen abschalte. Es ist zum Mauese melken!

Mein header sieht momentan wie folgt aus:

PHP:

<!--1. BackgroundStretcher-->

<script type="text/javascript" src="/maindesign/bgstretcher-2/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/maindesign/bgstretcher-2/bgstretcher.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//  Initialize Backgound Stretcher
$('BODY').bgStretcher({
images: ['/images/bobolink-john-kindrachuk.jpg'], imageWidth: 1024, imageHeight: 768
});
});
</script>
 
<!--2. Lightbox-->
<script type="text/javascript" src="/maindesign/jquery-lightbox-0.5/js/jquery.js"></script>
<script type="text/javascript" src="/maindesign/jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
 // Use this example, or...
 $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
 // This, or...
 $('#gallery a').lightBox(); // Select all links in object with gallery ID
 // This, or...
 $('a.lightbox').lightBox(); // Select all links with lightbox class
 // This, or...
});
</script>
 
<!--3. Scroll to the top-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".scroll").click(function(event){
  //prevent the default action for the click event
  event.preventDefault();
  //get the full url - like mysitecom/index.htm#home
  var full_url = this.href;
  //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
  var parts = full_url.split("#");
  var trgt = parts[1];
  //get the top offset of the target anchor
  var target_offset = $("#"+trgt).offset();
  var target_top = target_offset.top;
  //goto that anchor by setting the body scroll top to anchor top
  $('html, body').animate({scrollTop:target_top}, 500);
 });
});
</script>

cebito · 30.11.2011

AW: Jquery Konflikte

Stell das mal irgendwo online und poste den Link hier, das vereinfacht die Fehlersuche ungemein...

thomasabe · 30.11.2011

AW: Jquery Konflikte

Hallo cebito, die Datei ist online unter

zu finden...

Danke, dass Du Dich an der Fehlersuche beteiligst!!!

cebito · 30.11.2011

AW: Jquery Konflikte

Validiere bitte zuerst die Seite, du hast nicht mal einen Doctype vergeben. Zudem sollten alle Funktionen in EIN $(document).ready(function(){} gebündelt werden, oder ohne an das Ende der Seite.

thomasabe · 30.11.2011

AW: Jquery Konflikte

Ok, hab ich schonmal gemacht. Ich hoffe das stimmt jetzt so (wie gesagt, bin leider Laie in Sachen jQuery)... Zurzeit funktioniert keine der drei Funktionen.

cebito · 30.11.2011

AW: Jquery Konflikte

Stück für Stück

du bindest jQuery 3 mal ein, nämlich

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

<script type="text/javascript" src=""></script>

das darfst du aber nur einmal, und zwar vor den Plugins... Ich bin dann erstmal im Bett

thomasabe · 30.11.2011

AW: Jquery Konflikte

Ok, ich werde noch mal etwas weiter daran herumdoktoren... Arbeite von Canada aus - hab also noch ein paar Stunden bis ich ins Bett gehe. Vielleicht kannst Du ja morgen nochmal reinschauen oder so...

Vielen Dank fuer Deine Hilfe und viele Gruesse nach Deutschland.

thomasabe · 01.12.2011

AW: Jquery Konflikte

Oh je, ich geb fuer heute erstmal auf. Mein fazit fuer heute:

Ich glaube fast alle Anwendungen haben unterschiedlich Beduerfnisse was die jQuery.js-Version betrifft. Wenn man also nicht mehrere Versionen parallel zum Laufen bringen kann, muss ich wohl ausschliesslich Anwendungen verweden, die alle unter der gleichen Version (sprich der Neuesten) laufen, oder?

2. Die unterschiedlich plugins benutzen teilweise die gleichen Steuerungsparameter ($). Dafuer gibt es laut Hersteller (http://docs.jquery.com/Using_jQuery_with_Other_Libraries) zwar eine Loesung, die ich aber ohne eine wirklich konkretes Beispiel so nicht nachvollziehen kann bzw. verstehe.

Ich glaub ich werf jQuery einfach komplett raus - wer braucht schon slideshow, backgroundstretcher, topscroll, usw. :-(

Jagutaba · 01.12.2011

AW: Jquery Konflikte

Also bei mir gehts:

Erst die jquery einbinden, dann die bgstretcher.js und als letztes die document.ready function.
In diese beide (event und bgstretcher) einbauen.

Slideshow habe ich noch nicht eingefügt, dürfte aber auch kein Problem sein.

Jagutaba · 01.12.2011

AW: Jquery Konflikte

Habe nun noch die lightbox-0.5 eingebaut. Geht auch ohne Probleme.

Schau dir einfach den Quelltext meine Demoseite an, und baue deine Seite so auf. Dann dürfte es eigentlich keine Probleme geben.

thomasabe · 01.12.2011

AW: Jquery Konflikte

Hallo Jagutaba, ich traue meinen Augen kaum. Es funktioniert ja wirklich! Vielen Dank fuer Deine Muehe fuer mich eine Demoseite zu bauen, die funktioniert. Ich werde mich gleich dransetzen und mein Glueck probieren! Viele Gruesse, Thomas

thomasabe · 02.12.2011

AW: Jquery Konflikte

Ich hab jetzt alles hinbekommen - vielen Dank fuer Eure Unterstuetzung. Ich glaube ich hab sogar etwas dazugelernt in Sachen jquery und bin gespannt auf die naechsten Applikationen, die es einzubauen gilt. Es bleibt also spannend! Viele Gruesse, Thomas