Efekt obrazka przed i po za pomocą jQuery | DailyWeb.pl

Efekt obrazka przed i po za pomocą jQuery

Opublikowano 7 lat temu - 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

<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>

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.

<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>

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)


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(){} 

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