如何制作连接模态窗口答案

【问题标题】：How to make Connected Modal windows如何制作连接模态窗口
【发布时间】：2023-03-13 13:56:15
【问题描述】：

我想知道如何复制 Lonely Planet 上使用的相同模式窗口组件：http://www.lonelyplanet.com/interest/family-travel/best-of-family-travel/content/travel-tips-and-articles/2550

因此，当您单击列出的缩略图之一时，您将看到带有箭头的模式窗口，在悬停状态下会显示预览图像。我正在尝试使用 Zurb Foundation 或纯 JS、jquery 重新创建相同的插件，最终将在 Wordpress 中实现。我知道这不是提出此类问题的平台，但是是的。我不知道从哪里开始。

如果您对插件有任何建议或任何建议，请告诉我。

提前致谢！

【问题讨论】：

你在说哪些缩略图？？无法在给定链接上找到缩略图...

标签： javascript jquery wordpress zurb-foundation

【解决方案1】：

如果您想使用 Zurb Foundation 创建自己的插件，您可以从以下代码中获得灵感。 http://codepen.io/shoaibik/pen/GZaOGV

$(function(){

  $("#exampleModal2").foundation('open');
  $('.nav').click(function(){
      if($(this).hasClass('prev')){
        if($(".reveal-overlay:visible").prev().find('.reveal').length){
            $(".reveal-overlay:visible").prev().find('.reveal').foundation('open');   
        } else{
            $(".reveal-overlay:last").find('.reveal').foundation('open'); 
        }  
      }else{
        if($(".reveal-overlay:visible").next().find('.reveal').length){
            $(".reveal-overlay:visible").next().find('.reveal').foundation('open');    
        }else{
            $(".reveal-overlay:first").find('.reveal').foundation('open'); 
        }   
      }          
  });

});

如果您想使用插件，您可以使用光滑的滑块并根据您的需要对其进行自定义。 http://kenwheeler.github.io/slick/

【讨论】：