有没有一种方法可以使用lightbox2实现图像之间更平滑的过渡?

Is there a way to achieve smoother transitions between images using lightbox2?

本文关键字：之间 图像 平滑 实现 lightbox2 一种 可以使 方法 有没有      更新时间：2023-09-26

我使用Lightbox2: http://lokeshdhakar.com/projects/lightbox2/。

这个插件似乎是以一种方式编写的，当导航到集合中的新图像时，会产生"flash"效果。我相信这是因为旧图像只是简单地消失了，而不是先逐渐消失或与逐渐消失的新图像交叉褪色(这将是理想的)。

有关此缺陷的演示，请查看上面的Lightbox2链接中的示例。

是否有一种方法来添加某种淡出过渡，当用户前进到下一个图像?作为一个对JS相当不熟练的开发人员，我可以在lightbox.js脚本中添加什么，使我能够在图像之间实现100%的平滑过渡?

我无法像你建议的那样淡出图像，但我认为这确实有助于避免图像之间的白色闪光。

在lightbox.css文件的第43行和51行之间，简单地将背景颜色更改为黑色或类似的颜色，基本上意味着您将获得黑色闪光而不是白色。如果您仍然希望图像周围有一个白色边框，只需在这里添加一个(您还需要删除第59到61行)。所以你会得到这样的结果:

.lb-outerContainer {
  position: relative;
  background-color: black;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;
  border: 4px solid white;
}


此外，如果您对渐变速度不满意，请查看lightbox.js文件中的第313行。特别是在第316行，将('slow')改为数值，例如(800)。

// Display the image and its details and begin preload neighboring images.
 Lightbox.prototype.showImage = function() {
    this.$lightbox.find('.lb-loader').stop(true).hide();
    this.$lightbox.find('.lb-image').fadeIn('slow');
    this.updateNav();
    this.updateDetails();
    this.preloadNeighboringImages();
    this.enableKeyboardNav();
  };
相关文章：