Artykuły:

Reklama na blogach - Blogvertising.pl
  • data publikacji: 15.09.2009

    “Szybki podgląd” za pomocą jQuery

    kategoria: Skrypty client-side autor: agressiva

    “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).

    demo pobierz

    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ę.

    <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")

    Szybki podgląd za pomocą jQuery

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

    <a href="1.jpg" class="preview">
    <img src="1m.jpg" alt="gallery thumbnail" /></a>
     

    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:

    #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; oraz display:none; o których nie można zapomnieć.

    Galeria (obrazki z opisem "title")

    Szybki podgląd za pomocą jQuery

    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 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.

    #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.

    Szybki podgląd za pomocą jQuery

    Według własnych potrzeb można wstawić dla obrazka tytuł w title lub 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 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:

    #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; 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

    Szybki podgląd za pomocą jQuery

    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; i display: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. :)

    Udostępnij ten artykuł:
    • Print
    • Digg
    • del.icio.us
    • Facebook
    • Mixx
    • Google Bookmarks
    • Gwar
    • RSS
    • Technorati
    • Twitter
    • Wykop
  • This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

    10 Responses to ““Szybki podgląd” za pomocą jQuery”

    1. Szymon mówi:

      bardzo fajny patent. Dzięki za artykuł :)

    2. Kamcio mówi:

      Bardzo fajny tutorial. Na pewno się przyda. Moglibyście też zrobić tutek np. o jQuery Tabs.

    3. janusz mówi:

      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

    4. Piotr mówi:

      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.

    5. Marta mówi:

      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?

    Leave a Reply

Komentarze

Kategorie

Top 10

  • 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.
  • 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

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

Przypominamy o Konkursie Noworocznym

Wraz z nowym, 2010 rokiem ogłosiliśmy konkurs na tutorial o tematyce CMS-owej.
Mamy nadzieję, że jakieś prace zostaną nadesłane do końca terminu i znajdzie się zwycięzca w pierwszym naszym oficjalnym konkursie z nagrodami.
Zachęcamy wszystkich do spróbowania swoich sił.

Szczegóły dostępne są pod tym adresem: http://vivee.info/2010/01/01/konkurs-noworoczny/

Zareklamuj nas :)

Jako, że pojawiła się na vivee.info nowa skóra przygotowałam nasze firmowe banerki reklamowe. Osoby, które wyrażą chęć wsparcia nas reklamą u siebie na blogach lub innych serwisach mogą pobrać je poniżej. Czytaj dalej