-
data publikacji: 15.09.2009
“Szybki podgląd” za pomocą jQuery
kategoria: Skrypty client-side autor: agressiva
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 sekcjiheadkodu wywołującego tą bibliotekę.<script src="jquery.js" type="text/javascript"></script>
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.<script src="preview_img.js" type="text/javascript"></script>
<script src="preview_text.js" type="text/javascript"></script>
<script src="preview.js" type="text/javascript"></script>
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
previewdla znacznikaaoraz dodaniu w kodzie CSS odpowiednich dla tej klasy wartości:#preview{
position:absolute;
border:1px solid #ffffff;
background:#d0d0d1;
padding:7px;
display:none;
color:#626262;
font-size:12px;
font-weight:bold;
}
Szczególnie ważnymi pozycjami są
position:absolute;orazdisplay: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:<a href="1.jpg" class="preview" title="Duża wersja zdjęcia"><img src="1m.jpg" alt="gallery thumbnail" /></a>
Znaczniki
aposiadają 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 wtitle.#preview{
position:absolute;
border:1px solid #ffffff;
background:#d0d0d1;
padding:7px;
display:none;
color:#626262;
font-size:12px;
font-weight:bold;
}
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
titlelub też nie.
Kod html:<p>Jeżeli chcesz zobaczyć podgląd zdjęcia najedź na <a href="http://vivee.info" class="screenshot" rel="1.jpg" title="Podgląd zdjęcia">ten link</a></p>
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 dlaa.
Podobnie jak wcześniej należy pamiętać o dodaniu odpowiedniej klasy dla znacznikaa, tym razem nazywa się onascreenshot.
CSS dla tej klasy:#screenshot{
position:absolute;
border:1px solid #ffffff;
background:#d0d0d1;
padding:7px;
display:none;
color:#626262;
font-size:12px;
font-weight:bold;
}
Wszystkie pozycje w CSSie są dowolne do przypisania, najważniejsze jak zawsze jest pozycja
position:absolute;idisplay: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:
<p>Wróć do serwisu <a href="http://vivee.info" class="tooltip" title="blog o webmasteringu, grafice i fotografii">Vivee.info</a></p>
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;idisplay:none;.#screenshot{
position:absolute;
font:11px "Trebuchet MS", Arial, Helvetica, sans-serif!important;
padding:8px;
border:1px solid #d0d0d1;
background:#ffffff;
color:#333;
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.
-
Zobacz podobne wpisy:
- None Found
-
15 Responses to ““Szybki podgląd” za pomocą jQuery”
Leave a Reply
Komentarze
Kategorie
Top 10
hotelpalermo: Jak poprawnie osadzić Flasha w kodzie (X)HTML strony?
Michał: jQuery Cycle
Windscreen: Inspirujące strony www: wrzesień 2010
EMAAR MGF GURGAON: Query_posts, czyli jak ujarzmić loopa część 1.
Tomek: Cforms, czyli zaawansowane formularze w Wordpressie
Wypadek: FeedWordPress – czyli jak agregować RSSy
medicine forum: Query_posts, czyli jak ujarzmić loopa część 1.
get rid of inc: Query_posts, czyli jak ujarzmić loopa część 1.
pikolo: Skórka z własnym panelem administracyjnym
buy ritalin online: Query_posts, czyli jak ujarzmić loopa część 1.
- CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
- Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
- Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
- Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
- Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
- Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
- Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
- Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
- Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
- Skrypty client-side
- Skrypty server-side
- Tutoriale
- Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
- Wieczór z Open Source
- Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
- Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
- XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.
Najnowsze newsy
Wieczór z Open Source 2010
Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej
Grafart.org i WACOM zapraszają na konkursy!
Witam!
Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej
Zapraszamy na forum graficzne Graffika.pl
Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej
Polecane strony
- No bookmarks avaliable.
bardzo fajny patent. Dzięki za artykuł
Bardzo fajny tutorial. Na pewno się przyda. Moglibyście też zrobić tutek np. o jQuery Tabs.
Chodzi Ci o coś takiego
http://stilbuero.de/jquery/tabs/ ?
Tak, dokładnie o to.
podobne do
http://www.dhtmlgoodies.com/index.html?whichScript=ajax-tooltip
Nie bardzo, oby dwa działają na innej zasadzie, na innych skryptach.
A tak btw. skryptów tooltip jest baaardzo duży wybór.
kochani, jak można ( i czy w ogóle) spowodowac, by wykorzystać mape obrazka (moze byc tłem) do tego, by po najechaniu na odpowiedni jego fragment pojawił się obrazek. Mapa zawiera ok 20 takich miejsc i każdego z nich przypisany obrazek jest inny
Witam , fajne info , jednakże mam pewien problem .. chciałbym żeby okienko z podglądem wyświetlało mi się po lewej stronie a nie po prawej ,próbowałem manipulować w samym skrypcie ale niestety nie zadowalają mnie efekty, zdjęcie albo wyświetla się po lewej ale przy samej krawędzi monitora, albo w ogole go nie widać… Jakby ktoś osiągnął efekt taki jak oryginały ale żeby zdjęcie było po lewej będę wdzięczny za informacje.
Mam taki problem, że okienko z podglądem tekstu wyświetla mi się pod grafiką i tekstem, widzę je dopiero na zwykłym backgroundzie. Czy ktoś potrafi mi pomóc?
Prawdopodobnie gdzieś na stronie użyłaś też jakiegoś position. Spróbuj do #preview dopisać z-index:99;
Hello, sorry for being off but what theme are you using? or did you make it yourself? I really love the theme you are using.
Witam, ciekawy efekt, lecz moje pytanie dotyczy tego, jak można w tak ładny sposób uzyskać podgląd strony. Czyli po najechaniu na link prowadzący np. do Google, chciałbym aby ukazała się w okienku dymku ich strona. Podgląd strony zamiast obrazka, można to jakoś wykonać?
Zrób zrzut strony i do niego poprowadź.
ciekawa sprawa
Witam!
Czy zna ktoś sposób aby już po kliknięciu w miniaturkę otwierała się np. inna strona w popupie?
Próbowałem to zrobić i popup ładnie się otwiera:
<img src="1m.jpg" alt="gallery thumbnail" onclick="popup(''www.stona.pl')"/>
, lecz nie mogłem powstrzymać strony źródłowej od przeładowania [pokazuje się obraz 1.jpg]
Będę wdzięczny za podpowiedź.