Fluxo

Magnific Popup #

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.

How to Use #

Copy-paste the following css inside the <head> tag of your pages under <!-- Vendor/Plugins CSS --> to give it a style.

<link rel="stylesheet" href="css/vendor/magnific-popup-min.css">

Copy-paste the following <script> near the end of your pages under <!-- Vendor/Plugins JS --> to enable Magnific Popup.

<script src="js/vendor/jquery.magnific-popup.min.js"></script>

Copy-paste the following <script> near the end of your pages under <!-- Vendor/Plugins JS Init --> to initialize it.

<script src="js/init/wb.magnificpopup-init.js"></script>

In order to integrate the AjaxChimp with your Mailchimp list, you need to specify your Mailchimp post URL. The Mailchimp post url will look like this:

https://example.us1.list-manage.com/subscribe/post?u=5afsdhfuhdsiufdba6f8802&id=4djhfdsh99f

Examples #

Image popup #

Fluxo has special class .popup-image to call Magnific Popup on an image.

<a href="../target-image.jpg" class="popup-image">
  <img src="../thumbnail-image.jpg" alt="">
</a>

iFrame popup #

Fluxo has special class .popup-iframe to call Magnific Popup on an iframe element.

<a class="popup-iframe" href="https://www.youtube.com/watch?v=...">
  Open YouTube video
</a>

<a class="popup-iframe" href="https://vimeo.com/...">
  Open Vimeo video
</a>

<a class="popup-iframe" href="https://maps.google.com/maps?q=...">
  Open Google Map
</a>

Working with Icon #

Fluxo has special class .popup-iframe to call Magnific Popup on an iframe element.

<a href="" class="popup-iframe icon d-inline-block rounded-circle background--white scale-110--on-hover">
  <i class="fa fa-play pl-1 color--brand"></i>
</a>

<a href="" class="popup-iframe icon d-inline-block rounded background--primary scale-110--on-hover">
  <i class="fab fa-vimeo-v color--white"></i>
</a>

<a href="" class="popup-iframe icon d-inline-block background--danger scale-110--on-hover">
  <i class="fas fa-map-marker-alt color--white"></i>
</a>