There are numerous techniques available to achieve the desired outcome using either pure JavaScript or jQuery.
After analyzing the HTML structure, it is evident that the data-key attribute plays a crucial role in determining the current image to be displayed within the gallery. This attribute establishes the connection between elements with classes ui-big-image, ui-thumbnail, and ui-article.
For elements with the class ui-big-image, they are initially hidden using the following CSS rule:
.ui-big-image {
opacity: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
The visibility of these elements is controlled by the CSS statement below:
.ui-big-image[data-active] {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
Similarly, elements with the class ui-article are first hidden with this CSS declaration:
.ui-article {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
To toggle the visibility of these elements, we utilize the .ui-article[data-active] CSS rule to dynamically adjust their appearance.
.ui-article[data-active] {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
An additional CSS declaration, ui-article:before, adds an empty section for hiding the image description. This content becomes visible with the help of the .ui-article[data-active]:before CSS rule.
https://i.sstatic.net/SDCgD.png
To enable interaction with thumbnails and navigation buttons, the data-active attribute within the mentioned classes needs to be toggled appropriately. The thumbnail event handling function can be defined as follows:
function setThumbnailAction() {
var uiThumbnailElements = document.getElementsByClassName("ui-thumbnail");
var i, len = uiThumbnailElements.length, thumbnail;
itemsInGallery = len - 1;
for (i = 0; i < len; i++) {
thumbnail = uiThumbnailElements[i];
thumbnail.onclick = function() {
key = this.dataset.key;
showImage();
}
}
}
This function retrieves the thumbnail key value, stores it in a global variable 'key', and then triggers the showImage() function.
In the showImage() function, we manipulate the data-active attribute to control the visibility of elements with CSS classes ui-big-image, ui-article, and ui-thumbnail, based on the current 'key' value obtained through the selector
div.ui-big-image[data-key=\"" + key + "\"]
. Initially, we clear the
data-active attribute using the
restoreGallery() function.
function showImage() {
restoreGallery("ui-big-image");
restoreGallery("ui-article");
restoreGallery("ui-thumbnail");
var image = document.querySelector("div.ui-big-image[data-key=\"" + key + "\"]");
image.dataset.active = "true";
var article = document.querySelector("article.ui-article[data-key=\"" + key + "\"]");
article.dataset.active = "true";
var uiThumbnail = document.querySelector("div.ui-thumbnail[data-key=\"" + key + "\"]");
uiThumbnail.dataset.active = "true";
}
The functionality can be previewed in action through these examples:
Using pure JavaScript: