What are some creative ways to utilize Zoom for displaying a collection of images?

Question

What are some creative ways to utilize Zoom for displaying a collection of images?

Anyone know how to create a zoom gallery using classes instead of ids? I found this code which is short, but it doesn't work with classes.

Check out the code here

I need help figuring out how to modify this code to work with classes for building my gallery. Any suggestions?

javascript

Answer 1

Answer №1

You have the option to implement dynamic IDs for this task. I have devised a snippet that features 4 distinct images with varying IDs, and the zoom effect functions seamlessly.

I find it more convenient to approach it in this manner rather than modifying the zooming functionality for classes.

// presenting an array of images
// each with RANDOM IDs!
const images = [{
    id: Date.now() - 400,
    src: 'https://loremflickr.com/1200/960/girl/all?random=1'
  },
  {
    id: Date.now() - 200,
    src: 'https://loremflickr.com/1200/960/girl/all?random=2'
  },
  {
    id: Date.now() + 200,
    src: 'https://loremflickr.com/1200/960/girl/all?random=3'
  },
  {
    id: Date.now() + 400,
    src: 'https://loremflickr.com/1200/960/girl/all?random=4'
  },
];

// displaying the images dynamically
(function(images) {

  let html = ''
  images.forEach(image => {
    html += `
      <h2>ID: ${ image.id }</h2>
      <div class="img-zoom-container d-flex">
        <img id="${ image.id }" src="${image.src}" width="300" height="240" alt="Girl">
        <div id="${ image.id }-result" class="img-zoom-result"></div>
      </div>
      <hr />
    `
  })
  const container = document.getElementById('container')
  container.innerHTML = html

  const imagelist = document.querySelectorAll('.img-zoom-container > img')

  // adding event listener for the random IDs
  imagelist.forEach(image => {
    image.addEventListener('mouseenter', function(e) {
      imageZoom(e.target.id, `${ e.target.id }-result`)
    })
  })

})(images);


// code courtesy of W3 Schools
// https://www.w3schools.com/howto/howto_js_image_zoom.asp
function imageZoom(imgID, resultID) {
  var img, lens, result, cx, cy;
  img = document.getElementById(imgID);
  result = document.getElementById(resultID);
  /* Create lens: */
  lens = document.createElement("DIV");
  lens.setAttribute("class", "img-zoom-lens");
  /* Insert lens: */
  img.parentElement.insertBefore(lens, img);
  /* Calculate the ratio between result DIV and lens: */
  cx = result.offsetWidth / lens.offsetWidth;
  cy = result.offsetHeight / lens.offsetHeight;
  /* Set background properties for the result DIV */
  result.style.backgroundImage = "url('" + img.src + "')";
  result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
  /* Execute a function when someone moves the cursor over the image, or the lens: */
  lens.addEventListener("mousemove", moveLens);
  img.addEventListener("mousemove", moveLens);
  /* For touch screens as well: */
  lens.addEventListener("touchmove", moveLens);
  img.addEventListener("touchmove", moveLens);

  function moveLens(e) {
    var pos, x, y;
    /* Prevent any other actions that may occur when moving over the image */
    e.preventDefault();
    /* Get the cursor's x and y positions: */
    pos = getCursorPos(e);
    /* Calculate the position of the lens: */
    x = pos.x - (lens.offsetWidth / 2);
    y = pos.y - (lens.offsetHeight / 2);
    /* Ensure the lens stays within the boundaries of the image: */
    if (x > img.width - lens.offsetWidth) {
      x = img.width - lens.offsetWidth;
    }
    if (x < 0) {
      x = 0;
    }
    if (y > img.height - lens.offsetHeight) {
      y = img.height - lens.offsetHeight;
    }
    if (y < 0) {
      y = 0;
    }
    /* Position the lens accordingly: */
    lens.style.left = x + "px";
    lens.style.top = y + "px";
    /* Show what the lens "sees": */
    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
  }

  function getCursorPos(e) {
    var a, x = 0,
      y = 0;
    e = e || window.event;
    /* Find the x and y positions of the image: */
    a = img.getBoundingClientRect();
    /* Calculate the cursor's x and y coordinates relative to the image: */
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /* Consider any page scrolling: */
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {
      x: x,
      y: y
    };
  }
}

* {
  box-sizing: border-box;
}

.d-flex {
  display: flex;
}

.img-zoom-container {
  position: relative;
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /* Set dimensions for the lens: */
  width: 40px;
  height: 40px;
}

.img-zoom-result {
  border: 1px solid #d4d4d4;
  /* Set size for the result div: */
  width: 300px;
  height: 300px;
}

<div id="container"></div>

Answer 2

You have the option to implement dynamic IDs for this task. I have devised a snippet that features 4 distinct images with varying IDs, and the zoom effect functions seamlessly.

I find it more convenient to approach it in this manner rather than modifying the zooming functionality for classes.

