Toggle between images in Vue.js when an image is clicked

Question

Toggle between images in Vue.js when an image is clicked

Hey there, I'm pretty new to Vue and could use some assistance with implementing a certain logic.

I have a JSON file that contains information about polaroids I've taken, such as their IDs, names, image names, and descriptions. Here's a snippet:

[
{
    "id": "PRD1",
    "image": "polaroid_1.jpeg",
    "name": "Christmas - 2020",
    "description": "blah blah blah"
},

{
    "id": "PRD2",
    "image": "polaroid_2.jpeg",
    "name": "Lost Love - 2021",
    "description": "Memories of a relationship that never was."
},
...    
]

I have a component in which I use a v-for loop to render these images. Here's the full HTML code:

<template>
<div class="images-wrapper">
    <div class="images" v-for="polaroid in polaroids" :key="polaroid">
        <img class="polaroid-image" :src="getImgUrl(polaroid.image)"/>
        <div class="information-wrapper"> 
            <div class="polaroid-title">
                {{ polaroid.name }}
            </div>
            <div class="polaroid-description">
                {{ polaroid.description }}
            </div>
        </div>
    </div>
</div>

The images are displayed perfectly in a grid within my Vue app. However, I'm unsure how to implement the logic that allows for clicking on an image to replace it with another image from the assets folder (e.g., polaroid_0.jpeg), and display the name and description of the clicked image.

Any suggestions on how to achieve this?

EDIT - Clarification

@FayçalBorsali Apologies for any confusion. To clarify, I want to be able to click on an image in the grid and have it switch to a different image, while also showing additional text (name and description). If I click the image again, it should revert back to the original image. Is it possible to have multiple selected images at once? For example, clicking on two different images to replace them with another image, while keeping the third image unchanged.

javascript html css vue.js

Answer 1

Answer №1

It seems like you're looking to implement a toggle functionality for displaying images using a boolean property in each polaroid object. You can achieve this by using a combination of v-if and v-else directives in your template. Additionally, you can use a click event listener to switch the boolean value back and forth. The display of the information-wrapper can also be linked to the same boolean property to show/hide the information accordingly.

<template>
<div class="images-wrapper">
    <div class="images" v-for="polaroid in polaroids" :key="polaroid">
        <img v-if="polaroid.show" @click="polaroid.show = false" class="polaroid-image" :src="getImgUrl(polaroid.image)"/>
        <img v-else @click="polaroid.show = true" class="polaroid-image" :src="getImgUrl('polaroid_0.jpeg')"/>
        <div v-if="!polaroid.show" class="information-wrapper"> 
            <div class="polaroid-title">
                {{ polaroid.name }}
            </div>
            <div class="polaroid-description">
                {{ polaroid.description }}
            </div>
        </div>
    </div>
</div>

Here is an example of a new boolean property added to each polaroid object:

{
    "id": "PRD1",
    "image": "polaroid_1.jpeg",
    "name": "Natale - 2020",
    "description": "blah blah blah",
    "show": true
}

Answer 2

It seems like you're looking to implement a toggle functionality for displaying images using a boolean property in each polaroid object. You can achieve this by using a combination of v-if and v-else directives in your template. Additionally, you can use a click event listener to switch the boolean value back and forth. The display of the information-wrapper can also be linked to the same boolean property to show/hide the information accordingly.

<template>
<div class="images-wrapper">
    <div class="images" v-for="polaroid in polaroids" :key="polaroid">
        <img v-if="polaroid.show" @click="polaroid.show = false" class="polaroid-image" :src="getImgUrl(polaroid.image)"/>
        <img v-else @click="polaroid.show = true" class="polaroid-image" :src="getImgUrl('polaroid_0.jpeg')"/>
        <div v-if="!polaroid.show" class="information-wrapper"> 
            <div class="polaroid-title">
                {{ polaroid.name }}
            </div>
            <div class="polaroid-description">
                {{ polaroid.description }}
            </div>
        </div>
    </div>
</div>

Here is an example of a new boolean property added to each polaroid object:

{
    "id": "PRD1",
    "image": "polaroid_1.jpeg",
    "name": "Natale - 2020",
    "description": "blah blah blah",
    "show": true
}

Answer 3

Answer №2

If you're looking to achieve your desired outcome, there are several methods that could work, but I recommend the following:

