🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Morphing Image Modal

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

View Demo

Dependencies

All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

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
  }
});

⚠️ 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();
  }
});

✅ Project duplicated

✅ Project created

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