Ecommerce Shopify WordPress Discussion

Giving visible special sequence numbers to images in lightbox

A lightbox was shared on a site. I bought it and used it. It works just fine. But I want to give the images a sequence number. I gave the image alt tag a sequence number with PHP in the front end. It works dynamically. However, when you click on the images, the sequence number on the images in the working lightbox does not appear dynamically. I tried many methods with the increment operator but it doesn't work. I tried the increment operator in that file with PHP, this time lightbox does not work. lightbox code <?php add_action( 'wp_footer', function(){ if(!is_front_page() || !is_home() || !is_admin() ) { ?> <style> img{display: block;max-width: 100%;} .lightbox{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 999999; background-color: rgba(0, 0, 0, 0.75);display: flex;justify-content: center;align-items: center;} .lightbox-content{width: 1000px;margin: 0 auto;display: flex;align-items: center; justify-content: center;padding: 0 25px;user-select: none;} .lightbox-content img{height: 27rem;width: 100%;object-fit: contain;border-radius: 3px;} .lightbox-content i{color: white;font-size: 60px;cursor: pointer;flex-shrink: 0;} i.lightbox-prev, i.lightbox-next{padding: 30px 5px;} svg.lightbox-prev, svg.lightbox-next{pointer-events: none;} button.close{position: absolute;top: 5rem;border: none;background: none;color: #fff;font-size: 27px;} @media only screen and (min-width: 1200px){button.close{position: absolute;top: 5rem;right: 3rem;border: none;background: none;font-size: 2rem;color: #aaaaaa;}} </style> <script> window.addEventListener('load', function () { [...document.querySelectorAll('main figure a')].forEach(e => {if (e.href.split("/").at(-1).includes('.')) e.replaceWith(...e.childNodes); }) const Allimages = [...document.querySelectorAll('.wp-block-gallery img, .lightbox-img img')] const images = Allimages.filter( e => { return e.clientHeight > 150 } ) images.forEach(e => e.style.cursor = "zoom-in") array = [...images].forEach(item => item.addEventListener('click', handleCreateLightbox)) function handleCreateLightbox(e) { const linkImage = e.target.getAttribute('src') const imgAlt = e.target.getAttribute('alt') const code = `<div class="lightbox"> <button type='button' class='close' onclick='$(this).parent().remove();'>X Kapat</button> <div class="lightbox-content"> <i class="lightbox-prev"><svg class="lightbox-prev" width="22" viewBox="0 0 66.692 126.253" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g style="fill:#fff;fill-opacity:1;stroke:none;stroke-opacity:1"><path d="m360.731 229.075-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0-5.3 5.3-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z" style="fill:#fff;fill-opacity:1;stroke:none;stroke-opacity:1" transform="matrix(-.26458 0 0 .26458 96.472 0)"/></g></svg></i> <div class="card d-flex align-items-center"> <img src="${linkImage}" alt="${imgAlt}" class="lightbox-image" loading="lazy" /> <span class="small">İmage Number: ${imgAlt}</span> </div> <i class="lightbox-next"><svg class="lightbox-next" width="22" viewBox="0 0 66.692 126.253" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g style="fill:#fff;fill-opacity:1;stroke:none;stroke-opacity:1"><path d="m360.731 229.075-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0-5.3 5.3-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z" style="fill:#fff;fill-opacity:1;stroke:none;stroke-opacity:1" transform="matrix(.26458 0 0 .26458 -29.78 0)"/></g></svg></i> </div> </div>` document.body.insertAdjacentHTML('beforeend', code); } let index = 0 document.addEventListener('click', handleOutLightbox) function handleOutLightbox(e) { const lightImage = document.querySelector('.lightbox-image') let imageSrc = '' if (!lightImage) return if (e.target.matches('.lightbox')) { const body = e.target.parentNode body.removeChild(e.target) } else if (e.target.matches('.lightbox-next')) { imageSrc = lightImage.getAttribute('src') index = [...images].findIndex(item => item.getAttribute('src') === imageSrc) index = index + 1 firstImage = 0 if (index > images.length - 1) { index = firstImage } ChangeLinkImage(index, lightImage) } else if (e.target.matches('.lightbox-prev')) { imageSrc = lightImage.getAttribute('src') index = [...images].findIndex(item => item.getAttribute('src') === imageSrc) index = index - 1 lastImage = images.length - 1 if (index < 0) { index = lastImage } ChangeLinkImage(index, lightImage) } } function ChangeLinkImage(index, lightImage) { const newLink = [...images][index].getAttribute('src') lightImage.setAttribute('src', newLink) } }) </script> <?php } } ); ?> my frontend code <?php /*Template Name: gallery*/ if ( ! defined( 'ABSPATH' ) ) {exit;} get_header(); ?> <div class="container"> <?php $postData = get_post_meta( get_the_ID() ); $photos_query = $postData['gallery_data'][0]; $photos_array = unserialize($photos_query); $url_array = $photos_array['image_url']; if ( empty($url_array) ) { $url_array = array(); } $count = count($url_array); if( ! empty($url_array) ) { echo '<div class="row my-5">'; $j=1; for( $i=0; $i<$count; $i++ ){ $img_alt_name = 'image - ' . $j; ?> <div class="col-6 col-md-3 m-0 p-1 lightbox-img"> <img class="img-s img-cover" src="<?php echo $url_array[$i]; ?>" alt="<?php echo esc_html($img_alt_name); ?>" title="<?php echo esc_html($img_alt_name); ?>" loading="lazy" /> <span class="small">İmage Number: <?php echo $j++; ?></span> </div> <?php if ($i == 0) { $i=0; } } echo '</div>'; } ?> </div> <?php get_footer(); ?> How can I dynamically add the image alt tag or the alt tag that will be created separately? for example image-1 image-2 The person looking at the images in the lightbox should see a different unique code for each image at the bottom right or bottom left of the image. Please Help Me Updated Description: I think it would be more logical and practical to dynamically capture the name of the sub-feature of the image rather than giving a sequence number with a loop. I tried many methods, but it cannot dynamically retrieve the image's alt attribute name. I have created a unique ID to specify the alt attribute for each image in the template where the images will be displayed, and I want to use the alt attribute name of the image to display this ID with the image. Is there anyone who can help with this? I'm so stuck on this. can you help me please
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.