Prosta galeria na JavaScript

Abik · Styczeń 29, 2011, 15:37:40

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.
Najpierw stworzymy sobię strukturę kodu HTML:

[code]
<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>
[/code]

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ęć:

[code]
var zdjecia = Array(
Array('duze zdjecie', 'miniaturka', 'tytul', 'opis')
);
[/code]

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

[code]
var max_width = 520;
[/code]

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

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

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:

[code]
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
}
[/code]

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:

[code]window.onload = laduj;
[/code]

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

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

Jeszcze tylko trochę styli css i koniec:

[code]#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;
}
[/code]

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 [url="http://rafal-brzezinski.pl/examples/galeria/loading.gif"]loading.gif[/url].
Szerokość dla #zdjecie, #miniaturki (width: 520px;) powinna być taka sama jak w var max_width w kodzie js.

Cały kod:

[code]<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>
[/code]

Jak ktoś jest ciekawy jak to wygląda w praktyce przygotowałem [url="http://rafal-brzezinski.pl/examples/galeria/"]przykład[/url].

______________________

Autor poradnika: [b]Fafu[/b] http://rafal-brzezinski.pl/

Forum graficzne Burning-Brushes.pl

Prosta galeria na JavaScript

Abik

Styczeń 29, 2011, 15:37:40