1

目标： 创建将显示当前大图像和少量缩略图的元素。当有人点击缩略图时，当前的大图需要被点击的大图替换。Shadowbox 应该只适用于大图像。如果图像（缩略图）很少，shadowbox 必须包含所有三个大图像（而不是只显示一个）。

问题： 虽然下面的代码可以工作，但仍有一些问题需要修复。

  1. 在第一次加载时，当我点击缩略图时，#panel 中的主要大图像首先被替换为缩略图，然后在 ~1 秒后被替换为正常的大图像。如此大的图像应该首先在点击时预加载，然后附加到#panel 或类似的东西。
  2. rel 属性在替换时不知何故丢失了。当有一个新图像附加到#panel 时，它看起来像松散的 rel 属性（阴影框不起作用）
  3. 单击缩略图会加载应该被阻止的阴影框。只有在#panel 中单击大图像时才应加载 Shadowbox。当有人单击该大图像时，阴影框应加载所有大图像。这可能很棘手，可能需要更改 html 代码。

WORKING DEMO 演示不再起作用

HTML：

<div id="panel">
  <a href="path_to_image1.jpg" rel="shadowbox[page]">
   <img src="scripts/timthumb.php?src=path_to_image1.jpg&w=200&h=20" alt="Image name1" />
  </a>
</div>

<div id="thumbs">
  <a href="path_to_image1.jpg" rel="shadowbox[page]">
   <img src="scripts/timthumb.php?src=path_to_image1.jpg&w=30&h=30" alt="Image name1" />
  </a>
  <a href="path_to_image2.jpg" rel="shadowbox[page]">
   <img src="scripts/timthumb.php?src=path_to_image2.jpg&w=30&h=30" alt="Image name2" />
  </a>
  <a href="path_to_image3.jpg" rel="shadowbox[page]">
   <img src="scripts/timthumb.php?src=path_to_image3.jpg&w=30&h=30" alt="Image name3" />
  </a>
</div>

JS：

$('#thumbs a').click(function(evt) {
  evt.preventDefault();
  var clickedElement = $(this).clone().find('img').attr('src', function(i, src){
    return src.replace('w=30&h=30', 'w=200&h=200')
  }).end();
  $('#panel').html(clickedElement);
});
4

2 回答 2

0

您可以使用 jquery 的 .load() 函数。

这个想法很简单。首先在 positiopn -9000, -9000 的某处创建一个隐藏的 div，并在其中包含图像 src。

假设 img 元素的 id 是“tempimagecache”

所以现在我们要做的是：

$.('#tempimagecache').load(function(){
{
    // Now place the image code to the reqired location and its loaded from the cache
});

这是我在我的网站上工作的示例。 http://fr3ak.me/

此外，为了防止在拇指上弹出阴影框，请删除 rel 属性。

于 2012-08-24T07:40:34.297 回答
0

我发现http://slidesjs.com/具有我想要实现的完全相同的功能。我要感谢所有试图帮助我的人。

于 2012-08-25T10:09:29.763 回答