CSS/Javascript燈箱

Question

首先，我將從這個開始：我絕不會塑造或形成開發人員，編碼器等等。我只是一個平面設計師，幫助她的網站的朋友。

截至目前，我在銜接縮略圖在我的收藏夾完整圖像的問題咻 - 你可以在www.chrissybulakites.com

查看該網站，我注意到

隨着VOID:(0)在每一個被一個......我的思考過程是，如果我對應0拇指與0完整，然後1拇指與1完整然後2拇指wwith 2滿等等等等它會工作..它沒有。

有人可以向我解釋我是否在正確的道路上，或者我可以做些什麼來完成這項工作。

感謝

羅布

Answer 1

功能void()的JavaScript中的意思是 「什麼都不做」。這可以防止它加載新的新頁面（或打開縮略圖）。

onclick = "document.getElementById('light').style.display='block'; 
      document.getElementById('fade').style.display='block' " 

說，當用戶點擊該項目將捕獲元件light和改變顯示爲block它也將捕獲元件fade和改變顯示爲block。事情是所有的圖像被包裹在一個名爲「light」的元素中，所以瀏覽器選擇顯示第一個（而不是拋出錯誤）。

這裏有大量的模糊邏輯。
從您加載所有圖像（高清圖像）開始。

如果你想要我的兩分錢（而你只想得到結果，而不是學習JavaScript的工作方式），我會用prettyPhoto這樣的東西去實現它，它以一種簡單直接的方式實現有據可查。

如何添加prettyPhoto到您的網頁？
下載代碼並在頭上包含Javascript和CSS文件。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> 
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> 

然後把這個代碼的網頁上

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function(){ 
    $("a[rel^='prettyPhoto']").prettyPhoto(); 
    }); 
</script> 

文檔說把它放在頁面的底部，但你（應該）也把它的頭。

然後把帶有鏈接的縮略圖放到實際的圖像上。 PrettyPhoto會照顧其他一切。請注意0​​

<a href="img/full/1.jpg" rel="prettyPhoto[my_gal]" title="Caption 1"> 
    <img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" /> 
</a> 

You can customize it further and should really read the manual here.

Answer 2

你需要給每個完整圖像的div了自己獨特的ID，如：id="image23"。然後修改onclick以引用相應的ID：onclick="document.getElementById('image23')...

Answer 3

每個圖像有兩個基本元素;拇指和完整的圖像。拇指使用JavaScript來顯示和隱藏div（有點像一個框架）來保存完整的圖像。

該頁面上的HTML重複了很多，你可以解決你的問題，同時刪除一些重複。我會保留所有的大拇指，但每個大拇指都加上一個對拇指代表的完整圖像的引用。除了減少重複，它還可以使未來更新頁面變得更容易，因爲更改拇指和主圖像是在一個地方而不是兩個地方完成的。

在下面我添加了另一部分到「onclick」來說更新'幀'的src是拇指的完整版本。

<a href = "javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';document.getElementById('frame').src='http://chrissybulakites.com/images/longshot_full.png';"><img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" /></a> 

然後刪除所有的放大圖，除了一個，更新它，以便img標籤具有「幀」的ID

<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> 
    <div id="fade" class="black_overlay"></div> 

這將意味着每個拇指被點擊時，它會做它之前做過的輕微和時尚的比特，但它也會更新正在顯示的圖像。

---

做這兩個圖像作爲一個概念證明我得到這樣的預期，其工作原理：

<a href = "javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';document.getElementById('frame').src='http://chrissybulakites.com/images/longshot_full.png';"><img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" /></a> 

<a href = "javascript:void(0)" onclick ="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';document.getElementById('frame').src='http://chrissybulakites.com/images/actor_full.png';"><img src="http://chrissybulakites.com/thumbnails/actor_thumbnail.png" /></a> 

<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> 
    <div id="fade" class="black_overlay"></div>