0

我知道这可能非常简单，但我无法理解它。就目前而言，我的灯箱图库已完全正常工作，选择缩略图时会弹出图像，然后单击返回主页时会弹出图像。

我缺少什么 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>

我有四个图像。目前，在我的“前”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 之外对我有用:)

http://jsfiddle.net/5anutL1e/

4

2 回答 2

1

下面的工作示例。我已经添加了标题，所以现在你的灯箱从 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>
于 2014-11-25T14:22:34.767 回答
1

这取决于您使用的灯箱插件您可以尝试使用 ALT 属性。强烈推荐用于 SEO。正如 Sai 所问，您应该提供 JSFiddle 示例。否则很难帮你。

 <img alt="This is you caption" src="daisy.jpg" height="150px" width="150px" class="small"   onClick="lightBox('daisy.jpg');">
于 2014-11-24T20:56:45.980 回答