使用Javascript，如何爲我的每個燈箱圖片製作個人標題？

我明白這可能非常簡單，但我無法理解它。就目前而言，我有我的燈箱全部正常工作，當縮略圖選擇時彈出圖像，然後點擊返回主頁面時彈出圖像。使用Javascript，如何爲我的每個燈箱圖片製作個人標題？

我錯過了什麼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/

來源

2014-11-24 user3594463

你能提供一個小提琴請 – Sai 2014-11-24 20:44:27

您img.src = imgnumber之後;嘗試添加此行document.getElementById（'fore h2'）。innerHTML = imgNumber;我只是在這裏大聲思考。我不能在這裏嘗試.. – Sai 2014-11-24 20:47:42

@Sai對不起，我試圖在那裏做一個jsfiddle，但我不能讓我的圖片在其中工作，不幸的是，感謝您的幫助，沒有傷心地工作，我的縮略圖不可點擊在我輸入代碼後 – user3594463 2014-11-24 20:56:56

下面的工作示例。我添加了標題，所以現在你的燈箱從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-25 14:22:34

非常感謝MikaMoney完美的作品:) – user3594463 2014-11-25 17:16:46

最後一個問題:)如果我是添加一個'x'按鈕到畫廊，關閉圖像，一旦點擊你在哪裏推薦我放置它，以及我需要做什麼樣的js？ – user3594463 2014-11-25 17:18:32

添加關閉按鈕不是問題。這將是純粹的HTML + CSS。你需要創建兩個三個新的容器（div），並在其中插入[X]字符。之後，將CSS添加到這些div，使它們成爲按鈕樣式的外觀。這就是全部。檢查工作JSFiddle。我爲你製作了一個例子，並將它拉一點 - http://jsfiddle.net/cx20mdzm/1/ – 2014-11-26 18:44:09

這取決於您正在使用的lightbox插件您可以嘗試使用ALT屬性。強烈建議您使用搜索引擎優化。正如Sai所問，你應該提供JSFiddle示例。否則，將很難幫助你。

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

來源

2014-11-24 20:56:45

感謝邁克這將在我的所有照片下放置「這是你的標題」，但我想爲每個圖片做一個不同的標題。我不使用一個lightbox插件使自己使用CSS和JavaScript，我會再次嘗試使用jsfiddle，但它不會使用我的圖像不幸：/ – user3594463 2014-11-24 21:01:59

使用Javascript，如何爲我的每個燈箱圖片製作個人標題？

回答

相關問題