“Szybki podgląd” za pomocą jQuery

Jak już nie raz zdążyliśmy się przekonać JavaScript daje nam ogromne możliwości jeżeli chodzi o poszerzenie funkcjonalności naszych stron www oraz innych narzędzi webowych.
Tym razem chcę Wam pokazać w jaki sposób zastosować bardzo przydatny plugin do szybkich podglądów obrazków oraz opisów w tekście (a także połączenie jednego z drugim).

Na sam początek

Podstawową czynnością jeżeli chodzi o wykorzystywanie skryptów opartych o jQuery jest pobranie samej biblioteki.
A następnie wklejenie do sekcji head kodu wywołującego tą bibliotekę.

Dla każdej funkcjonalności z osobna przygotowaliśmy pliki JS o indywidualnych nazwach, w tym celu aby nie myliły się nikomu z ich przeznaczeniem.
preview_img.js – podgląd dla samych obrazków,
preview_text.js – podgląd dla samego tekstu,
preview.js – podgląd dla obrazków na linkach w treści.

Podgląd zastosowany na obrazkach

Galeria (obrazki bez opisu “title”)

W naszym przykładzie kod html wygląda następująco:

W tym przypadku kiedy chcemy aby podgląd większego zdjęcia był na miniaturce należy koniecznie pamiętać o dodaniu klasy preview dla znacznika a oraz dodaniu w kodzie CSS odpowiednich dla tej klasy wartości:

Szczególnie ważnymi pozycjami są position:absolute; oraz display:none; o których nie można zapomnieć.

Galeria (obrazki z opisem “title”)

Na tym przykładzie kod html odrobinę się różni od tego powyżej, pojawił się tutaj opis dużego zdjęcia w title, który podczas wyświetlenia podglądu będzie umieszczony pod obrazkiem:

Znaczniki a posiadają tutaj tą samą klasę co wyżej także, kod CSS wygląda identycznie. Przypisane zostały wartości dla koloru czcionki oraz jej wielkości i są one teraz dziedziczone przez tekst wyświetlany w title.

Podgląd obrazka zastosowany w tekście

Dla tych osób, którym zależy na zaoszczędzeniu miejsca na stronie istnieje także możliwość podpięcia podglądu obrazka na standardowym linku w treści.

Według własnych potrzeb można wstawić dla obrazka tytuł w title lub też nie.
Kod html:

W tym przypadku obrazek, który ma się pojawić po najechaniu na link jest przekazywany za pomocą rel, co jest dość istotne, bo daje nam to możliwość przypisania standardowego linka dla a.
Podobnie jak wcześniej należy pamiętać o dodaniu odpowiedniej klasy dla znacznika a, tym razem nazywa się ona screenshot.
CSS dla tej klasy:

Wszystkie pozycje w CSSie są dowolne do przypisania, najważniejsze jak zawsze jest pozycja position:absolute; i display:none; których nie można pominąć.

Podgląd opisu linka zastosowany w tekście

W tym przypadku po najeździe na link pojawi się jego opis zamieszczony w atrybucie title

Kod html:

Tutaj pojawia się kolejna ważna klasa dla znacznika a – tooltip
Tak samo jak we wcześniejszych przypadkach w kodzie CSS należy zamieścić position:absolute; i display:none;.

Wersje Demo do wszystkich prezentowanych podglądów dostępne są na tej stronie.

Mamy nadzieję, że narzędzie to okaże się dla wielu osób przydatne.

Artykuł napisany dla serwisu Vivee.info