Keep track of whether an image has been clicked or not (you could do this by adding a boolean field to each polaroid and toggling it whenever an image is clicked)
Make sure your :src is dynamic, which can be accomplished by either modifying the getImgUrl() function or by adding another field specifically for the selected image

For instance, your polaroids data could look like this:

[
{
    "id": "PRD1",
    "image": "polaroid_1.jpeg",
    "name": "Natale - 2020",
    "description": "blah blah blah",
    "show" : false,
    "clickedImage" : "polaroid_1.jpeg"
},

{
    "id": "PRD2",
    "image": "polaroid_2.jpeg",
    "name": "A love that never was - 2021",
    "description": "Before the first ever heartbreak of my life (the worst so far).",
    "show" : false,
    "clickedImage" : "polaroid_1.jpeg"
},
...    
]

Your template structure might look like this:

<template>
<div class="images-wrapper">
    <div class="images" v-for="polaroid in polaroids" :key="polaroid" @click="toggleImg(polaroid.id)">
        <img class="polaroid-image" :src="getImgUrl(polaroid)"/>
        <div class="information-wrapper"> 
            <div class="polaroid-title">
                {{ polaroid.name }}
            </div>
            <div class="polaroid-description">
                {{ polaroid.description }}
            </div>
        </div>
    </div>
</div>

And in your JavaScript code:

function getImgUrl(polaroid) {
  cont img = polaroid.show ? polaroid.clickedImg : polaroid.img;
  // Your current code
}

These examples demonstrate the general approach outlined in my first two suggestions

Answer 4

If you're looking to achieve your desired outcome, there are several methods that could work, but I recommend the following:

Keep track of whether an image has been clicked or not (you could do this by adding a boolean field to each polaroid and toggling it whenever an image is clicked)
Make sure your :src is dynamic, which can be accomplished by either modifying the getImgUrl() function or by adding another field specifically for the selected image

For instance, your polaroids data could look like this:

[
{
    "id": "PRD1",
    "image": "polaroid_1.jpeg",
    "name": "Natale - 2020",
    "description": "blah blah blah",
    "show" : false,
    "clickedImage" : "polaroid_1.jpeg"
},

{
    "id": "PRD2",
    "image": "polaroid_2.jpeg",
    "name": "A love that never was - 2021",
    "description": "Before the first ever heartbreak of my life (the worst so far).",
    "show" : false,
    "clickedImage" : "polaroid_1.jpeg"
},
...    
]

Your template structure might look like this:

<template>
<div class="images-wrapper">
    <div class="images" v-for="polaroid in polaroids" :key="polaroid" @click="toggleImg(polaroid.id)">
        <img class="polaroid-image" :src="getImgUrl(polaroid)"/>
        <div class="information-wrapper"> 
            <div class="polaroid-title">
                {{ polaroid.name }}
            </div>
            <div class="polaroid-description">
                {{ polaroid.description }}
            </div>
        </div>
    </div>
</div>

And in your JavaScript code:

function getImgUrl(polaroid) {
  cont img = polaroid.show ? polaroid.clickedImg : polaroid.img;
  // Your current code
}

These examples demonstrate the general approach outlined in my first two suggestions

Toggle between images in Vue.js when an image is clicked

Answer №1

Answer №2

Similar questions

Complications arising from IE when using strict doctype with CSS and jQuery

Seeking help with h2 headings, nested hyperlinks, and clickable images

What is the best way to centrally align a Card while keeping the text left-aligned?

Transform a row into a clickable element

The information returned to the callback function in Angular comes back null

Using VUE-JS to implement checkbox functionality with v-model

Receiving time slots on a bootstrap schedule

Mongoose documents are set to automatically be deleted after a duration of one month

What is the best way to use SQL and Flask to automatically fill out a form based on a selection made from a

Stylesheet failing to respond to CSS Media queries

Retrieve the initial 100 links using XPath and PHP

Is there a way to insert copied links onto separate lines?

How can jQuery be used to adjust the width and height of an iframe?

Is there a way to simulate a middle mouse click using Selenium and JavaScript?

Having trouble with NVM not working correctly in Ubuntu 21.04 Terminal?

Difficulty paginating jqgrid when using an array as the data source

Surround the image with horizontal links on each side

What is the best way to make img-fluid function properly within Bootstrap Carousel?

Steps for integrating a Facebook Messenger chatbot with a MongoDB database in order to submit requests and retrieve responses through conversations with the bot

Exploring the importance of defining a JSONP callback function