Efekt obrazka przed i po za pomocą jQuery

Efekt obrazka przed i po za pomocą jQuery

Opublikowano 17.06.2011 4:00 - 2


Dziś przed wami narzędzie z ogromnym potencjałem. Cóż takiego ono robi, że znalazło się w serwisie? Skrypt przygotowany przez catchmyfame.com przygotował narzędzie za pomocą którego dynamicznie będziemy mogli obejrzeć zdjęcie ‘przed i po’ zmianami. Całość operacji opiera się gdy przesuniemy suwak dostępny na środku zdjęcia.

Do jego stworzenia została wykorzystana biblioteka jQuery. Zapraszam do zapoznania się z wersją demonstracyjną i/lub z opisem jak uruchomić skrypt na swojej stronie internetowej.

Demo

Przejdź do przykładów użycia skryptu

Jak używać skryptu

1. Przede wszystkim będziemy potrzebować dwóch obrazków o identycznych rozmiarach, w innym wypadku niektóre przeglądarki mogą źle zinterpretować kod co spowoduje, że skrypt nie będzie działał poprawnie. Następnie musimy wkleić gotowy kod w treści strony

[html]<div id="container">
<div><img alt="before" src="before.jpg" width="600" height="366" /></div>
<div><img alt="after" src="after.jpg" width="600" height="366" /></div>
</div>[/html]

2. Teraz należy podpiąć bibliotekę jQuery i jQueryUI. Można je pobrać na dysk lokalny lub skorzystać z linka udostępnionego przez Google – jak w poniższym kodzie. Całość wklejamy w w sekcji HEAD.

[html]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter-1.3.js"></script>
<script type="text/javascript">
$(function(){
$(‘#container’).beforeAfter();
});
</script>[/html]

3. To wszystko. Oczywiście należy dodatkowo pobrać bibliotekę jquery.beforeafter.js – do pobrania tutaj (udostępniam wersje spolszczoną). W paczce znajdują się niezbędne biblioteki a także 3 grafiki suwaka.

Dodatkowe informacje

Pamiętajcie, że skrypt zakłada że wszelkie obrazki znajdują się w jednym katalogu. Ustawiony domyślny folder to “js/”. Jeżeli będziecie chcieli go zmienić należy wy-edytować plik jquery.beforeafter-1.3.js – parametr imagePath. Oprócz tego możemy zmienić szybkość ładowania suwaka (introDelay) czy np. podpis pod obrazkiem (showFullLinks)

[js]

animateIntro : false,
introDelay : 1000,
introDuration : 1000,
introPosition : .5,
showFullLinks : true,
beforeLinkText: ‘Pokaż Przed’,
afterLinkText: ‘Pokaż Po’,
imagePath : ‘./pliki/’,
cursor: ‘pointer’,
clickSpeed: 600,
linkDisplaySpeed: 200,
dividerColor: ‘#888’,
onReady: function(){} [/js]

Mam nadzieje, że ktoś znajdzie użytek z tak ciekawego skryptu.

Wieści z Rozładowani.pl