Используя Javascript, как сделать отдельные подписи для каждого из моих изображений галереи лайтбокса?
Я понимаю, что это, вероятно, очень просто, но я не могу обойти это. В настоящее время моя галерея лайтбокса полностью работает, изображения выскакивают, когда выбирается миниатюра, а затем при нажатии возвращаются на главную страницу.
Какой код javascripting мне не хватает, чтобы мои индивидуальные изображения имели индивидуальные подписи?
Вот часть моего тела HTML:
<h1> My Photo Gallery </h1>
<div id="back" onClick="Box();">
</div>
<div id="fore">
<img src="daisyl.jpg" id="changeImg">
<h2>Caption One</h2>
</div>
<div id="thumbnails">
<img src="daisy.jpg" height="150px" width="150px" class="small" onClick="lightBox('daisy.jpg');">
<img src="zigl.jpg" height="150px" width="150px" class="small" onClick="lightBox('zigl.jpg');">
<img src="cork.jpg" height="150px" width="150px" class="small" onClick="lightBox('cork.jpg');"> <img src="tri.jpg" height="150px" width="150px" class="small" onClick="lightBox('tri.jpg');">
</div>
У меня есть четыре изображения. На данный момент под моим 'fore' DIV все они имеют одну и ту же надпись "Подпись первая". Для целей примеров я назову четыре надписи: "Подпись первая", "Подпись вторая... и так далее":)
Мой JavaScript:
<script type="text/javascript">
function lightBox(imgNumber){
var img = document.getElementById('changeImg');
img.src = imgNumber;
document.getElementById('back').style.display = "block";
document.getElementById('fore').style.display = "block";
}
function Box(){
document.getElementById('back').style.display = "none";
document.getElementById('fore').style.display = "none";
}
</script>
Если вы можете помочь мне, это было бы очень признательно! Я думаю, что дал достаточно кода для работы, но если нет, дайте мне знать:)
Вот моя скрипка, лайтбокс не работал для меня, но может для вас, он работает для меня вне jsfiddle:)
2 ответа
Рабочий пример ниже. Я добавил заголовок, так что теперь ваш лайтбокс получает описание из тега ALT. Это не красивый код, но я постарался сделать его простым для вас. В будущем я рекомендую использовать jQuery для таких функций:)
JSFiddle - http://jsfiddle.net/cx20mdzm/
<html>
<head>
<title>Gallery</title>
<style>
body{
background-color: white;
margin: 0;
padding: 0;
}
h1{
margin-left: 40px;
margin-top: 40px;
font-size: 40px;
font-family: 'Pacifico', cursive;
}
p {
margin-left: 40px;
margin-right: 100px;
}
#thumbnails{
margin-left: 40px;
margin-top: 40px;
margin-bottom: 40px;
}
.small{
padding-right: 10px;
}
#fore{
display: none;
border: 1px solid white;
background-color: white;
height: 550px;
width: 500px;
margin-left: -280px;
margin-top: -290px;
left: 50%;
top: 50%;
position: fixed;
padding: 10px;
}
#back {
width: 100%;
height: 3000px;
background-color: black;
position: fixed;
opacity: 0.8;
-moz-opacity:0.8;
-webkit-opacity:0.8;
display: none;
cursor: pointer;
margin-top: -200px;
}
h2{
font-family: 'Pacifico', cursive;
margin-top: -5px;
}
</style>
</head>
<body>
<h1> My Photo Gallery </h1>
<div id="back">
</div>
<div id="fore" style="display:none;">
<img src="http://lorempixel.com/output/people-q-c-500-500-4.jpg" id="changeImg">
<h2 id="caption">Caption One</h2>
</div>
<div id="thumbnails">
<img id="thumb1" alt="description 1" src="http://lorempixel.com/output/people-q-c-500-500-4.jpg" height="150px" width="150px" class="small">
<img id="thumb2" alt="description 2" src="http://lorempixel.com/output/abstract-q-c-500-500-5.jpg" height="150px" width="150px" class="small">
<img id="thumb3" alt="description 3" src="http://lorempixel.com/output/fashion-q-c-500-500-6.jpg" height="150px" width="150px" class="small">
<img id="thumb4" alt="description 4"src="http://lorempixel.com/output/nature-q-c-500-500-5.jpg" height="150px" width="150px" class="small">
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac est rutrum, eleifend tortor consectetur, pulvinar risus. Nunc auctor mattis turpis, vitae tempus leo gravida eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam nec augue mi. Sed eu vehicula libero. In at dictum mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus vitae commodo eros, quis fermentum elit. Cras id egestas diam, eu commodo augue.
</p>
<p>
Donec magna metus, dictum vitae dapibus eu, interdum id libero. Phasellus ut velit vehicula, faucibus ipsum eu, iaculis nunc. Nam venenatis vel ipsum vitae posuere. Curabitur pellentesque erat est, fringilla sollicitudin felis volutpat id. Vestibulum condimentum ex vitae blandit lacinia. Donec non nunc auctor, luctus mi ac, pretium nisl. In eu arcu a enim facilisis varius. Nulla ullamcorper, lorem nec cursus porta, ligula arcu fermentum nunc, et sollicitudin tellus magna ac mi. Fusce faucibus fermentum nibh id pulvinar. In ornare venenatis placerat. Curabitur varius rhoncus neque. Duis lobortis, quam ac iaculis gravida, lectus dui tristique dui, sed commodo nunc nibh in ex.
</p>
<script>
var thumb1 = document.getElementById("thumb1");
var thumb2 = document.getElementById("thumb2");
var thumb3 = document.getElementById("thumb3");
var thumb4 = document.getElementById("thumb4");
var back = document.getElementById("back");
var fore = document.getElementById("fore");
var btn = document.getElementById("btn");
var what = document.getElementById("what");
thumb1.addEventListener("click", function() {
lightBox(thumb1.src,thumb1.getAttribute('alt'));
}, false);
thumb2.addEventListener("click", function() {
lightBox(thumb2.src,thumb2.getAttribute('alt'));
}, false);
thumb3.addEventListener("click", function() {
lightBox(thumb3.src,thumb3.getAttribute('alt'));
}, false);
thumb4.addEventListener("click", function() {
lightBox(thumb4.src,thumb4.getAttribute('alt'));
}, false);
back.addEventListener("click", Box, false);
function lightBox(imgSource,imgCaption){
var preview = document.getElementById('changeImg');
var caption = document.getElementById('caption');
caption.innerHTML = imgCaption;
preview.src = imgSource;
back.style.display = "block";
fore.style.display = "block";
};
function Box(){
back.style.display = "none";
fore.style.display = "none";
}
</script>
</body>
</html>
Это зависит от того, какой плагин для лайтбокса вы используете. Попробуйте использовать атрибут ALT. Настоятельно рекомендуется для SEO. Как спросил Сай, вы должны предоставить пример JSFiddle. В противном случае вам будет трудно помочь.
<img alt="This is you caption" src="daisy.jpg" height="150px" width="150px" class="small" onClick="lightBox('daisy.jpg');">