nagradzam tutoriale

  • Miniaturki z opisem

    dodano 26.11.2007 / komentarzy: 4 / autor: palmiak

    Stanąłem ostatnio przed problemem dotyczącym stworzenia galerii zdjęć. Wszystko miało być zrobione beztabelkowo oraz zawierać komentarze. Wszystko było fajnie dopóki wszystkie komentarze oraz miniaturki były tej samej wielkości.

    Wielkość obrazków

    Zamiast przeskalowywać, doszedłem do wniosku, ze lepiej będzie jeśli będziemy wycinać fragment obrazka. Dzięki temu będziemy mieć pewność, ze niezależnie od wielkość obrazka, nasza miniaturka będzie zawsze tej samej wielkości.

    Spójrzmy na przykład. Oba obrazki mają różną wielkość, ale przez to, że pokażemy tylko ich fragment miniaturki będą wyglądało jakby były takie same.

    wycięcie

    Nam “wycinać” będzie wielkość <li>

    Żeby to zrobić będziemy umieszczać nasze obrazki jako tło <li> i wyśrodkowywać.

    Komentarze

    Wyjścia były dwa. Albo będziemy skracać komentarz do okreśonej liczby znaków/słów albo zrobimy tak, ze komentarz będzie pokazywał się na miniaturce, dzięki czemu jego wielkość (w rozsądnych granicach oczywiście) nie ma wpływu na wielkość naszego <li> z miniaturką. Żeby to jeszcze jeszcze przyozdobić uzyjemy jQuery.

    Podsumowanie

    W tym momencie mamy już pomysł jak zrobić, żeby miniaturki były równe. A w takiej sytuacji nadanie <li> w CSS float:left; załatwi sprawę.

    No to piszemy

    Jako, że nasza galeria to nic innego jak lista nieuporządkowana to kod wygląda następująco:

    <ul>
            <li class="pierwszy"><a href="#"><span>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</span></a></li>
            <li class="drugi"><a href="#"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></a></li>
            <li class="trzeci"><a href="#"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></a></li>
    </ul>

    W <span> znajdują się komentarze obrazków. Same zaś obrazki będą tłem <li>, więc będą podane w stylu. W <a> oczywiście podajemy link do dużego obrazka.

    Teraz czas na CSS

    * {
                            margin:0;
                            padding:0;
                    }

                    body {
                            font:11px verdana, sans-seriff;
                            background:black;
                    }

                    ul {
                            list-style:none;
                    }

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

                    span {
                            display:block;
                            opacity:0.9;
                            background:black;
                            color:white;
                            padding:3%;
                            width:94%;
                            position:absolute;
                            bottom:0;
                    }

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

                    ul a {
                            display:block;
                            width:100%;
                            height:100%;
                    }

    Mam nadzieję, że ten fragment jest dość jasny. Jeśli macie wątpliwości po co jakiś fragment stylu to po prostu go usuncie i zobaczcie co się stanie.

    Pozostaje nam jQuery. Zadaniem tego skrypciku jest pokazywanie opisu w momencie gdy ktoś najedzie na miniaturkę.

    $(document).ready(function() {
                    $("span").hide();

                    $("li a").hover(function(){
                            $(this).children("span").fadeIn("fast");
                    },function(){
                            $(this).children("span").fadeOut("fast");
                    });

                    });

    Drobny szlifik

    W pewnych sytuacjach, np gdy nazwy obrazków trzymamy w bazie danych i z pomocą jakiegoś skryptu chcemy te obrazki pokazać, nadawanie klas kolejnym <li> jest dość kiepskim pomysłem. O wiele prościej wtedy zamiast pisać <li class="jakas_nazwa"> napisać <li style="background-image:url(nazwa_obrazka);">.

    Działające demo możecie zobaczyć tutaj.

    W razie wątpliwości nie bójcie sie pisać na grafikarto.pl w odpowiednim temacie.

    Komentarze / dodaj komentarz


    • autor: FadeIn, fadeOut, fadeTo - czyli o pojawianiu się i znikaniu | vivee.info
      dodano: 04.12.2007

      [...] zastosowanie obu funkcji pokazałem we wcześniejszym tutorialu dotyczącym miniaturek z opisami. Tam po najechaniu na obrazek za pomocą fadeIn pokazywał się opis, a po zjechaniu z obrazka [...]


    • autor: Miniaturki z opisem | Tworzenie stron www. Projektowanie
      dodano: 27.12.2007

      [...] Stanąłem ostatnio przed problemem dotyczącym stworzenia galerii zdjęć. Wszystko miało być zrobione beztabelkowo oraz zawierać komentarze. Wszystko było fajnie dopóki wszystkie komentarze oraz miniaturki były tej samej wielkości. (more…) [...]


    • autor: wel
      dodano: 11.07.2008

      “doszedłem do wniozku” ;)


    • autor: palmiak
      dodano: 11.07.2008

      no cóż… jedyne co mogę powiedzieć to, ze “z” było blisko “s”, albo… nie wiem, nie mam innych głupich wytłumaczeń. Ot literówka, dzięki za wskazanie.

    Napisz komentarz