I have a gallery of pictures in a modal window, under each of them I need to insert a description (not a short one), on the website which I took as an example a picture and description was taken in my div, how can I do the same? Please explain more clearly as I am completely new to js.

The site from which I lick the design, or rather the template from wix.com: http://en.wix.com/website-template/view/html/1642?originUrl=http%3A%2F%2Fru.wix.com%2Fwebsite% 2Ftemplates% 2Fhtml% 2Fall% 2F2 & bookName = & galleryDocIndex = 7 & category = all

In the About Us tab, at the bottom of the page there are photos of employees, when they are pressed, they come out in a modal window, there is a text below them, and how can I do the same for myself? Can you provide at least code to create and display divs, or how else to do it?

    1 answer 1

    Carefully read the library documentation. There is an example implementation: 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>