[jQuery] Powiększanie zdjęć za pomocą jQuery
Ten wpis ma 16 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
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" />
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.
O autorze
