nagradzam tutoriale

  • Pozioma galeria

    dodano 20.09.2007 / komentarzy: 1 / autor: palmiak

    Pewnym małym trendzikiem stało się robienie galerii zdjęć w postaci poziomej strony. Dzisiaj chciałbym Wam pokazać jak taką stronę zrobić.

    Idea

    Nasza strona będzie się składać z zagnieżdżonych list nieuporządkowanych. Na “górze” będziemy mieć nazwy kategorii, a jako ich dzieci poszczególne zdjęcia.

    Dobrze będzie, jeśli przed stworzeniem swojej galerii doprowadzicie miniaturki do takiego stanu, żeby wszystkie miały tą samą wysokość.

    Kod

    Tak jak mówiłem, będziemy bazować na listach nieuporządkowanych. Kod będzie wyglądał następująco:

    <ul>
            <li class="kategoria"><a href="#"><img src="img/kategoria.png" alt="" /></a><ul>
                    <li><img src="img/3.jpg" alt="" /></li>
                    <li><img src="img/2.jpg" alt="" /></li>
                    <li><img src="img/1.jpg" alt="" /></li>
            </ul></li>

            <li class="kategoria"><a href="#"><img src="img/kategoria.png" alt="" /></a><ul>
                    <li><img src="img/1.jpg" alt="" /></li>
                    <li><img src="img/3.jpg" alt="" /></li>
                    <li><img src="img/3.jpg" alt="" /></li>
            </ul></li>

            <li class="kategoria"><a href="#"><img src="img/kategoria.png" alt="" /></a><ul>
                    <li><img src="img/1.jpg" alt="" /></li>
                    <li><img src="img/3.jpg" alt="" /></li>
            </ul></li>

            <li class="kategoria"><a href="#"><img src="img/kategoria.png" alt="" /></a><ul>
                    <li><img src="img/1.jpg" alt="" /></li>
                    <li><img src="img/3.jpg" alt="" /></li>
            </ul></li>

    </ul>

    Jako, ze to tylko przykład to sobie darował wypełnienie altów, aczkolwiek mam nadzieję, że Wy to zrobicie.

    CSS

    Teraz zaczynamy dopiero prawdziwą zabawę. Naszym zadaniem będzie pozbyć się najpierw kropek, następnie ułożyć to w poziomie, a na końcu zrobić tak, żeby się nie zawijało. No to zaczynamy.

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

    Dzięki temu resetujemy marginesy i nie musimy się martwić o niezgodność wartość defaultowych IE, FF oraz Opery. Dodatkowo pozbywamy się ramek wokół obrazków. Teraz czas na kropki:

    ul {
            list-style-type:none;
            }
     

    Zobacz przykład

    Jeśli do stylu dopiszemy kolejne linijki uzyskamy okład poziomy:

    ul {
            list-style-type:none;
            display:inline;
            }

    ul ul {
            display:inline;
            }

    li {
            display: inline;
            }

    Zobacz przykład

    Strona ciągle się jednak nie zawija. Radzimy sobie z tym za pomocą:

    ul {
            list-style-type:none;
            display:inline;
            white-space: nowrap;
            }

    ul ul {
            display:inline;
            }

    li {
            display: inline;
            white-space: nowrap;
            }
     

    Zobacz przykład

    Mamy już solidną bazę. Czas nadać temu jakiś wygląd. Zacznijmy od tła:

    body {
            background:black url(img/grad.jpg) repeat-x 30% 0;
            }

    Zobacz przykład

    Na poprzednim przykładzie możemy doskonale dostrzec, że byłem leniwy i nie przygotowałem miniaturek o tej samej wysokości. Można to na szczęście naprawić w CSS:

    li li img {
            height:200px;
            }
    .kategoria li img {
            width:auto;
            }

    .kategoria img{
            width:50px;
            height:200px;
            }

    Zobacz przykład
    .kategoria img Jest specjalnie dla IE. Jeśli tego nie będzie IE zacznie dość dziwnie rozciągać obrazki od kategorii.

    Przesuńmy teraz nasze zdjęcie w dół:

    ul {
            list-style-type:none;
            display:inline;
            white-space: nowrap;
            position:absolute;
            top:30%;
            }

    ul ul {
            position:static;
            display:inline;
            top:0;
            }
     

    Zobacz przykład
    Teraz aż się prosi, żeby na górze strony pojawiło się jakieś logo. w XHTML dopiszmy

    <div id="head"><img src="img/logo.png" alt="logo" /></div>

    a za pomocą stylu odklejmy troszkę od brzegu oraz sprawmy, ze logo będzie w tym samym miejscu (poza IE, gdzie to niestety nie działa)

    #head {
            position:fixed;
            top:5px;
            left:15px;
            }

    #head img {
            height:150px;
            width:300px;
            }
     

    Zobacz przykład

    Wysokość i szerokość obrazka w #head ustalamy, bo IE nam ogłosi bunt, jeśli spróbujemy go zmusić do współpracy z PNG. A a’propos przymuszania IE do PNG to pobieramy pliczek oraz obrazek. Następnie tworzymy nowy plik ze stylem i piszemy w nim:

    img {
            behavior: url(iepngfix.htc);
            }
     

    Następnie wklejamy do kodu naszej galerii:
    <!–[if IE lt 7]><link rel=stylesheet” type=”text/css” href=”ie.css” /><![endif]–>

    Teraz w IE nie będzie problemów z przezroczystością w PNG.

    Bajer z jQuery

    Za pomocą jQuery zrobimy jeszcze trik. Zamiast pokazywać wszystkie foty naraz pokaże nam tylko fotki z jednej kategorii, a pozostałe będą schowane. Po wybraniu innej kategorii tamte się pokażą, a wszystkie pozostałe się pochowają.

    Pierwszym naszym krokiem będzie pobranie jQuery. Następnie tworzymy plik menu.js a w nim piszemy:

     $(document).ready(function() {
            $("ul ul:not(:first)").hide();
            $("li.kategoria a").click(function(){
                            $("ul ul:visible").hide();
                            $(this).next(‘ul’).fadeIn();
                            return false;
            });
     });
     });

    Funkcja ukrywa wszystkie ul - dzieci poza pierwszym. Następnie po kliknięciu na obrazek ukrywa widocznego ul - dziecko i odkrywa dziecko rodzica w którego kliknęliśmy.

    Umieszczamy jeszcze na stronie w sekcji <head>:

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>
     

    Zobacz ostateczną wersję

    I to wszystko. Zachęcam wszystkich do prób. Jeśli macie jakiś problemy nie bójcie się pytać na naszym forum.

    Komentarze / dodaj komentarz


    • autor: Fajny
      dodano: 02.10.2008

      fajne ten skrypt, mam pytanie jak zrobić żeby umieścić jeszcze linki , coś jak kategorie wybieram kategorie zdjęć góry i ładuje mi sie na stronie ta galeryjka, potem wybieram kategorie lasy i to samo….

      Z góry Dzięki za pomoc,
      Pozdrawiam

    Napisz komentarz