1

首先，我将从以下内容开始：我绝不会塑造或形成开发人员、编码员等。我只是一名平面设计师，帮助朋友建立她的网站。

截至目前，我在将缩略图链接到我的灯箱调用上的完整图像时遇到问题 - 您可以在www.chrissybulakites.com上查看该网站

我注意到

在VOID:(0)每一个中……我的想法是，如果我将 0 拇指与 0 满，然后将 1 拇指与 1 满，然后将 2 拇指与 2 满，等等，它会起作用.. 它没有。

有人可以向我解释我是否走在正确的道路上，或者我可以做些什么来完成这项工作。

谢谢

抢

4

3 回答 3

2

每个图像有两个基本元素；拇指和完整的图像。拇指使用 JavaScript 来显示和隐藏一个 div（有点像一个框架）来保存完整的图像。

页面上的 HTML 会重复很多次，您可以在消除一些重复的同时解决您的问题。我会保留你所有的拇指，但在每个拇指上，添加对拇指所代表的完整图像的引用。除了减少重复之外，它还可以使将来更容易更新页面，因为更改拇指和主图像是在一个地方而不是两个地方完成的。

在下面，我在“onclick”中添加了另一部分，以将“frame”的 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 为“frame”

<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>
于 2012-09-06T20:13:31.390 回答
1

您需要为每个完整图像 div 赋予其自己的唯一 ID，例如：id="image23"。然后修改onclick来引用对应的id：onclick="document.getElementById('image23')...

于 2012-09-06T20:12:44.743 回答
0

JavaScript中函数的含义void()是“什么都不做”。这可以防止它加载新页面（或打开缩略图）。

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

表示当用户单击该项目时，它将捕获元素light并将显示更改为block它还将捕获元素fade并将显示更改为block。问题是您的所有图像都包含在一个名为“light”的元素中，因此浏览器选择显示第一个（而不是抛出错误）。

这里有很多模糊的逻辑。
从您正在加载所有图像（高清图像）的事实开始。

如果你想要我的两分钱（你只想得到结果，而不是学习 JavaScript 的工作原理），我会选择类似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 会处理其他所有事情。请注意rel="prettyPhoto[my_gal]"

<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>

您可以进一步自定义它，并且应该真正阅读此处的手册。

于 2012-09-06T20:11:47.693 回答