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

以下是一个示例：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容器中当前显示图像的索引，但由于它不包含其他内容，只包含一个图像包含在一个链接中，这意味着图像索引和链接索引是相同的，所以我们可以选择直接通过索引链接。

让所有人混在一起......

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

1 个答案: