Kliknięcie w miniaturkę i wyświetlenie pełnego obrazka.

Question

Witam serdecznie,

Potrzebuje waszej pomocy, potrzebuje skryptku który umieści mi miniaturkę obrazka na stronie a gdy na nią klikne wyświetli się pełny rozmiar zdjęcia i dodatkowo zostanie odegrana pięciosekundowa muzyczka. Z góry dzięki.

Answer 1

czy zadałeś sobie minimum trudu by odpowiedzieć na własne pytanie?

Answer 2

//najpierw robisz funkcję

function pokaz()
{

document.getElementById("id-Diva").innerHTML = "<img src=\"zdj.jpg\">"  // wypisuje to co jest po znaku równości do id-Diva
}

//uwaga jeśli byś wpisał "<img src="zjd.jpg">" to plik by odczytał, że ma wypisać "<img src="zjd.jpg">". Dlatego  wpisuje się "przedłużający" prawy ukośnik, sam sprawdź jak to działa ;)

// teraz robisz sobie diva w którym zamieszczasz zdjęcie

 

<div id="id-Diva">

<img src="zdj.jpg" width="100px" onclick="pokaz()">  // po kliknięciu na zdjęciu uruchamia się funkcja (onclick="pokaz()") wypisująca "<img src=\"zdj.jpg\">".

</div>

i wszystko powinno pasować

 

Answer 3

Polecam zapoznać się z filozofią https://pornel.net/pups - skrypt z długą, białą brodą, ale wciąż pod względem usability nie ma sobie równych. Dlaczego? Bo zdjęcie w powiększeniu otworzymy nawet przy wyłączonym JS albo klikając na nie środkowym klawiszem myszy. A wszystko dzięki temu, że miniaturkę po prostu otoczyło się hiperłączem do dużej wersji

Jeśli chodzi o dźwięk: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video