nagradzam tutoriale

  • Galeria z powiększanymi miniaturami

    dodano 28.12.2007 / komentarzy: 4 / autor: shdw

    Szukając pomysłu na ciekawą galerie, która nie wykorzystywały by żadnego z gotowych skryptów, a zarazem by była łatwa do stworzenia. Wpadłem na dosyć ciekawy pomysł.

    Galeria składa się z miniatur które po najechaniu na nie kursorem powiększają się do nadanego im rozmiaru, małym dodatkiem jest jeszcze użycie fadeIn, dzięki czemu wygląda ona jeszcze lepiej.

    XHTML i CSS

    <ul>
    <li class="pierwszy"></li>
    <li class="drugi"></li>
    <li class="trzeci"></li>
    <li class="czwarty"></li>
    <li class="piaty"></li>
    </ul>

    A tak wygląda CSS

    * {
    padding:0;
    margin:0;
    border:0;
    }

    body {
    background:black;
    }

    ul {
    list-style:none;

    }

    li {
    width:100px;
    height:100px;
    border:2px white solid;
    background:white 50% 50%;
    float:left;
    margin:5px;
    position:relative;
    }

    .pierwszy, .drugi, .trzeci, .czwarty, .piaty {
    background-image:url(baby.jpg);
    }

    .big {
    height: 250px;
    width: 250px;
    }

    Tworzymy listę uporządkowaną w której zamieszczamy nasze obrazki poprzez nadanie <li> odpowiedniego tła w CSS.

    Oczywiście wszystko możemy dowolnie modyfikować, wielkość obrazków, powiększenia itp.

    Klasa big opisuje wielkość obrazka po najechaniu na niego kursorem.

    jQuery

    $(document).ready(function() {
    $("li").fadeTo("slow", .5);
    $("li").hover(function(){
    $(this).addClass("big").fadeTo("fast", 1);
    },function(){
    $(this).removeClass("big").fadeTo("fast", .5);
    });
    });

    Efekt końcowy do wglądu tutaj

    Komentarze / dodaj komentarz


    • autor: Galeria z powiększanymi miniaturami | Tworzenie stron www. Projektowanie
      dodano: 30.12.2007

      [...] Szukając pomysłu na ciekawą galerie, która nie wykorzystywały by żadnego z gotowych skryptów, a zarazem by była łatwa do stworzenia. Wpadłem na dosyć ciekawy pomysł. (more…) [...]


    • autor: lumberpack
      dodano: 24.06.2008

      link nie działa


    • autor: palmiak
      dodano: 24.06.2008

      Już działa. Dzięki za zauważenie.


    • autor: r3ni
      dodano: 17.07.2008

      nie podoba mi sie to ze przechodzi z 1 zdjecia na 3 a tak to niezle.:)

    Napisz komentarz