Question

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

我错过了哪些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他们都有相同的标题＆＃34;标题一＆＃34;。出于你的例子的目的，我将称之为四个标题，＆＃34;标题一＆＃34;，＆＃34;标题二......以及堡垒:)

我的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/

Answer 1

这取决于您使用的是什么灯箱插件您可以尝试使用ALT属性。它非常值得推荐用于搜索引擎优化。正如Sai所问，你应该提供JSFiddle的例子。否则很难帮助你。

 <img alt="This is you caption" src="daisy.jpg" height="150px" width="150px" class="small"   onClick="lightBox('daisy.jpg');">

Answer 2

下面的工作示例。我添加了标题，所以现在你的灯箱从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>

使用Javascript，如何为我的每个灯箱图库图片制作单独的字幕？

2 个答案: