No need for jQuery with this scrolling image gallery

Question

No need for jQuery with this scrolling image gallery

I recently created a horizontal scrolling image gallery with thumbnails underneath. The goal is to click on a thumbnail and have the corresponding image scroll into view.

Here's the HTML setup:

<div class="images_container">
  <img id="image_1" src="/image1.jpg">
  <img id="image_2" src="/image2.jpg">
  <img id="image_3" src="/image3.jpg">
</div>

<div class="images_container thumbnails">
  <a href="#image_1"><img src="/image1.jpg" class="thumbnail"></a>
  <a href="#image_2"><img src="/image2.jpg" class="thumbnail"></a>
  <a href="#image_3"><img src="/image3.jpg" class="thumbnail"></a>
</div>

And here's the CSS used:

.images_container {
  overflow-x: scroll;
  overflow-y: hidden;
  max-height: 50rem;
  white-space: nowrap;
}

.images_container.thumbnails {
  max-height: 10rem;
}

.images_container img {
  vertical-align: top;
  height: 50rem;
}

.images_container.thumbnails img {
  height: 10rem;
}

While this setup functions well, there is an issue with jumping to the correct image when clicking on a thumbnail. Sometimes, if the image is slightly within the visible viewport, it won't jump directly to it. This can be frustrating for users trying to navigate quickly.

To solve this problem, I am looking into using JavaScript to smoothly scroll the entire image into view upon clicking its thumbnail. Since jQuery isn't available for this project, I'll need to rely solely on JavaScript to implement this feature.

javascript html css image

Answer 1

Answer №1

If you want to achieve this without altering the CSS, one solution is to add an ID in the HTML and then call a scrollTo function:

<script>

    function scrollTo(image_id){
        var topLeft = document.getElementById(image_id).offsetTop;
        document.getElementById('container').scrollLeft = topLeft;
    }


</script>
<div id="container" class="images_container">
  <img id="image_1" src="/image1.jpg" height="500px" width="500px">
  <img id="image_2" src="/image2.jpg"  height="500px" width="500px">
  <img id="image_3" src="/image3.jpg"  height="500px" width="500px">
</div>

<div class="images_container thumbnails">
  <a href="#image_1"><img src="/image1.jpg" class="thumbnail" onclick="scrollIntoView('image_1')"></a>
  <a href="#image_2"><img src="/image2.jpg" class="thumbnail" onclick="scrollIntoView('image_2')"></a>
  <a href="#image_3"><img src="/image3.jpg" class="thumbnail" onclick="scrollIntoView('image_3')"></a>
</div>

Answer 2

If you want to achieve this without altering the CSS, one solution is to add an ID in the HTML and then call a scrollTo function:

<script>

    function scrollTo(image_id){
        var topLeft = document.getElementById(image_id).offsetTop;
        document.getElementById('container').scrollLeft = topLeft;
    }


</script>
<div id="container" class="images_container">
  <img id="image_1" src="/image1.jpg" height="500px" width="500px">
  <img id="image_2" src="/image2.jpg"  height="500px" width="500px">
  <img id="image_3" src="/image3.jpg"  height="500px" width="500px">
</div>

<div class="images_container thumbnails">
  <a href="#image_1"><img src="/image1.jpg" class="thumbnail" onclick="scrollIntoView('image_1')"></a>
  <a href="#image_2"><img src="/image2.jpg" class="thumbnail" onclick="scrollIntoView('image_2')"></a>
  <a href="#image_3"><img src="/image3.jpg" class="thumbnail" onclick="scrollIntoView('image_3')"></a>
</div>

Answer 3

Answer №2

In order to maintain a cleaner DOM structure, I have come up with a solution that only requires the addition of some JavaScript code.

var elements = document.getElementsByClassName("thumbnail");
for (var index = 0; index < elements.length; index++) {
   elements[index].onclick = function(event) {
      event.preventDefault();
      event.stopPropagation();
      var id = this.parentNode.href.substr(this.parentNode.href.lastIndexOf('/') + 2);
      var value = document.getElementById(id).getBoundingClientRect().left;
      document.getElementsByClassName("images_container")[0].scrollLeft += value;
   }
}

Check it out on jsfiddle

Answer 4

In order to maintain a cleaner DOM structure, I have come up with a solution that only requires the addition of some JavaScript code.

var elements = document.getElementsByClassName("thumbnail");
for (var index = 0; index < elements.length; index++) {
   elements[index].onclick = function(event) {
      event.preventDefault();
      event.stopPropagation();
      var id = this.parentNode.href.substr(this.parentNode.href.lastIndexOf('/') + 2);
      var value = document.getElementById(id).getBoundingClientRect().left;
      document.getElementsByClassName("images_container")[0].scrollLeft += value;
   }
}

Check it out on jsfiddle

Answer 5

Answer №3

My approach to creating a scrolling gallery involves minimal use of JavaScript. By replacing the .active class with the :target pseudo-selector, you can eliminate the need for JavaScript entirely. I prefer using JavaScript in this scenario for easier demonstration through a fiddle.

