Morphing Image Modal

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

Dependencies

• Modal Window

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 col-4@sm">
    <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

• Content and Layout > Gallery
• Overlays

Bug report & feedback

Component Github page ↗