[HTML/JS] Otwieranie zdjęcia w nowym oknie

Dziś szybka porada, która może przydać się każdemu webmasterowi. Jeśli potrzebujesz sposobu, aby po kliknięciu myszką w link, otworzyło się konkretne zdjęcie w nowym okienku. Nie w nowej karcie przeglądarki, tylko zupełnie nowym oknie w którym będzie wyświetlać się tylko plik graficzny.

Aby uzyskać taki efekt użyjemy HTML + prostego skryptu w JavaScript. Na początek tworzymy kod w HTMLu:

<!DOCTYPE html>
<html>
<head>
	<title>Otwieranie okna</title>
	<script src="noweokno.js"></script>
</head>
<body>
	<h1>Strona www</h1>
	<h2>Kliknij w link zdjęcia, aby otworzyć go w nowym oknie:</h2>
	<h2><a href="#" class="newOkn">Zdjęcie</a></h2>
</body>
</html>

Jak widać w sekcji <head> osadzasz plik w JavaScript noweokno.js, który również musisz stworzyć. Będzie on odpowiedzialny za wyświetlenie nowego okienka ze zdjęciem. Powinien mieć taką zawartość:

window.onload = newWinLinks;

function newWinLinks() {
	for (var i=0; i<document.links.length; i++) {
		if (document.links[i].className == "newOkn") {
			document.links[i].onclick = newWindow;
		}
	}
}

function newWindow() {
	var catWindow = window.open("img/zdjecie.jpg", "catOkn", "resizable=no,width=350,height=240");
	return false;
}

W linijce

var catWindow = window.open("img/zdjecie.jpg", "catOkn", "resizable=no,width=350,height=240");

wskazujesz lokalizację zdjęcia na serwerze, klasę obiektu (którą trzeba wskazać również we wcześniejszym pliku HTML) oraz rozmiar zdjęcia w pikselach. Wyposażony w dwa powyższe pliki możesz w linkach na stronie www, umieszczać odnośniki do zdjęć, które będą się wyświetlać w nowych okienkach.

Tak to będzie wyglądać, po kliknięciu w odnośnik:

zdjęcie w nowym oknie