function removeClass(element, className) {
  var classes = element.className.split(' ');
  var key = classes.findIndex(function(name) {
    return name == className
  });
  classes.splice(key, 1);
  element.className = classes.join(' ');
}

function addClass(element, className) {
  var classes = element.className.split(' ');
  classes.push(className);
  element.className = classes.join(' ');
}

setInterval(function() {
  var current = document.querySelector('.images .image.active');
  var next = current.nextElementSibling;

  if (!next) {
    next = document.querySelector('.images .image:first-child');
  }

  removeClass(current, 'active');
  addClass(next, 'active');
}, 1500);

body {
  margin: 0;
  padding: 0;
  width: 500px;
  height: 500px;
}

.images {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: hidden;
}

.image {
  width: 100%;
  height: 100%;
  top: 0px;
  position: absolute;
  left: -100%;
  float: left;
  transition: 1s;
}

.image.active {
  left: 0%;
}

.image.active ~ .image {
  left: 100%;
}

.black {
  background-color: black;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

<div class='images'>
  <div class='image black active'></div>
  <div class='image red'></div>
  <div class='image blue'></div>
  <div class='image yellow'></div>
</div>

The concept is based on setting the div.images container dimensions and positioning the images inside it accordingly. Initially, all .image elements are set to left: -100% to keep them off-screen to the left. The .image.active class is then set to left: 0 to display the image on screen. Using the ~ selector, we define that sibling elements appearing after the current one (.image.current ~ .image) should be positioned at left: 100%, moving them completely off-screen to the right. With the addition of a transition effect, we achieve a purely CSS-based scrolling gallery where JavaScript simply manages the active image which can be replaced by :target for alternative functionality.

I opted for using div elements instead of img tags to demonstrate with background colors easily, but this approach also works effectively with images by placing an <img> tag within each

<div class='image'></div>

.

Answer 6

My approach to creating a scrolling gallery involves minimal use of JavaScript. By replacing the .active class with the :target pseudo-selector, you can eliminate the need for JavaScript entirely. I prefer using JavaScript in this scenario for easier demonstration through a fiddle.

function removeClass(element, className) {
  var classes = element.className.split(' ');
  var key = classes.findIndex(function(name) {
    return name == className
  });
  classes.splice(key, 1);
  element.className = classes.join(' ');
}

function addClass(element, className) {
  var classes = element.className.split(' ');
  classes.push(className);
  element.className = classes.join(' ');
}

setInterval(function() {
  var current = document.querySelector('.images .image.active');
  var next = current.nextElementSibling;

  if (!next) {
    next = document.querySelector('.images .image:first-child');
  }

  removeClass(current, 'active');
  addClass(next, 'active');
}, 1500);

body {
  margin: 0;
  padding: 0;
  width: 500px;
  height: 500px;
}

.images {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: hidden;
}

.image {
  width: 100%;
  height: 100%;
  top: 0px;
  position: absolute;
  left: -100%;
  float: left;
  transition: 1s;
}

.image.active {
  left: 0%;
}

.image.active ~ .image {
  left: 100%;
}

.black {
  background-color: black;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

<div class='images'>
  <div class='image black active'></div>
  <div class='image red'></div>
  <div class='image blue'></div>
  <div class='image yellow'></div>
</div>

The concept is based on setting the div.images container dimensions and positioning the images inside it accordingly. Initially, all .image elements are set to left: -100% to keep them off-screen to the left. The .image.active class is then set to left: 0 to display the image on screen. Using the ~ selector, we define that sibling elements appearing after the current one (.image.current ~ .image) should be positioned at left: 100%, moving them completely off-screen to the right. With the addition of a transition effect, we achieve a purely CSS-based scrolling gallery where JavaScript simply manages the active image which can be replaced by :target for alternative functionality.

I opted for using div elements instead of img tags to demonstrate with background colors easily, but this approach also works effectively with images by placing an <img> tag within each

<div class='image'></div>

.

No need for jQuery with this scrolling image gallery

Answer №1

Answer №2

Answer №3

Similar questions

Opening the media library in Wordpress through the Angular JS function triggered by an ng-click event

Deciding whether an array forms a chain of factors

Data is persisted in the database even when an error occurs

Retrieve the attribute value from an HTML element in a JSON response using JavaScript

When retrieving the card in React, only the first element is affected by the .map function

CryptoJS consistently produces identical hash values for distinct files

Tips for executing specific javascript on small screens or mobile devices

Values in Vuex do not get updated by getters

Extracting the console.log method from the console

Tips on altering the location path when redirecting to a different page using window.location?

importing files from the local directory in Django

Unable to call an object that may be 'undefined': Utilizing a function with a return object that includes asynchronous functions as properties

Ways to bypass HostListener in Angular 2

Fetching Data Using Asynchronous API Calls

Seeking advice on removing the initial blank space from a dropdown value in Angular.js

DANGEROUS EVALUATION: Tips for Safe Replacement

"Despite the null date in Node.js, the validation for expiration dates less than Date.now() is still being enforced

sinon: Techniques for stubbing an entire class as opposed to singular methods

Include personalized headers to the 'request'

What is an alternative way to rewrite this regular expression without relying on the deprecated API?