• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Obraz w nowej karcie

Object Storage Arubacloud
0 głosów
401 wizyt
pytanie zadane 26 marca 2020 w HTML i CSS przez viola062210 Nowicjusz (120 p.)

Witam, mam pytanie dotyczące obrazów w html. A więc zrobiłam na swojej stronie miniaturki, a gdy się na nie kliknie wtedy zdjęcia wyświetlają się w nowej karcie w rozdzielczości takiej, jakiej zostały pobrane z internetu. Chciałabym aby wszystkie zdjęcia wyświetlały się w nowej karcie z rozdzielczości 800x600 pikseli, jednak nie wiem gdzie zapisać w kodzie  te wymagania. Również nie wiem jak zrobić, by po kliknięciu w duże zdjęcie wrócić do miniaturek. Tak wygląda fragment kodu, gdzie stworzyłam miniaturki. Pomocy:)

				<div class="tile1">	<a href="zdjecie1.jpg" target="_blank"> <img width="305" height="200" src="zdjecie1.jpg"/> </a> </div>
				<div class="tile1">	<a href="zdjecie5.jpg" target="_blank"> <img width="305" height="200" src="zdjecie5.jpg"/> </a> </div>
				<div style="clear:both;"> </div>
				<div class="tile2"> <a href="zdjecie3.jpg" target="_blank"> <img width="305" height="200" src="zdjecie3.jpg"/> </a> </div>
				<div class="tile2"> <a href="zdjecie4.jpg" target="_blank"> <img width="305" height="200" src="zdjecie4.jpg"/> </a> </div>
				<div style="clear:both;"> </div>

 

2 odpowiedzi

0 głosów
odpowiedź 26 marca 2020 przez antypop Mądrala (5,730 p.)

Chcesz koniecznie nowe okno? 

Możesz zrobić fotki w lightboxie (https://designconcept.webdev20.pl/articles/lightbox).

Jeżeli koniecznie chcesz nowe okno to zainteresuj się tym tematem : https://www.w3schools.com/jsref/met_win_open.asp.

 

Pozdrawiam

komentarz 26 marca 2020 przez viola062210 Nowicjusz (120 p.)

Przejrzałam ten materiał i próbowałam to zrobić, jednak bez skutku. W którym miejscu konkretnie mam dodać ten skrypt? Napisałam go w oparciu na ten materiał

<script>
	function myFunction()
{
 var myWindow = window.open("http://localhost/www/zdjecie1.jpg", "_blank", "width=800,height=600", true);
}
</script>

 

komentarz 27 marca 2020 przez antypop Mądrala (5,730 p.)

Tutaj cały kod:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<div class="tile1">   
    <a href="zdjecie1.jpg" target="_blank"> <img width="305" height="200" src="zdjecie1.jpg"/> </a> </div>
<div class="tile1">   
    <a href="zdjecie5.jpg" target="_blank"> <img width="305" height="200" src="zdjecie5.jpg"/> </a> </div>
<div style="clear:both;"> </div>
<div class="tile2"> 
    <a href="zdjecie3.jpg" target="_blank"> <img width="305" height="200" src="zdjecie3.jpg"/> </a> </div>
<div class="tile2"> 
    <a href="zdjecie4.jpg" target="_blank"> <img width="305" height="200" src="zdjecie4.jpg"/> </a> </div>
<div style="clear:both;"> </div>

<script>

    var links = document.getElementsByTagName('a');

    for ( let x = 0; x < links.length; x++ ) {

        links[x].addEventListener('click',function(e) {
            
            e.preventDefault();

            window.open(links[x].href, "_blank", "width=800,height=600", true)

        })

    }

</script>
</body>
</html>

 

0 głosów
odpowiedź 27 marca 2020 przez frostify Mądrala (5,640 p.)

Widać, że potrzebujesz po prostu galerii.

W oparciu o tą galerię:

https://github.com/tobiasroeder/ImageBox

zrobiłem, żeby zdjęcia skalowało do 800 pikseli na 600 tak jak napisałaś.

Można też przechodzić z jednego na drugie, jak to w galerii:

https://codepen.io/frostify/pen/PoqXYxp

Podobne pytania

0 głosów
2 odpowiedzi 492 wizyt
pytanie zadane 6 marca 2020 w HTML i CSS przez fff Gaduła (3,950 p.)
0 głosów
1 odpowiedź 648 wizyt
0 głosów
1 odpowiedź 305 wizyt
pytanie zadane 5 stycznia 2020 w JavaScript przez milogab2004 Początkujący (440 p.)

92,687 zapytań

141,598 odpowiedzi

320,087 komentarzy

62,048 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...