Képgaléria HTML, CSS, Javascript segítségével?
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.
válasza: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?
3. kommentelő:
Hogy is nézne ki a js kód?
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();
});
});
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
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!