[JavaScript][PHP]Rozmiar Obrazka Opcje

[awek]

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:

[PHP] pobierz, plaintext 
<script type="text/javascript">
var zdjecia = Array(
    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>
[PHP] pobierz, plaintext 

[patwoj98]

Ja bym zmodyfikował i dodał classy.

Kod

.miniature{
      width:100px !important;
      height:100px !important;
}
.normal{
      width:300px !important;
      height:300px !important;

Tak przygotowane klasy wrzucasz na dół do CSS i modyfikujesz linijki:
document.getElementById('miniaturki').innerHTML += '<img src="' + zdjecia[i][1] + '" onclick="zmien(' + i + ')" />';
na
document.getElementById('miniaturki').innerHTML += '<img src="' + zdjecia[i][1] + '" onclick="zmien(' + i + ')" class="miniature"/>';

ORAZ

document.getElementById('zdjecie').innerHTML = '<img src="'+zdjecia[id][0]+'"'+custom+' />';
na
document.getElementById('zdjecie').innerHTML = '<img src="'+zdjecia[id][0]+'" class="normal"/>';

daj znać czy działa.

[awek]

Ja bym zmodyfikował i dodał classy.

Kod

.miniature{
      width:100px !important;
      height:100px !important;
}
.normal{
      width:300px !important;
      height:300px !important;

Tak przygotowane klasy wrzucasz na dół do CSS i modyfikujesz linijki:
document.getElementById('miniaturki').innerHTML += '<img src="' + zdjecia[i][1] + '" onclick="zmien(' + i + ')" />';
na
document.getElementById('miniaturki').innerHTML += '<img src="' + zdjecia[i][1] + '" onclick="zmien(' + i + ')" class="miniature"/>';

ORAZ

document.getElementById('zdjecie').innerHTML = '<img src="'+zdjecia[id][0]+'"'+custom+' />';
na
document.getElementById('zdjecie').innerHTML = '<img src="'+zdjecia[id][0]+'" class="normal"/>';

daj znać czy działa.

Dzięki Trochę to ulepszyłem i działa jak należy!