Forum PHP.pl > [HTML][CSS][JavaScript]Galeria Javascript

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS][JavaScript]Galeria Javascript

lolarz

20.05.2014, 17:01:38

Witam mam pewien problem
na jutro muszę zrobić galerie na javascripcie ale totalnie nie wiem jak się za to za brać. Poniżej pokaże o co mi chodzi.
link
1,2 - strzałki do zmieniania zdjęć
3 - opis pierwszy
4 - opis drugi
5 - miniaturka zdjęcia
6 - powiększone zdjęcie

A więc tak:
po kliknięciu w jakąś strzałkę(1, 2) muszą zmieniać się 3,4,5,6
Musi to być coś takiego, że mogę dodać ile tylko chce zdjęć

Nie znam się na tym kompletnie a muszę mieć to na jutro zrobione.

Udało mi się znaleźć jedynie coś takiego:

[HTML] pobierz, plaintext 
<head>
<script type="text/javascript">
var zdjecia = Array(
    Array('duze_zdj', 'miniaturka', 'tytul1', 'opis1'),
    Array('duze_zdj2', 'miniaturka2', 'tytul2', 'opis2'),
);
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><p>'+zdjecia[id][2]+'</p></b><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;
}
</style>
</head>
<div id="miniaturki></div>
<div id="zdjecie></div>
<div id="informacje></div>
[HTML] pobierz, plaintext

Z góry dziękuje za pomoc.

xavi_sof

20.05.2014, 17:26:12

Skoro nie masz zielonego pojęcia o tym to po prostu skorzystaj z gotowca.

Fajna:
http://designshack.net/articles/javascript...ghtbox-gallery/

lolarz

20.05.2014, 20:26:58

Ja nie muszę zrobić po prostu galerii tylko coś takiego jak opisałem wyżej.
Jest miniaturka, powiększona miniaturka i dwa opisy do zdjęć.
Po klikaniu w lewą/prawą strzałkę mają się te zdjęcia i opisy zmieniać.

Jeżeli ktoś wie jak to zrobić prosiłbym o pomoc

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.