我有一句话,点击它会在灯箱中显示该单词的图像...当您单击另一个图像时,它会将该div中显示的单词更改为另一组单词。在第一次加载时,灯箱可以工作,但是一旦你更改了灯箱不起作用的话,它会加载一个单独的页面,里面有图片。
$(function() {
$('#thmb1').click(function() {
var bigImg = document.getElementById("bigImg");
var desc = document.getElementById("Descriptors");
bigImg.innerHTML='<img src="./images/Slider/Placeholder_1.jpg" alt="Helix Jerseys"/>'
desc.innerHTML='<a href="./images/slimming_lines.jpg" rel="lightbox" title="my caption">Descriptor 1</a><a href="./images/slimming_lines.jpg" rel="lightbox" title="my caption">Descriptor 2</a><a href="./images/slimming_lines.jpg" rel="lightbox" title="my caption">Descriptor 3</a>'
});
$('#thmb2').click(function() {
var bigImg = document.getElementById("bigImg");
var desc = document.getElementById("Descriptors");
bigImg.innerHTML='<img src="./images/Slider/Placeholder_2.jpg" alt="Helix Jerseys"/>'
desc.innerHTML='<a href="./images/slimming_lines.jpg" rel="lightbox" title="my caption">Descriptor 4</a><a href="./images/slimming_lines.jpg" rel="lightbox" title="my caption">Descriptor 5</a><a href="./images/slimming_lines.jpg" rel="lightbox" title="my caption">Descriptor 6</a>'
});
});
<div id="LeftSliders">
<h1>Main Title</h1>
<h2>Sub Title</h2>
<div id="smallImg">
<img src="./images/Slider/Placeholder_1thmb.jpg" alt="Helix Jerseys" id="thmb1"/>
<img src="./images/Slider/Placeholder_2thmb.jpg" alt="Helix Jerseys" id="thmb2"/>
</div>
<div class="clear"></div>
<div id="bigImg">
<img src="./images/Slider/Placeholder_1.jpg" alt="Helix Jerseys"/>
</div>
<div id="Descriptors">
<a href="./images/slimming_lines.jpg" rel="lightbox" title="Descriptor 1">Descriptor 1</a><a href="./images/slimming_lines.jpg" rel="lightbox" title="Descriptor 2">Descriptor 2</a><a href="./images/slimming_lines.jpg" rel="lightbox" title="Descriptor 3">Descriptor 3</a>
</div>
</div>