Witam. Mam z neta taki mały skrypt galerii. Nie znam się na JS więc proszę o pomoc.
Chce aby rozmiar miniaturki był powiedzmy 100x100 a normalnego zdjecia powiedzmy 300x300..
Jak zrobić ten limit ? Chce aby każde zdjęcie bylo takie same.
oto kod:
<script type="text/javascript">
Array('images/obraz1.jpg', 'images/obraz1.jpg', 'tytul', 'opis'), Array('images/obraz2.jpg', 'images/obraz2.jpg', 'tytul', 'opis'), Array('images/obraz3.jpg', 'images/obraz3.jpg', '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>