javascript - 如何制作连接模态窗口

Question

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

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

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

提前致谢!

Answer 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'); 
        }   
      }          
  });

});

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