クリックすると、その単語の画像がライトボックスに表示されるという単語があります...別の画像をクリックすると、その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>