[JS+PHP]Otwarcie zdjęcia po kliknięciu w miniaturkę

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
turysta110
Posty: 4
Rejestracja: śr maja 11, 2005 9:22 pm
Lokalizacja: Brodnica

[JS+PHP]Otwarcie zdjęcia po kliknięciu w miniaturkę

Post autor: turysta110 »

Chciałbym, by po kliknięciu w miniaturkę zdjęcia pojawiło się nowe okno z tym samym zdjęciem, tylko w rozmiarach pierwotnych. Wiem, że to chyba coś związane z Show BigPicture, ale nie wiem co i jak..

Proszę o pomoc.

Pozdr
Calif
Nowy
Nowy
Posty: 91
Rejestracja: sob lut 26, 2005 3:03 pm
Lokalizacja: Kaplica

Re: [JS+PHP]Otwarcie zdjęcia po kliknięciu w miniaturkę

Post autor: Calif »

W sekcji <head> umieszczasz skrypt:

Kod: Zaznacz cały

<script type="text/JavaScript">
<!--
function pokazOkno(zdjecieNazwa,zdjecieSzerokosc,zdjecieWyskosc,tytul,pozycjaLewo,pozycjaGora) {
  noweOkno = window.open("","noweOkno","width="+zdjecieSzerokosc+",height="+zdjecieWyskosc+",left="+pozycjaLewo+",top="+pozycjaGora);
  noweOkno.document.open();
  noweOkno.document.write('<html><title>'+tytul+'<\/title><body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" 	marginheight="0" marginwidth="0" onClick="self.close()" style="cursor:hand">');
  noweOkno.document.write('<img src='+zdjecieNazwa+' width='+zdjecieSzerokosc+' height='+zdjecieWyskosc+' alt='+tytul+'>');
  noweOkno.document.write('<\/body><\/html>');
  noweOkno.document.close();
  noweOkno.focus();
}
//-->
</script>
Nastepnie już w <body> tak to wyglada...

Kod: Zaznacz cały

<a href="javascript:pokazOkno('DuzyObrazek.jpg','640','480','NazwaObrazka','5','5');">
<img style="width:160px;height:120px;border:0" src="minaturka.jpg" alt="NazwaObrazka">
</a>
Miniaturka ma rozmiar 160 x 120 px (oczywiscie mozesz ustawić sobie inaczej)
Caly obrazek otwiera się w osobnym oknie po kliknięciu w miniaturkę i ma
rozmiar 640 x 480 px (też możesz sobie ustawić jak ci się podoba).

Skrypt nie jest mojego autorstwa jest tylko zmodyfikowany by Validator sie go nie czepiał.
Jeśli masz jakieś wątpliwości lub czegoś nie rozumiesz, pytaj.
A tu masz skrypt w akcji ;)
http://www.zambiaseter.republika.pl/galeria3.html
turysta110
Posty: 4
Rejestracja: śr maja 11, 2005 9:22 pm
Lokalizacja: Brodnica

Re: [JS+PHP]Otwarcie zdjęcia po kliknięciu w miniaturkę

Post autor: turysta110 »

Dzięki serdeczne. Wyszło na to, że poradziłem sobie zwykłą procedurą window.open(), ale może zastosuję do czegoś innego.

Jeszcze raz serdeczne dzięki.

Pozdrawiam
fiban
Posty: 6
Rejestracja: pt maja 13, 2005 1:28 pm
Lokalizacja: Poznań

Re: [JS+PHP]Otwarcie zdjęcia po kliknięciu w miniaturkę

Post autor: fiban »

Świetny skrypt, widziałem już parę o podobnym działaniu, ale ten naprawdę wygląda interesująco. Przy okazji nasuwa mi się pytanko, jak można wykorzystać podobne narzędzie do następującego zadania:
Jest strona, zbudowana na tabeli, w części głównej jest jedna większa komórka na treść z miniaturami zdjęć, a obok w poziomie komórka, w której chciałbym, aby pojawiały się zdjęcia większych rozmiarów, (po kliknięciu miniatury w komórce z treścią). Zastanawiam się czy coś takiego w ogóle jest możliwe bez wykorzystania ramek, a jeśli tak to czy ramki przejdą przez validację?
ODPOWIEDZ