Witam.
Dzisiaj chciałbym wam zaprezentować mój rotator zdjęć, który sam napisałem i jestem z niego zadowolony.
Dlaczego o nim piszę, ponieważ ten rotator jest bardzo prosty w obsłudze i na dodatek można w nim przewijać i zdjęcia i DIV-y z taką zawartością jaką chcemy.
Bez żadnych ograniczeń. W prosty sposób można napisać własny kod CSS i podmienić grafikę (strzałki i kropki).
Osobiście stosuję go do wszystkich stron jakie wykonuję na moim CMS-ie.
Na początku była to wersja bez automatycznego przewijania, ale później uznałem, że niektórzy chcą by zdjęcia same się przewijały. Wtedy wykonałem drugą wersje skryptu.
Może trochę o obsłudze.
Jest ona bardzo prosta. Przykładowa budowa kodu wygląda tak:
<div id="<a class="attribute-value">Slider</a>" class="<a class="attribute-value">Demo</a>">
<div id="<a class="attribute-value">left</a>" >
<div class="<a class="attribute-value">left</a>">
<img src="imgs/left.png">
</div>
</div>
<div id="<a class="attribute-value">ItemNow</a>" tag="<a class="attribute-value">1</a>"></div>
<div id="<a class="attribute-value">center</a>">
<div id="<a class="attribute-value">content</a>">
<img src="banner/1.png" class="<a class="attribute-value">item</a>" />
<img src="banner/2.png" class="<a class="attribute-value">item</a>" />
<img src="banner/3.png" class="<a class="attribute-value">item</a>" />
</div>
</div>
<div id="<a class="attribute-value">right</a>">
<div class="<a class="attribute-value">right</a>">
<img src="imgs/right.png">
</div>
</div>
<div id="<a class="attribute-value">icon</a>"></div>
</div>Div z id o nazwie Slider, to główny div w którym jest rotator.
Z id o nazwie left, to div w którym jest obrazek po naciśnięciu, którego przewijamy zdjęcia w lewo, a div z id right w prawo.
ItemNow, to div w którym jest określone zdjęcie, które ma wyświetlać jako pierwsze.
W div-ie o id content wyświetlane są wszystkie div-y lub obrazki, które chcemy przewijać.
Każdy z div-ów lub obrazków musi posiadać klasę o nazwie item, aby zostały uznane przez skrypt jako elementy, które ma być przewijane.
A ikonki lub kropki czy co tam chcemy do przwijania obrazków, są dodawane przez skrypt w div-ie o id icon.
Gdy nie chcemy danego elementu w naszym rotatorze, to wystarczy go usunąć.
Zaraz po tym kodzie trzeba dodać skrypt jQuery.
Skrypt ten ma taką budowę.
<script>
$(document).ready(function() {
imageSlider("#Slider.Demo", true, 2);
});
</script>
<script src="slider2.js"></script>Pierwszy parametr #Slider.Demo, to div, w którym mamy swój rotator. Następny parametr, to true lub false, w zależności czy chcemy, aby nasz rotator sam przewijał treść czy nie. Ostatnim paramterem są liczby, które są sekundami określającymi co ile sekund ma się przwijąć.
DraG
