Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Post History

22%

+0 −5

Q&A How to Select From Multiple images to display main product image? [closed]

Below are the links to code for my project. HTML CSS JavaScript I have created Magnifying Image which was successful now I am trying to add multiple images which can be display in main produc...

0 answers · posted 11mo ago by abhishek27suvarna‭ · edited 9mo ago by CPlus‭

Question javascript html css

#3: Post edited by

CPlus‭ · 2024-04-03T07:40:04Z (9 months ago)
Improved Formatting

Copy Link

Raw

Markdown

~~How to Select From Multiple images to display main product image.~~

How to Select From Multiple images to display main product image?

~~Below are the links to code for my project. ~~
~~[HTML](https://drive.google.com/file/d/1D0knOWuofJdJGav7wUFHXEvs4xMkuaFY/view?usp=drive_link) ~~
~~[CSS](https://drive.google.com/file/d/1ikQMoTDXzt-Q2RNdS1AO1Jpu9bLd_3GD/view?usp=drive_link) ~~
~~[Js Script](https://drive.google.com/file/d/1Kp5yHeJsRnyBhW4e9zE5ciV70Ee-MmTe/view?usp=drive_link)~~
~~![page example](https://software.codidact.com/uploads/o5djdno504wbnba6n6rq50338040)~~
I have created Magnifying Image which was successful now i am trying to add multiple images which can be display in main product image on mouse selecting image i created below code which i commented in js file
~~/* window.addEventListener('DOMContentLoaded',() =>{~~
allHoverImages[0].parentElement.classList.add('active')});
allHoverImages.forEach((image) => {
~~image.addEventListener('mouseover', () =>{~~
product-img.querySelector('img').src = image.src;
});
});
*/

Below are the links to code for my project.
[HTML](https://drive.google.com/file/d/1D0knOWuofJdJGav7wUFHXEvs4xMkuaFY/view?usp=drive_link)
[CSS](https://drive.google.com/file/d/1ikQMoTDXzt-Q2RNdS1AO1Jpu9bLd_3GD/view?usp=drive_link)
[JavaScript](https://drive.google.com/file/d/1Kp5yHeJsRnyBhW4e9zE5ciV70Ee-MmTe/view?usp=drive_link)
![Page example](https://software.codidact.com/uploads/o5djdno504wbnba6n6rq50338040)
I have created Magnifying Image which was successful now I am trying to add multiple images which can be display in main product image on mouse selecting image I created below code which I commented in the JS file.
```
window.addEventListener('DOMContentLoaded', () => {
allHoverImages[0].parentElement.classList.add('active')});
allHoverImages.forEach((image) => {
image.addEventListener('mouseover', () => {
product-img.querySelector('img').src = image.src;
});
});
```

javascript html css

#2: Question closed by

ArtOfCode‭ · 2024-01-26T16:00:06Z (11 months ago)

Copy Link

Raw

Markdown

#1: Initial revision by

abhishek27suvarna‭ · 2024-01-26T06:58:12Z (11 months ago)

Copy Link

Raw

Markdown

How to Select From Multiple images to display main product image.

Below are  the links to code for my project.<br />
[HTML](https://drive.google.com/file/d/1D0knOWuofJdJGav7wUFHXEvs4xMkuaFY/view?usp=drive_link)<br />
[CSS](https://drive.google.com/file/d/1ikQMoTDXzt-Q2RNdS1AO1Jpu9bLd_3GD/view?usp=drive_link)<br />
[Js Script](https://drive.google.com/file/d/1Kp5yHeJsRnyBhW4e9zE5ciV70Ee-MmTe/view?usp=drive_link)
![page example](https://software.codidact.com/uploads/o5djdno504wbnba6n6rq50338040)

I have created Magnifying Image which was successful now i am trying to add multiple images which can be display in main product image on  mouse selecting image i created below code which i commented in js file 

/* window.addEventListener('DOMContentLoaded',() =>{
    allHoverImages[0].parentElement.classList.add('active')});

allHoverImages.forEach((image) => {
    image.addEventListener('mouseover', () =>{
        product-img.querySelector('img').src = image.src;
    });
});
 */

javascript html css

Communities

Post History