Skocz do zawartości
rafwlkp

Galeria Js A 'rozjeżdzanie' Się Strony

dodany przez rafwlkp, w Programowanie

Rekomendowane odpowiedzi

rafwlkp Newbie

rafwlkp

Napisano
Napisano (edytowane)

Witam.

Dawno mnie tu nie było, więc witam po baaardzo długiej przerwie.

Ostatnio robiłem prostą stronę dla rodzinnej firmy. Wszystko pięknie, jednak gdy przyszedł czas na przetestowanie pod różnymi przeglądarkami pojawił się problem.

Cała sprawa dotyczy galerii JS, która wygląda dobrze w Firefox, jednak w Operze, IE oraz zapewne innych przeglądarkach już powoduje błąd.

Dołączona grafika

Link do strony => http://wojciechowiczh.pl/eos.html

Kod galerii:

<td height="0">
<div id="container">

<script type="text/javascript">
var zdjecia = Array(
Array('aut/eos/1.jpg', 'aut/eos/min1.jpg', '', ''),
Array('aut/eos/2.jpg', 'aut/eos/min2.jpg', '', ''),
Array('aut/eos/3.jpg', 'aut/eos/min3.jpg', '', ''),
Array('aut/eos/4.jpg', 'aut/eos/min4.jpg', '', ''),
Array('aut/eos/5.jpg', 'aut/eos/min5.jpg', '', ''),
Array('aut/eos/6.jpg', 'aut/eos/min6.jpg', '', '')
);

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 {
margin: 0px
width: 520px;
position: center;
}

#miniaturki img {
margin: 5px;
cursor: pointer;
}
</style>
<div id="informacje"></div>
<div id="zdjecie"></div>
<div id="miniaturki"></div>

			</td>

Jakieś pomysły na rozwiązanie problemu ? Czy może od razu mam szukać nowego skryptu ? :rolleyes: Dodam również, że autorem kodu tejże galerii jest Rafał Brzeziński.

Z góry dziękuje za pomoc.

Pozdrawiam

Rafał -rafwlkp- Wojciechowicz

Edytowane przez rafwlkp

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi
Udostępnij na innych stronach
m4r Newbie

m4r

Napisano
Napisano

Tak na szybko:

  • gdzie się kończy '<div id="container">'?
  • ustaw rzeczonemu divowi jakąś szerokość, powinien zawinąć miniaturki. Miniaturkom- float: left. Aczkolwiek nie sprawdzałem, jest późno, jestem zmęczony, więc mogę się mylić.
  • weźże wywal niepotrzebny css. Jedyny styl, który ma prawo być, to ten w <head /> (ewentualnie jako style='' w danym elemencie, ale nie polecam).

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi
Udostępnij na innych stronach
ULLISSES Contributor

ULLISSES

Napisano
Napisano

Skoro Cię dawno nie było, to trzeba było sobie przypomnieć układ forum. Mamy dział Programowanie, gdzie Twój temat bardziej się nadaje. Temat przeniosłem - wisisz mi piwo. ;]

 

Druga sprawa, to układ strony jest tragicznie skopany - po kij zagnieżdżone 3 tabele? To samo można zrobić na divach.

 

Trzecia sprawa, zapewne rozjeżdża się z powodu braku średnika po "margin: 0px":

#zdjecie, #miniaturki {	margin: 0px	width: 520px;	position: center;

Po czwarte zrób to zgodnie z nowymi standardami - na elementach DIV. Wystarczy dokończyć ustawienia elementów wewnątrz kontenera.

» Naciśnij aby pokazać/ukryć tekst oznaczony jako spoiler « - "html"
» Naciśnij aby pokazać/ukryć tekst oznaczony jako spoiler « - "css"

Na koniec rzuć okiem na kod galerii z tego tematu:

http://forum.purepc.pl/Programowanie-f35/S...rz-t319020.html

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi
Udostępnij na innych stronach

Dołącz do dyskusji

Możesz dodać zawartość już teraz a zarejestrować się później. Jeśli posiadasz już konto, zaloguj się aby dodać zawartość za jego pomocą.

Gość
Dodaj odpowiedź do tematu...

×   Wklejono zawartość z formatowaniem.   Przywróć formatowanie

  Dozwolonych jest tylko 75 emoji.

×   Odnośnik został automatycznie osadzony.   Przywróć wyświetlanie jako odnośnik

×   Przywrócono poprzednią zawartość.   Wyczyść edytor

×   Nie możesz bezpośrednio wkleić grafiki. Dodaj lub załącz grafiki z adresu URL.

Ładowanie
×
Przejdź do listy tematów
×
×
  • Dodaj nową pozycję...