abelsromero/image_popup.adoc

## image_popup.adoc

      
    Raw
  

              image_popup.adoc
            
          
This guide shows how to integrate Magnific Popup without custom extensions.


Steps


Download and install Magnific Popup locally.


Create docinfo.html with


<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.min.js"></script>
<script>
$(document).ready(function() {
  $('.popup-link').magnificPopup({delegate:'a',type:'image'});
});
</script>


Add images with a link as follow

Note that the role must match the CSS selector in the docinfo ready function.


image:image-path.jpg[link="image-path.jpg",role="popup-link"]


Render with docinfo1 attribute.