Question

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

的问题： 虽然代码工作正常，但仍有一些问题需要解决。

在第一次加载时，当我点击缩略图时，＃panel中的主要大图像首先被缩略图替换，然后在~1秒后用普通的大图像替换。因此，应首先在点击时预先加载大图像，然后将其附加到#panel或类似的内容。
rel属性在替换中丢失了。当有一个新图像附加到#panel时，它看起来像是松散的rel属性（shadowbox无法工作）
点击缩略图加载应该阻止的影子框。只有在#panel中点击大图片时才应加载Shadowbox。当有人点击那个大图像时，shadowbox应该加载所有大图像。这可能很棘手，可能需要更改html代码。

工作演示 演示不再有效

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);
});

Answer 1

您可以使用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属性。

Answer 2

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

jQuery - 在保留rel属性的同时替换div中的图像

2 个答案: