[jQuery] Powiększanie zdjęć za pomocą jQuery

[jQuery] Powiększanie zdjęć z użyciem jQuery - by Piotr Nalepa

jQuery Opublikowano: 16/07/2010

O autorze

Jestem webmasterem/webdeveloperem
z pasji. Lubię to co robię i chcę dzielić się wiedzą z innymi osobami.
Specjalizuję się w technologiach związanymi z CSS, JS, PHP.

W dzisiejszym krótkim artykule omówię sposób na efektowne powiększanie zdjęć z użyciem bibliotek jQuery oraz pluginu cloud-zoom.
Dzięki temu pluginowi możliwe jest tworzenie efektownych galerii z możliwością powiększenia obrazka w sposób dynamiczny, zaraz po najechaniu kursorem na obrazek.

Na początek stworzymy prosty kod HTML, w którym umieścimy link do obrazka i obrazek oraz nadamy im odpowiednie atrybuty:

<a href="./img/bimg.jpg" class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4">
	<img src="./img/img.jpg" alt="" title="Powiększone foto" />
</a>

Należy pamiętać, aby dodac do kodu bibliotekę jQuery, bo bez tego efekt nie zadziała.
Kolejnym krokiem jest instalacja pluginu, który można pobrać z linka zamieszczonego wcześniej.
Z pobranej paczki musimy w sekcji <head> zamieścić odnośnik do arkusza stylów o nazwie cloud-zoom.css oraz do pliku z pluginem cloud-zoom.1.0.2.min.js.
To będzie wszystko co będzie potrzebne do wykonania tego efektu.
Demo z tego artykułu możesz zobaczyć tutaj: powiększanie zdjęć z użyciem jQuery.
Możesz też pobrać paczkę z demem.

2 komentarze/y

lolek.exe;
16/07/2010 o 15:59
Fajny plugin, tym bardziej, że go nie znałem Można go wykorzystać również do dużych grafik, dzieląc okno na dwie części, w jednej zmniejszona grafika, która normalnie nie mieściłaby się na monitorze, a w drugiej powiększenie.
Pawlox
30/08/2010 o 11:57
Hmm, zastanawiam się czy to powiększone foto musi znajdować się w linku? Fajnie byłoby, gdyby można było umieścić je np. w wyskakującym tooltipie po najechaniu na zdjęcie właściwe…