Conflicterende jquery library's

[jonassmets]

Hallo daar,

Ik ben nu al enige tijd aan een tumblr theme aan het knutselen ben eindelijk zover dat ik redelijk tevreden ben met het resultaat.
Code kan waarschijnlijk 100x mooier geschreven worden, maar mijn html en css kennis is roestig, en van javascript en jquery heb ik al helemaal geen kaas gegeten. Ik heb via veel gegoogle, knip en plakwerk een aantal dingen ingebouwd die met jquery werken, maar nu gaat er iets mis.
Als je op http://www.jonassmets.net met je muis onderaan het browser venster gaat staan dan komen er een aantal links tevoorschijn, en als je helemaal naar onderaan de pagina scrollt dan verschijnt er rechts boven een vierkantje, klik je hier op dan scrollt de pagina naar boven. Dit werkt allemaal zonder problemen.
Nu wou ik nog iets extra's met de achtergrond doen, op http://smetsjonas.tumblr.com (mijn test pagina) heb ik het voor elkaar gekregen dat je als bezoeker kan kiezen tussen een aantal thumbnails en zelf de achtergrond kan wijzigen. Dit werk ook prima! (klik op de afbeelding van de camera, links boven, en er verschijnt een witte balk met thumbnails in, klik op een thumbnails en de achtergrond veranderd)...

Nu het probleem:
Voor het uitschuiven van de witte balk met thumbnails moest ik weer een aantal jquery library's inladen, en hier gaat het dus fout. Het kiezen van de achtergrond werk, meer als je nu met je muis onderaan de pagina gaat staan, dan verschijnen de links niet meer, als je naar beneden scrollt is er ook geen vierkantje meer dat je automatisch terug naar boven brengt.
Als ik de jquery library's die ik inlaad van volgorde verander dan werkt ofwel de "de achtergrond kiezer", ofwel het vierkantje en de links, maar er is geen enkele volgorde waarbij dit allemaal werkt.

Aangezien m'n jquery kennis nihil is kom ik er dus zelf niet uit.
Dit zijn de library's die alles mogelijk zouden moeten maken, maar op een of andere manier gaan ze in conflict met elkaar:
[JS]<!-- Javascript library's -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="http://assets.tumblr.com/javascript/prototype.js"></script>
<script type="text/javascript" src="http://assets.tumblr.com/javascript/effects.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>

[/JS]

Waarschijnlijk kan je het met veel minder library's dezelfde dingen voor elkaar krijgen, maar aangezien ik dit allemaal via tutorials en copy paste heb heb ik dus zo goed als geen idee wat ik juist doe... Bij html en css gaat dit nog, maar javascript en jquery is echt trail en error werk voor mij.
Ik heb dus geen idee hoe ik hier aan moet beginnen. Ik ben al een keer een topic gestart rond conflicterende javascripts, en toen was het makkelijk opgelost, en ben er ook al achtergekomen dat de volgorde van inladen belangrijk is, maar in welke volgorde ik ze ook plaats... Het maakt geen verschil, ofwel werkt het een, ofwel het andere.

Ik hoop dat iemand me hier in de goede weg kan wijzen?

Alvast bedankt,
Jonas

 

[Tha Devil]

Regel 2 en 5 laden allebei de jQuery-library, alleen is de huidige (regel 2) versie 1.4.2. en die van Google 1.4.0.

Knippen en plakken werkt tot op zekere hoogte, maar wanneer je er vaker mee bezig gaat zou ik toch echt proberen de code te begrijpen zodat je minder conflicten zult krijgen.

Verder heeft jQuery een .noConflict()-functie welke je e.v.t. kunt gebruiken, hoewel ik eerder betere code aanraad: http://api.jquery.com/jQuery.noConflict/

 

[jonassmets]

Hey Tha Devil,

Bedankt voor je reactie, het probleem is dat als ik een van de twee weglaat er iets niet meer werkt. Het zal wel zo zijn dat het om hetzelfde gaat, maar blijkbaar staat er in de ene library iets wat in de andere niet staat en omgekeerd.
Natuurlijk zou ik beter javascript en jquery leren schrijven, maar buiten dit blog, dat dienst doet als hobby, ben ik niet van plan om nog meer met webdesign te gaan doen. Dus dan is het van nul terug beginnen een behoorlijke opgave.
Ik zou dit nu graag allemaal werkend krijgen, en dan houd het code schrijven enz op. En kan ik me gewoon op het bloggen concentreren.

De noConflict functie ken ik, maar ik snap niet goed hoe ik ze moet gebruiken als het over inladen van librarys gaat.
[JS]<script type="text/javascript">
$.noConflict();
<script type="text/javascript" src="http://assets.tumblr.com/javascript/prototype.js"></script>
<script type="text/javascript" src="http://assets.tumblr.com/javascript/effects.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
</script>[/JS]
Ik kan moeilijk de library's zelf in het noConflict stukje zetten lijkt me?

Jonas

 

[jonassmets]

Oke heb eindelijk de oplossing gevonden.. Zoals gewoonlijk was deze gemakkelijk.
Moest idd de noConflict gebruiken maar had iets over het hoofd gezien.

Bedankt voor je hulp.

jonas