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

  • Hostingi.net
  • Kwi 2021

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:



Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

{"email":"Niepoprawny adres email","url":"Zły adres strony","required":"Wypełnij wszystkie wymagane pola"}