Я понимаю, что это, вероятно, очень просто, но я не могу понять это. В нынешнем виде у меня полностью работает моя галерея лайтбоксов, изображения появляются при выборе миниатюры, а затем при нажатии кнопки возвращаются на главную страницу.
Какой код javascript мне не хватает, чтобы у моих отдельных изображений были отдельные подписи?
Вот часть моего 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>
У меня есть четыре изображения. На данный момент под моим «передним» DIV все они имеют одинаковую подпись «Caption One». Для ваших примеров я буду называть четыре подписи: «Заголовок один», «Заголовок два… и так далее :)
Мой 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 :)
