当某些图像通过灯箱动态加载时显示某些 div

Question

巧克力灯箱 (http://chocolat.insipi.de/) 正在容器 div 中加载图像。我想显示另一个 div，其中包含与图像相关的文字以及图像本身。像这样的东西（除此之外它不起作用）：

if ($('.chocolat-content').has('img[src="fotos/milkyway.jpg"]')) {
            $('#beauty').hide('fast')
            $('#milkyway').fadeIn()
} 
else if($('.chocolat-content').has('img[src="fotos/beauty.jpg"]')) {
            $('#milkyway').hide('fast')
            $('#beauty').fadeIn()
}

可能是脚本不知道什么时候加载某个图片有关...

Answer 1

Here is an example: https://www.wideopenwindows.be/test.html

让我从那里接起，评论有点多......

问题是你只在那里执行一次代码，所以是的，你需要在某些事件发生时执行它。试试这个，然后在浏览器控制台中观察，当您浏览图像时会发生什么......

instance.api().set('afterImageLoad', function() { 
  console.log(instance.api().current())
});

这样我们就得到了当前显示图像的索引。现在正如我所说，我可能只是将要显示的元素的 id 通过数据属性直接放在 link 元素上，

<a data-captionelement="beauty" class="chocolat-image" href="..."

我们在#gallery 容器中获得了当前显示图像的索引，但由于它只包含一张图像，每个图像被包裹成一个 link，这意味着图像索引和 link索引相同，所以我们可以直接通过索引select link。

让我们把它们混合在一起...

instance.api().set('afterImageLoad', function() { 
  var index = instance.api().current(),
      captionElementId = $('#gallery a') // get all the links in container
                           .eq(index) // get the one that contains current image
                           .data('captionelement'); // get id from data attibute

  $('.caption').hide(); // hide all caption elements; use whatever selector fits
                        // your document structure here

  $('#'+captionElementId).fadeIn(); // fade in the one we we're looking for
});

现在这是未经测试的，但应该给你大概的想法。如果它不能立即工作，请检查控制台是否有任何可能出现的语法错误；如果你不能让它工作，请设置一个 https://jsfiddle.net/ 示例，我会看看。

当某些图像通过灯箱动态加载时显示某些 div

Showing certain div when certain image gets dynamically loaded with a lightbox

jquery

lightbox