nagradzam tutoriale

  • Pojawiająca się podpowiedź

    dodano 03.06.2008 / komentarzy: 8 / autor: palmiak

    pokazująca się poradaZdarza się czasem, że chcieli byśmy pomóc userowi, doradzając co powinien zrobić. Możemy do tego użyć wielu subtelnych metod lub centralnie na środku obrazka wyświetlić mu napis “POWIĘKSZ”, “PRZECZYTAJ TO” etc. W tym tutorialu pokażę właśnie tą mało subtelną wersję.

    Obrazek

    Nim weźmiemy się do pracy najpierw musimy przygotować sobie obrazek z odpowiednim napisem. Ja użyłem gifa z napisem “POWIĘKSZ”. Dlatego gifa, że nie potrzebowałem półprzezroczystości oraz nie trzeba się męczyć z ie6. Oczywiście nic nie stoi na przeszkodzie, żeby zamiast obrazka użyć tekstu, jpga, pnga czy czego tam sobie życzymy.

    My użyjemy:

    powiększ

    xhtml

    Sam link z obrazkiem wyglądać będzie następująco:

    <a href="nazwa_obrazka.jpg" class="zoom"><img src="nazwa_miniaturki.jpg" alt="opis miniaturki" /></a>
     

    Nic więcej nie potrzebujemy, bo resztą zajmie się jQuery.

    css

    Nasz styl też nie będzie zbyt imponujący:

    a.zoom {
            position:relative;
            display:block;
            width:0;
    }

    .zoombutton {
            background:url(zoom.gif) no-repeat;
            width:150px;
            height:50px;
            position:absolute;
            }

    a.zoom musi mieć position:relative żeby div z position:absolute, znajdujący się w środku wiedział wobec czego ma się odnosić.

    Width:0 musi być, żeby link nie zajmował całej szerokości ekranu. Mimo, że 0 jest wartością mniejszą niż szerokość obrazka (dość oczywiste, czyż nie?) to a automatycznie się dopasuje. Szczerze mówiąc jest to dla mnie drobną zagadką dlaczego tak jest, ale ważne, ze działa.

    jQuery

    jQuery będzie miało do zrobienia kilka rzeczy

    • dodać diva w którym będzie wyświetlany tekst/obrazek
    • umieszczać tego diva na samym środku obrazka
    • pokazywać i ukrywać diva w zależności od tego czy najechaliśmy na linka

    W całości wygląda to tak:

    $(document).ready(function(){
           
        $("a.zoom").prepend("<div class=\"zoombutton\"></div>");
           
            $("a.zoom").children(".zoombutton").hide();
           
            $("a.zoom").hover(
          function () {     
                    $(this).children(".zoombutton").fadeIn("slow"); 
          },
          function () {
             $(this).children(".zoombutton").fadeOut("slow");
          }
        );
      });

    function center() {
            $(".zoom img").each(function(){
                            var wys;
                            var szer;
                   
                            wys = $(this).height();
                            wys = (wys / 2) - 25;
                   
                            szer = $(this).width();
                            szer = (szer / 2) - 75;
                   
                            $(this).parent().children(".zoombutton").css({ top:wys, left:szer });
           
                    });
    }

    $("a.zoom").prepend("<div class=\"zoombutton\"></div>"); odpowiada za wstawienie diva z obrazkiem “POKAŻ”. Zostaje on wstawiony w każdy <a href="" class="zoom">.

    Następnie za pomocą $("a.zoom").children(".zoombutton").hide(); ukrywamy napis.

    Dzięki $("a.zoom").hover( ustawiamy co ma się dziać po najeździe na link. W naszym przypadku ma się pokazać nasz napis.

    Pozostaje nam jeszcze funkcja o nazwie center. Dzięki niej napis “POKAŻ” zostaje dokładnie wycentrowany. Najpierw patrzymy jakie wymiary ma obrazek, a następnie dzielimy przez 2 oraz odejmujemy połowę wysokości lub szerokości diva zoombutton.

    Łączymy to do kupy

    Całość powinna się składać z:

    • index.html - czy innego pliku w którym planujesz umieścić ten skrypt
    • style.css - czyli pliku ze stylem
    • jQuery.js - czyli pliku pobranego z ze strony jQuery.com
    • zoom.js - pliku w którym znajduje się skrypt odpowiadający za nasz bajerek

    Cały komplet możecie pobrać klikając tutaj. Tam też możecie spojrzeć w kod źródłowy.

    Podsumowanie

    I tym oto sposobem uzyskaliście dość przyjemny bajerek, który może pomóc niezorientowanemu userowi.

    Aby zobaczyć jak to działa wejdźcie na palmiak.dot.pl/vivee_pliki/zoom/

    Komentarze / dodaj komentarz


    • autor: Burger
      dodano: 03.06.2008

      No wreszcie ruszyliście :D
      A tutek świetny, mozliwe że sie przyda :)


    • autor: agressiva
      dodano: 12.06.2008

      No pewnie, że ruszyliśmy :)

      A Maciek zawsze jakiś bajerek wymyśli :)


    • autor: ernie
      dodano: 16.06.2008

      Dobry tutorial i użyteczny

      Pozdro


    • autor: Burger
      dodano: 23.06.2008

      http://burger.pdg.pl/index.php?site=arts&act=czyde

      mój rezultat :)


    • autor: palmiak
      dodano: 23.06.2008

      Burger, a zerknąłeś jak to pod ie6 wygląda?

      Poza tym bardzo fajnie ten cień na brzegach wyszedł.


    • autor: Gnacio
      dodano: 18.07.2008

      Tut fajny :)
      Ale ja chce zrobic aby 3 obrazki w jednej linijce. A one sie robia jeden pod drugim, co wyglada brzydko :P Idzie zrobic aby w jednej lini byly 3 obrazki?


    • autor: palmiak
      dodano: 18.07.2008

      Wystarczy a dodać float:left i prawdopodobnie zadziała.


    • autor: Gnacio
      dodano: 18.07.2008

      No nie pomyslalem o tym :P Myslalem, ze bedzie trzeba zmianiac cos w jquery.js, no, ale naszczescie nie :D
      Dzieki ;)

    Napisz komentarz