灯箱功能部分工作

时间:2013-05-23 22:25:00

标签: jquery lightbox

我有一句话,点击它会在灯箱中显示该单词的图像...当您单击另一个图像时,它会将该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>

0 个答案:

没有答案