chevron-left chevron-right

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

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:

 
	<img src="./img/img.jpg" alt="" title="Powiększone foto" />
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.

  • 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

    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…