How to set variable correctly when using "data-image"

Question

How to set variable correctly when using "data-image"

Coreysan 1,811

I'm working on the use of Modal in my MVC project. The View I have uses "onclick" to send a imagepath to Javascript, then the modal uses the ID value for setting the image path. All good.

However... now I have this issue when a user hovers over an image, it should display a larger image. The modal uses the following code:

                            <div class="product-zoom" data-image="imagezoom3" id="imagezoom3">
                                <img src="image3" id="image3" alt="">
                            </div>

Unfortunately, when I inspect the variable imagezoom3 for the data-image, it shows "imagezoom3" when it should be showing "\images\product_big.jpg".

Is this because of my coding, or because data-image is being used, and image paths have to be set differently?

Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff

2023-12-26T07:17:36.19+00:00

Hi,@Coreysan. Welcome to Microsoft Q&A. Is your project type an ASP.NET project?
Coreysan 1,811 Reputation points

2023-12-28T20:08:18.94+00:00

Yes it is. I downloaded a template with hard-coded image paths, and lots of Javascript. I've been converting the template for use with MVC, and I can pass variables to <img src>, but I can't seem to get a variable to work with data-image.

1 answer

Your answer

Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff

2023-12-26T07:17:36.19+00:00

Hi,@Coreysan. Welcome to Microsoft Q&A. Is your project type an ASP.NET project?
Coreysan 1,811 Reputation points

2023-12-28T20:08:18.94+00:00

Yes it is. I downloaded a template with hard-coded image paths, and lots of Javascript. I've been converting the template for use with MVC, and I can pass variables to <img src>, but I can't seem to get a variable to work with data-image.

Answer 1

Azar 29,520 MVP Volunteer Moderator

Hi

The data-image attribute is used to store custom data associated with an element, and its value should typically be a string that represents some data related to that element.

If you want to change the source of an image dynamically using JavaScript based on the hover effect, you should directly manipulate the src attribute of the image

Trythis updated code

<!-- HTML structure for the image and modal -->
<div class="product-thumbnail">
    <img src="default_image.jpg" id="thumbnailImage" alt="Thumbnail Image" onmouseover="showLargeImage()">
</div>

<!-- Modal -->
<div class="modal" id="myModal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <img src="" id="largeImage" alt="Large Image">
    </div>
</div>

<!-- JavaScript to handle the image change and modal display -->
<script>
    function showLargeImage() {
        // Get the thumbnail image element
        var thumbnailImage = document.getElementById("thumbnailImage");

        // Get the source of the thumbnail image
        var thumbnailSrc = thumbnailImage.src;

        // Set the source of the large image in the modal
        var largeImage = document.getElementById("largeImage");
        largeImage.src = thumbnailSrc;

        // Display the modal
        var modal = document.getElementById("myModal");
        modal.style.display = "block";
    }

    function closeModal() {
        // Hide the modal
        var modal = document.getElementById("myModal");
        modal.style.display = "none";
    }
</script>

If you find this helpful kindly accept the answer thanks much.

Coreysan 1,811 Reputation points

2023-12-26T01:14:02.4833333+00:00
Thank you Azar, for your help and input. I am a real beginner when it comes to JS, so your solution is great, but it's really over my head. Let me briefly show you the original code, and explain how I would like to change it.

I downloaded a template for a store. Then I modified a button so that when you click it, it will pass variables which contain 2 image paths. Like this:

<a type=button class="btn btn-primary" onclick="ShowImages('@p.pic1', '@p.pic2')" data-bs-toggle="modal" data-bs-target="#quickViewModal">

I then added some JS:

function ShowImages(pic1, pic2) { document.getElementById("Thumbnail").src = pic1; document.getElementById("Zoomimage").src = pic2; }

then I used the original code from the template, which looks like this:

<div class="product-zoom" data-image="\images\pic2.webp"> <img src="\images\pic1.webp" alt=""> </div>

When I tested this div with hard-coded paths, it works great! I can see pic1 in the modal, and when I hover, then I see pic2. So far it works great, but I can't use hard-coded image paths.

So I started getting into areas beyond my understanding. Here's what I did:

<div class="product-zoom" data-image="Zoomimage" id="Zoomimage"> <img src="Thumbnail" id="Thumbnail" alt=""> </div>

So this much will display the thumbnail, but not the zoomimage. It's because the string "Zoomimage" is just a string, not a path to an image. This might not work because there is other JS that manipulates the image for zooming, and it probably does things I don't understand.

But I wonder if there's a way to get this all to work.

What do you think?
Azar 29,520 Reputation points MVP Volunteer Moderator

2023-12-28T20:40:59.8933333+00:00
Hi again

It seems like the issue is with the data-image attribute in your modified code. The data-image attribute should contain the path to the image, not the string "Zoomimage." ill adjust your code to dynamically set the data-image attribute based on the paths you pass to the ShowImages function.

try this -Update the ShowImages function in your JavaScript to set the data-image

function ShowImages(pic1, pic2) { document.getElementById("Thumbnail").src = pic1; document.getElementById("Zoomimage").src = pic2; // Set the data-image attribute for the zoom div var zoomDiv = document.getElementById("Zoomimage"); zoomDiv.setAttribute("data-image", pic2); }

And change your HTML to initially set the data-image like below

<div class="product-zoom" data-image="" id="Zoomimage"> <img src="" id="Thumbnail" alt=""> </div>

I know this all sounds a lil confusing but once you do it right, you will rock. hehe

and if this helps kindly accept the answer thanks again.
Azar 29,520 Reputation points MVP Volunteer Moderator

2023-12-29T19:35:18.4166667+00:00

Checking if this helped, if it did kindly accept the answer thanks.

Share via

How to set variable correctly when using "data-image"

1 answer

Your answer