Przesuwający obrazek w tle

Coraz więcej stron, szczególnie opartych o wordpress posiada motyw przesuwającego się w tle obrazka pod jakimś elementem witryny. Efekt taki jest bardzo prosto osiągalny. Wystarczy dla np. div utworzyć odpowiednią klasę z przykładowym ostylowaniem:

padding-top: 20px;
padding-bottom: 20px;
background-image: url(adres_obrazka);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;

JQuery vs Prototype – konflikt

Kiedy chcesz na swojej stronie jednocześnie użyć JQuery oraz Prototype (np. Lightbox) spotyka Cię niemiła niespodzianka.

Biblioteki te “gryzą” się ze sobą. Przy załączeniu do kodu obydwu, działała będzie tylko jedna z nich.

Problemem jest używanie przez obydwie biblioteki $ jako nazwy funkcji.

Rozwiązanie problemu jest bardzo proste.

1. Includujemy najpierw Prototype

<script type="text/javascript" src="prototype.js"></script>

2. Includujemy JQuery

<script type="text/javascript" src="jquery.js"></script>

3. Załączmy plik z biblioteką JQuery którą chcemy użyć, w tym przypadku jest to JQuery slide

<script type="text/javascript" src="jquery.slide.js"></script>

4. Następnie edytujemy plik  jquery.slide.js. Na początku kodu dodajemy

var j = jQuery.noConflict();

5. Wszystkie funkcje $() i zmienne $ zmieniamy odpowiednio na  j() i j

W powyższym przykładzie będzie to wyglądało następująco:

$.fn.infiniteCarousel = function() {

zmieniamy na

j.fn.infiniteCarousel = function() {

Dalej

var $wrapper = $(’> div’, this).css(’overflow’, ‘hidden’),

zmieniamy na

var $wrapper = j(’> div’, this).css(’overflow’, ‘hidden’),

itd.

Po wprowadzeniu zmian we wszystkich nazwach, które powodowały konflikt, skrypty powinny działać jednocześnie bez żadnych problemów.

1. Includujemy najpierw prototype