Kezdőoldal » Számítástechnika » Weblapkészítés » Képgaléria HTML, CSS, Javascri...

Képgaléria HTML, CSS, Javascript segítségével?

Figyelt kérdés

Olyan képgalériát szeretnék csinálni, hogy van egy kis kép (kb 100px széles), ha rákattintunk akkor bejön nagyobba és X lenne a jobb felső sarkába, azzal lehetne bezárni.

De ha bejön nagyba, akkor ne lehessen váltogatni köztük, csak bezárni lehessen.



2016. szept. 25. 16:40
 1/7 anonim ***** válasza:
2016. szept. 25. 17:01
Hasznos számodra ez a válasz?
 2/7 anonim ***** válasza:
2016. szept. 25. 17:01
Hasznos számodra ez a válasz?
 3/7 anonim ***** válasza:
Egyszerű feladat. Kilistázod a kisméretű thumbnaileket. JS-ben teszel egy eseményt a kattintásra, hogy készítsen egy ablakméretű dobozt amiben betöltöd a teljes méretű képet. Teszel egy "X" icont és arra is csinálsz egy függvényt, hogy ha rákattintasz akkor tüntesse el a dobozt.
2016. szept. 25. 17:25
Hasznos számodra ez a válasz?
 4/7 A kérdező kommentje:

Ezt a Modal Images oldalt én is megtaláltam: [link]


Próbálgattam átírogatni, hogy több képpel jöjjön össze, de nem sikerült.. Esetleg hogy lehet megoldani ezt, hogy több képpel is menjen?

2016. szept. 25. 17:25
 5/7 A kérdező kommentje:

3. kommentelő:

Hogy is nézne ki a js kód?

2016. szept. 25. 17:26
 6/7 anonim ***** válasza:

Leírtam egy működő kódot, de persze ezt még simán lehet alakítgatni, sőt máshogy is megoldható, de kezdetnek ezzel próbálkozhatsz. Fájlt feltölteni sajnos itt nem lehet, de másold be őket a megfelelő helyre. Ne felejts el egy jquery-t betenni a megfelelő helyre.


HTML:


<html>

<head>

<title>Galéria</title>

<link href="style.css" rel="stylesheet"/>

<meta charset="utf-8"/>

<script src="jquery.js" language="javascript"></script>

<script src="script.js" language="javascript"></script>

</head>


<body>

<div class="thumbnails">

<img src="1.jpg"/>

<img src="2.jpg"/>

<img src="3.jpg"/>

<img src="4.jpg"/>

</div>

</body>

</html>


CSS:


*{

padding: 0;

margin: 0;

}


body{

background: #999;

}


.thumbnails{

width: 100%;

position: absolute;

bottom: 0;

right: 0;

background: #000;

}


.thumbnails img{

width: 150px;

margin: 10px;

}


.fullimg{

width: 100%;

height: 100%;

position: fixed;

z-index: 10;

background: rgba(0,0,0,.7);

}


.fullimg span{

content: 'Bezár';

position: absolute;

z-index: 100;

top: 5px;

right: 5px;

color: #fff;

cursor: pointer;

}


.fullimg img{

width: 80%;

margin: auto;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

}


JS:


$(document).ready(function(){

$("body").on("click", ".thumbnails img", function(){

var img = $(this).attr("src");

$("<div class='fullimg'></div>").insertAfter(".thumbnails");

$(".fullimg").html("<img src='"+img+"'/><span>Bezár</span>");

});

$("body").on("click", ".fullimg span", function(){

$(".fullimg").remove();

});

});

2016. szept. 25. 22:34
Hasznos számodra ez a válasz?
 7/7 A kérdező kommentje:
Köszi szépen, tökéletesen működik! :)
2016. szept. 25. 23:23

Kapcsolódó kérdések:




Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!