Go to homepage

Projects /

Morphing Image Modal

An image morphing into a modal window, showing additional details.

View Demo

Dependencies

All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.

To use this component, include the following dependencies:

How To

The Morphing Image Modal component can be used to morph an image element into a modal window showing additional information about the image.

You can initialize it using the MorphImgModal object:

var morphModal = document.getElementsByClassName('js-morph-img-modal')[0];
new MorphImgModal({
  element: morphModal,
  searchData: function(target, cb) {
    // custom function used to retrieve the additional info about the selected image
    // target: this is the selected [aria-controls] element
    cb(data); // data is the HTML to be shown
  },
  afterEnter: function(target, modalInfoEl) {
    // function that runs after the modal content has been loaded
  }
});

⚠️ Note that in the morphing-img-modal.js, we do not initialize the MorphImgModal object. 

To connect the modal to its trigger (e.g., image preview), make sure the ID value of the first one is equal to the aria-controls value of the second one.

<ul>
  <li>
    <figure aria-controls="morph-modal-id">
      <img src="../../../app/assets/img/morph-img-1.jpg" data-modal-src="../../../app/assets/img/morph-img-1.jpg" alt="Image Description">
    </figure>
  </li>

  <li>
    <figure aria-controls="morph-modal-id">
      <img src="../../../app/assets/img/morph-img-2.jpg" data-modal-src="../../../app/assets/img/morph-img-2.jpg" alt="Image Description">
    </figure>
  </li>

  <li class="col-12 [email protected]">
    <figure aria-controls="morph-modal-id">
      <img src="../../../app/assets/img/morph-img-3.jpg" data-modal-src="../../../app/assets/img/morph-img-3.jpg" alt="Image Description">
    </figure>
  </li>
</ul>

<div id="morph-modal-id" class="morph-img-modal js-morph-img-modal js-modal" >
  <!-- modal content here -->
</div>

For each <img> element, set a data-modal-src attribute equal to the src of the image you want to show in the modal (should be a higher resolution version of the preview image). If this attribute is not set, the src of the image will be used.

searchData Option #

When initializing the MorphImgModal object, you should pass the searchData option. This is the custom function used to retrieve the additional info about the selected image (e.g., a call to a database).

For example, if the additional info is stored in a different file for each one of your images, your searchData would be something like:

new MorphImgModal({
  element: morphModal,
  searchData: function(target, cb) {
    // this assumes you set, for each [aria-controls] element, a data-morph-url equal to the file path where the info are stored
    var imgInfoPath = target.getAttribute('data-morph-url');
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        // the ajax call was succesfull -> call the callback function (cb) passing the response text as argument
        cb(this.responseText);
      }
    };
    xhttp.open("GET", imgInfoPath, true);
    xhttp.send();
  }
});

afterEnter Option #

Use this option to run a function after new content has been loaded.

For example, if the new content contains an accordion element that you need to initialize, you can do something like:

new MorphImgModal({
  element: morphModal,
  searchData: function(target, cb) {
    // ...
  },
  afterEnter: function(target, modalInfoEl) {
    var accordion = modalInfoEl.getElementsByClassName('accordion');
    if(accordion.length > 0) new Accordion(accordion[0]);
  }
});

Categories

Bug Report & Feedback

Component Github page ↗

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.