urlscan.io logo urlscan.io
SecurityTrails logo

dak6o-raaaa-aaaak-ae4ra-cai.icp0.io Open in urlscan Pro
2a0b:21c0:b002:2:5000:edff:fe0d:98de  Public Scan

Back to summary
URL: https://dak6o-raaaa-aaaak-ae4ra-cai.icp0.io/vendor/Magnific-Popup/website/_includes/examples.html
Submission: On December 03 via api from US — Scanned from CH

Form analysis 1 forms found in the DOM

<form id="test-form" class="mfp-hide white-popup-block">
  <h1>Form</h1>
  <fieldset style="border:0;">
    <p>Lightbox has an option to automatically focus on the first input. It's strongly recommended to use <code>inline</code> popup type for lightboxes with form instead of <code>ajax</code> (to keep entered data if the user accidentally refreshed
      the page).</p>
    <ol>
      <li>
        <label for="name">Name</label>
        <input id="name" name="name" type="text" placeholder="Name" required="">
      </li>
      <li>
        <label for="email">Email</label>
        <input id="email" name="email" type="email" placeholder="example@domain.com" required="">
      </li>
      <li>
        <label for="phone">Phone</label>
        <input id="phone" name="phone" type="tel" placeholder="Eg. +447500000000" required="">
      </li>
      <li>
        <label for="textarea">Textarea</label><br>
        <textarea id="textarea">Try to resize me to see how popup CSS-based resizing works.</textarea>
      </li>
    </ol>
  </fieldset>
</form>

Text Content

{% if site.url == 'local' %} {% else %} {% endif %}


EXAMPLES


SINGLE IMAGE LIGHTBOX

Three simple popups with different scaling settings.
1 — fits horizontally and vertically,
2 — only horizontally,
3 — no gaps, zoom animation, close icon in top-right corner.





LIGHTBOX GALLERY

You may put any HTML content in each gallery item and mix content types. In this
example lazy-loading of images is enabled for the next image based on move
direction. If you wish to add touch-swipe support, check my article on the
Smashing Magazine, or new PhotoSwipe script.




ZOOM-GALLERY

If you wish to open the popup only after image is fully loaded, you may preload
image via JS. Or use scaled down image instead of thumbnail. Zoom effect works
only with images, for now.




POPUP WITH VIDEO OR MAP

In this example lightboxes are automatically disabled on small screen size and
default behavior of link is triggered.

Open YouTube video
Open Vimeo video
Open Google Map


DIALOG WITH CSS ANIMATION

Animations are added with simple CSS transitions, you can make them look however
you wish.
More animation effects on CodePen.

Open with fade-zoom animation
Open with fade-slide animation


DIALOG EXAMPLE

This is dummy copy. It is not meant to be read. It has been placed here solely
to demonstrate the look and feel of finished, typeset text. Only for show. He
who searches for meaning here will be sorely disappointed.


POPUP WITH FORM

Entered data is not lost if you open and close the popup or if you go to another
page and then press back browser button.

Open form


FORM

Lightbox has an option to automatically focus on the first input. It's strongly
recommended to use inline popup type for lightboxes with form instead of ajax
(to keep entered data if the user accidentally refreshed the page).

 1. Name
 2. Email
 3. Phone
 4. Textarea
    Try to resize me to see how popup CSS-based resizing works.


AJAX POPUP

You have full control of what is displayed in popup, align it to any side via
CSS, enable or disable scroll on right side of window - whatever.

Load content via ajax
Load another content via ajax


MODAL POPUP

A modal popup disables the usual ways to close popups.

Open modal


MODAL DIALOG

You won't be able to dismiss this by usual means (escape or click button), but
you can close it programatically based on user choices or actions.

Dismiss


ERROR HANDLING

This is just basic example of how error messages are displayed. Surely, you can
change text or style them.

Broken image
Broken ajax request