Как сделать Connected Модальные окна

Question

Я задаюсь вопросом, как реплицировать одни и те же модальные компоненты окна, используемые на Lonely Planet: http://www.lonelyplanet.com/interest/family-travel/best-of-family-travel/content/travel-tips-and-articles/2550

Итак, когда вы нажимаете на одну из перечисленных миниатюр вы увидите модальное окно с помощью стрелок, которые on hover отображает изображение предварительного просмотра. Я пытаюсь воссоздать тот же плагин с 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'); 
     } 
     }   
    }); 

}); 

Если вы хотите использовать плагин вы можете использовать гладкий слайдер и настроить его под свои нужды. http://kenwheeler.github.io/slick/