// presenting an array of images
// each with RANDOM IDs!
const images = [{
    id: Date.now() - 400,
    src: 'https://loremflickr.com/1200/960/girl/all?random=1'
  },
  {
    id: Date.now() - 200,
    src: 'https://loremflickr.com/1200/960/girl/all?random=2'
  },
  {
    id: Date.now() + 200,
    src: 'https://loremflickr.com/1200/960/girl/all?random=3'
  },
  {
    id: Date.now() + 400,
    src: 'https://loremflickr.com/1200/960/girl/all?random=4'
  },
];

// displaying the images dynamically
(function(images) {

  let html = ''
  images.forEach(image => {
    html += `
      <h2>ID: ${ image.id }</h2>
      <div class="img-zoom-container d-flex">
        <img id="${ image.id }" src="${image.src}" width="300" height="240" alt="Girl">
        <div id="${ image.id }-result" class="img-zoom-result"></div>
      </div>
      <hr />
    `
  })
  const container = document.getElementById('container')
  container.innerHTML = html

  const imagelist = document.querySelectorAll('.img-zoom-container > img')

  // adding event listener for the random IDs
  imagelist.forEach(image => {
    image.addEventListener('mouseenter', function(e) {
      imageZoom(e.target.id, `${ e.target.id }-result`)
    })
  })

})(images);


// code courtesy of W3 Schools
// https://www.w3schools.com/howto/howto_js_image_zoom.asp
function imageZoom(imgID, resultID) {
  var img, lens, result, cx, cy;
  img = document.getElementById(imgID);
  result = document.getElementById(resultID);
  /* Create lens: */
  lens = document.createElement("DIV");
  lens.setAttribute("class", "img-zoom-lens");
  /* Insert lens: */
  img.parentElement.insertBefore(lens, img);
  /* Calculate the ratio between result DIV and lens: */
  cx = result.offsetWidth / lens.offsetWidth;
  cy = result.offsetHeight / lens.offsetHeight;
  /* Set background properties for the result DIV */
  result.style.backgroundImage = "url('" + img.src + "')";
  result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
  /* Execute a function when someone moves the cursor over the image, or the lens: */
  lens.addEventListener("mousemove", moveLens);
  img.addEventListener("mousemove", moveLens);
  /* For touch screens as well: */
  lens.addEventListener("touchmove", moveLens);
  img.addEventListener("touchmove", moveLens);

  function moveLens(e) {
    var pos, x, y;
    /* Prevent any other actions that may occur when moving over the image */
    e.preventDefault();
    /* Get the cursor's x and y positions: */
    pos = getCursorPos(e);
    /* Calculate the position of the lens: */
    x = pos.x - (lens.offsetWidth / 2);
    y = pos.y - (lens.offsetHeight / 2);
    /* Ensure the lens stays within the boundaries of the image: */
    if (x > img.width - lens.offsetWidth) {
      x = img.width - lens.offsetWidth;
    }
    if (x < 0) {
      x = 0;
    }
    if (y > img.height - lens.offsetHeight) {
      y = img.height - lens.offsetHeight;
    }
    if (y < 0) {
      y = 0;
    }
    /* Position the lens accordingly: */
    lens.style.left = x + "px";
    lens.style.top = y + "px";
    /* Show what the lens "sees": */
    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
  }

  function getCursorPos(e) {
    var a, x = 0,
      y = 0;
    e = e || window.event;
    /* Find the x and y positions of the image: */
    a = img.getBoundingClientRect();
    /* Calculate the cursor's x and y coordinates relative to the image: */
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /* Consider any page scrolling: */
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {
      x: x,
      y: y
    };
  }
}

* {
  box-sizing: border-box;
}

.d-flex {
  display: flex;
}

.img-zoom-container {
  position: relative;
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /* Set dimensions for the lens: */
  width: 40px;
  height: 40px;
}

.img-zoom-result {
  border: 1px solid #d4d4d4;
  /* Set size for the result div: */
  width: 300px;
  height: 300px;
}

<div id="container"></div>

What are some creative ways to utilize Zoom for displaying a collection of images?

Answer №1

Similar questions

In PHP, a boolean variable will not display on the webpage when echoed

Upgrade to Bootstrap 5 - Implement Video Modal Feature

Which option offers better performance in Three.js: utilizing a sprite or a BufferedGeometry?

Unable to initiate any actions with vue-select

Node.js API requests often result in undefined responses

Chrome 83 is flagging required properties as undefined

The power of selenium meets the functionality of Javascript with the webdriver

Tips for incorporating a favicon in a React application

What could be causing this JS/jQuery to affect numerous inputs at once?

Smartlook fails to correctly store user consent

JavaScript generates a series of checkboxes dynamically, all lined up in a single row

The functionality of .attachClickHandler() is not maintained when the page is refreshed or redirected

Exploring the Process of Iterating Through a JSON Array in Angular

Sorting Tables through the Power of Drag and Drop

What exactly entails static site generation?

Node-RED experiences crashes while attempting to make HTTP requests to access a web service

Ways to enhance focus on childNodes using Javascript

Managing State in React: A Guide to Updating Child Component State from Parent Component

What steps can I take to address security issues related to iframes?

Contrasting the use of jQuery versus AJAX for updating static page text