如何通过按钮打开房产页Fancybox图库中的户型图项？

我来帮你搞定这个问题！你遇到的核心问题是想在打开图库的同时直接定位到户型图，而不是先打开图库再跳转。之前的jumpTo方法确实需要图库实例已经处于活跃状态，而单纯调用open()不带参数会创建新实例且从第一项开始，所以我们需要换一种方式——在打开图库时就指定初始显示的索引。

具体实现代码 #

结合你现有的代码，只需要修改点击事件里的逻辑，调用fancybox.open()时传入图库元素集合和startIndex配置项即可：

jQuery(document).ready(function() { 
  var galleryItem = document.getElementById('drawing-item-1'); 
  var galleryItemIndex = jQuery(".property-gallery__item").index(galleryItem); 
  
  jQuery('.launch-gallery-drawing').click(function(){ 
    // 先判断索引是否有效，避免元素不存在时出错
    if (galleryItemIndex !== -1) {
      // 打开图库并直接定位到户型图对应的索引
      jQuery.fancybox.open(jQuery(".property-gallery__item"), {
        startIndex: galleryItemIndex
      });
    }
  }) 
});

代码说明 #

• 传入图库元素集合：jQuery(".property-gallery__item")是你整个房源图库的所有项，把它传给open()方法，确保打开的是你原本的图库，而不是新建一个无关的实例。
• 指定初始索引：通过startIndex配置项，直接设置打开图库时显示的项的索引，也就是你之前获取到的户型图项的galleryItemIndex。
• 索引有效性判断：加个galleryItemIndex !== -1的判断，防止当drawing-item-1不存在时，调用open()出现异常。

这种方法既不需要依赖已打开的图库实例，也不会创建多余的实例，完美解决你的需求。

内容的提问来源于stack exchange，提问作者Skovsgaard