Forum graficzne Burning-Brushes.pl

Prosta galeria na JavaScript

Abik

  • VIP
  • *****
    • Amerykański plastik
      • Zobacz profil
    Coś mnie naszło aby napisać tutorial na skrypt galerii :)

    W sieci są różne skrypty galerii – w PHP, w JS no ale większość jest niepotrzebnie rozbudowana… Więc pomogę wam napisać taki prosty skrypt. Przygotowałem wzór jak ta galeria będzie wyglądać:

    Najpierw stworzymy sobię strukturę kodu HTML:

    <html>
    <head>
    <title>Galeria</title>
    <script type="text/javascript">
    // skrypty
    </script>
    </head>
    <body>
    <h2>Galeria</h2>
    <div id="informacje"></div>
    <div id="zdjecie"></div>
    <div id="miniaturki"></div>
    </body>
    </html>

    Wyjaśnienie: w div#informacje będą przechowywane informacje jak tytuł czy opis, w div#zdjecie będzie zeskalowane zdjęcie a div#miniaturki służy do przechowywania miniaturek. Mamy też przygotowane miejsce na skrypty, więc można przystąpić do pisania ;)

    Na początek stworzymy sobie tablicę w której będą przechowywane dane zdjęć:

    var zdjecia = Array(
    Array('duze zdjecie', 'miniaturka', 'tytul', 'opis')
    );

    Zaraz pod tym zdefiniujemy zmienną max_width która będzie potrzebna do określenia maksymalnej szerokości obrazka, który zostanie zeskalowany aby nie rozwalać strony.

    var max_width = 520;

    Teraz czas na funkcję która będzie nam tworzyć listę miniaturek oraz załaduje 1 zdjęcie:

    function laduj() {
    for(var i = 0; i < zdjecia.length; i++)
    document.getElementById('miniaturki').innerHTML += '<img src="' + zdjecia[i][1] + '" onclick="zmien(' + i + ')" />';
    zmien(0);
    }

    Kod jest bardzo prosty – tworzymy pętlę i dodajemy kolejne zdjęcie do div#miniaturki. Później tylko wywołanie funkcji zmien(0) gdzie 0 symbolizuje 1 zdefiniowane zdjęcie w tablicy.

    Teraz w/w funkcja zmien(), która będzie opowiadać za zmianę obrazka:

    function zmien(id) {
    document.getElementById('zdjecie').innerHTML += '<div id="ladowanie"></div>'; // 1
    var custom = '';
    var preload = new Image(); // 2
    preload.onload = function() {
    if(preload.width > max_width) // 3
    custom = ' style="height: '+(Math.floor(max_width / (preload.width / preload.height)))+'px;width:'+max_width+'px;"';
     
    document.getElementById('informacje').innerHTML = '<b>'+zdjecia[id][2]+'</b><br /><i>'+zdjecia[id][3]+'</i>';
    document.getElementById('zdjecie').innerHTML = '<img src="'+zdjecia[id][0]+'"'+custom+' />'; // 4
    }
    preload.src = zdjecia[id][0]; // 5
    }

    Teraz krótkie omówienie:
    1. Dodajemy do div#zdjecia kolejnego diva#ladowanie który będzie nam wyświetlał pasek postępu (dodajemy a nie zmieniamy [+=] dlatego żeby uniknąć brzydkiego efektu znikania zdjęcia)
    2. Tworzymy nowy obiekt Image(), dzięki któremu możemy zrobić załadowanie zdjęcia w tle (brzydki efekt j/w)
    3. Po załadowaniu zdjęcia, kiedy dostępne są jego wymiary możemy sprawdzić czy szerokość obrazka nie jest większa niż dopuszczalna. Jeśli jest większa to obliczamy proporcjonalną wysokość (zobacz wpis o skalowaniu obrazków).
    4. Dodajemy informację o zdjęciu oraz wyświetlamy obrazek.
    5. Nadajemy atrybut src dla obiektu Image().

    To by było na tyle, jeszcze tylko krótkie:

    window.onload = laduj;

    które mówi nam żeby po załadowaniu strony wywołać funkcję laduj() która nam stworzy listę miniaturek.

    Cytuj
    Ciekawostka:
    Jeśli w window.onload potrzebujesz użyć funkcji z parametrami:
    window.onload = function(){
        funkcja(para, metry);
    }

    Jeszcze tylko trochę styli css i koniec:

    #ladowanie {
    display: block;
    position: absolute;
    top: 0;
    _top: 50%; /* IE */
    left: 0;
    width: 100%;
    height: 100%;
    background: url('loading.gif') no-repeat center center;
    }
     
    #zdjecie, #miniaturki {
    width: 520px;
    position: relative;
    }
     
    #miniaturki img {
    margin: 5px;
    cursor: pointer;
    }

    div#ladowanie wyświetlamy blokowo z pozycją absolutną aby element był na wierzchu. Z szerokością i wysokością 100% – tło ustawimy na no-repeat (nie powtarzaj) i "center center" co znaczy że na samym środku. Tutaj zastosujemy mały hack dla Internet Explorer: wysokość od góry na 50% (ma coś problemy z tą pozycją tła). Jeszcze plik loading.gif.
    Szerokość dla #zdjecie, #miniaturki (width: 520px;) powinna być taka sama jak w var max_width w kodzie js.

    Cały kod:

    <html>
    <head>
    <title>Galeria</title>
    <script type="text/javascript">
    var zdjecia = Array(
    Array('duze zdjecie', 'miniaturka', 'tytul', 'opis')
    );
     
    var max_width = 520;
     
    function laduj() {
    for(var i = 0; i < zdjecia.length; i++)
    document.getElementById('miniaturki').innerHTML += '<img src="' + zdjecia[i][1] + '" onclick="zmien(' + i + ')" />';
    zmien(0);
    }
     
    function zmien(id) {
    document.getElementById('zdjecie').innerHTML += '<div id="ladowanie"></div>';
    var custom = '';
    var preload = new Image();
    preload.onload = function() {
    if(preload.width > max_width)
    custom = ' style="height: '+(Math.floor(max_width / (preload.width / preload.height)))+'px;width:'+max_width+'px;"';
     
    document.getElementById('informacje').innerHTML = '<b>'+zdjecia[id][2]+'</b><br /><i>'+zdjecia[id][3]+'</i>';
    document.getElementById('zdjecie').innerHTML = '<img src="'+zdjecia[id][0]+'"'+custom+' />';
    }
    preload.src = zdjecia[id][0];
    }
     
    window.onload = laduj;
    </script>
    <style type="text/css">
    #ladowanie {
    display: block;
    position: absolute;
    top: 0;
    _top: 50%; /* IE */
    left: 0;
    width: 100%;
    height: 100%;
    background: url('loading.gif') no-repeat center center;
    }
     
    #zdjecie, #miniaturki {
    width: 520px;
    position: relative;
    }
     
    #miniaturki img {
    margin: 5px;
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <h2>Galeria</h2>
    <div id="informacje"></div>
    <div id="zdjecie"></div>
    <div id="miniaturki"></div>
    </body>
    </html>

    Jak ktoś jest ciekawy jak to wygląda w praktyce przygotowałem przykład.

    ______________________

    Autor poradnika: Fafu http://rafal-brzezinski.pl/