ImageZoom – fajny sposób prezentacji zdjęć

Ostatnio internet przysłał do nas link do strony, na której znajdowała się oferta (jedna z tych nie do odmówienia) skryptu powiększającego pewne miejsce na obrazku – i wszystko to dla jednorazowego wykorzystania za jedyne 25 funtów! ( http://www.magictoolbox.com/magiczoom) Jako, że nie miałem drobnych w kieszeni a potrzebowałem podobnego efektu, zamknąłem przeglądarkę i odbyłem niesamowitą przygodę po ciemnej stronie kodu – JavaScript z MooTools. Efektem tego był taki kod ImageZoom.js.

Do odpowiedniego działania potrzebowałem jeszcze jakiegoś stylu:

div.ImageZoom{
position: absolute;
left: 0px;
top: 0px;
display: none;
border: 2px solid black;
width: 150px;
height: 150px;
background: #fff;
background-repeat: no-repeat;
}

div.ImageTagHelper, div.ImageTagHelper img{
display: none;
position: absolute;
left: 0px;
top: 0px;
}

Teraz już tylko wystarczyło wstawić odpowiednie obrazki:

<a class="ImageZoom" href="ścieżka_do_dużego_obrazka.jpg" rel="lightbox[41]" title="ImageZoom - fajny sposób prezentacji zdjęć">
<img src="ścieżka_do_małego_obrazka.jpg" />
</a>

A na samym dole strony pozostało mi dopisać:

<script type="text/javascript">
window.addEvent('domready', function(){
new ImageZoom;
});
</script>

Po upływie niecałych dwóch godzinek otworzyłem tę stronę w różnych przeglądarkach i okazało się, że po najechaniu kursorem na obrazek, zaraz pod wskaźnikiem myszy pojawił się mały kwadracik, z dokładnym powiększeniem tego miejsca, na które wskazywałem! Ku mojemu zdziwieniu jak poruszałem odpowiednio myszką to zoom zaczął podążać za moim kursorem! I do tego działał zawsze tak samo bez względu na rozmiar obu obrazków! Jakie to szczęście, że nie miałem dzisiaj ze sobą drobnych, za które będę mógł sobie kupić na przykład dodatkową kość RAMu albo 60 świerzych pączków z piekarni..

Przykład
UWAGA: Do poprawnego działania niezbędna jest bibioteka MooTools!