Как создать блоки в модальном окне?

333

30 декабря 2016, 10:04

У меня есть галерея картинок в модальном окне, под каждой из них нужно вставить описание(не короткое), на сайте который я взял в пример картинку и описание взяли по моему в блок div, как мне сделать так же? Прошу объяснить по понятнее так как я совсем новичок в js.

Сайт с которого я слизываю дизайн, точнее шаблон от wix.com: http://ru.wix.com/website-template/view/html/1642?originUrl=http%3A%2F%2Fru.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F2&bookName=&galleryDocIndex=7&category=all

Во вкладке О нас, внизу страницы есть фотографии сотрудников, при их нажатии они выходят в модальном окне, под ними есть текст, а как мне сделать такое же у себя? Можете привести хотя бы код для создания и отображения дивов, или как это ещё сделать?

Answer 1

Внимательней читайте документацию к библиотеке. Там есть пример реализации: http://jsfiddle.net/cWNw9/

$(document).ready(function() { 
    $(".fancybox") 
    .attr('rel', 'gallery') 
    .fancybox({ 
      beforeLoad: function() { 
        var el, id = $(this.element).data('title-id'); 
 
        if (id) { 
          el = $('#' + id); 
 
          if (el.length) { 
            this.title = el.html(); 
          } 
        } 
      } 
    }); 
  });

.hidden { 
  display: none; 
} 
.fancybox-title a { 
  color: #fff; 
} 
body { 
  padding: 20px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script> 
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet" /> 
<a class="fancybox" data-title-id="title-1" href="http://fancyapps.com/fancybox/demo/1_b.jpg"> 
  <img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /> 
</a> 
<div id="title-1" class="hidden"> 
  This is 1st title. <a href="http://google.com">Some link</a> 
</div> 
 
<a class="fancybox" data-title-id="title-2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"> 
  <img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /> 
</a> 
 
<div id="title-2" class="hidden"> 
  This is <b>2nd title</b>. <a href="http://google.com">Some link</a> 
</div>