Skip to content

Instantly share code, notes, and snippets.

@abelsromero

abelsromero/image_popup.adoc

Last active March 1, 2022 20:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abelsromero/5393739cdbf458686db5555378781580 to your computer and use it in GitHub Desktop.
Save abelsromero/5393739cdbf458686db5555378781580 to your computer and use it in GitHub Desktop.
Download ZIP
How to integrate image popup in Asciidoctor without extensions
Raw
image_popup.adoc

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

Steps

  1. Download and install Magnific Popup locally.

  2. 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>

  3. 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"]

  4. Render with docinfo1 attribute.

@timothybryant
Copy link

Question: I need to add "popup-link" functions to my AsciiDoc documents hosted on a web server. Will all of the viewers of my documents need to install the Magnific Popup plug-in?

@abelsromero
Copy link
Author

No, but you need to make it available in the webserver. Copy the required Magnific Popup css & js files alongside the converted documents matching the href an src. In the example, that would be inside a folder "magnific-popup".

@timothybryant
Copy link

timothybryant commented Mar 1, 2022 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment