What is the best method for updating the data-src attribute for lazy-loading images?

I have a hover list box with links that, when visited, change the main image of the list box to a relevant image. However, I am using a lazy load plugin and want to change the image source using data-src instead of src. Unfortunately, it is not working as expected. How can I dynamically handle this?

Another thing I believe is possible but I'm not sure how to achieve it... When I leave the area, the images should revert to default, but I haven't been able to make it work.

This is my main structure:

HTML

<div class="tur-list-box">
  <!-- content here -->
</div>

and JS

// JavaScript code here
// More code...

If you hover over the image, you will see links that, when clicked, change the images. Click here to see the demo

javascriptjqueryhtmlcss

Answer №1

modify

$(this).parents(".tur-list-box").find("figure img").attr("src",getAttr);

to

$(this).parents(".tur-list-box").find("figure img").data("src",getAttr);

additional information available at data

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Activate automatic click or force trigger JavaScript function

In the MVC view I am working with, there is a form that allows for file submission. //Submit file <% using (Html.BeginForm("MethodName","ControllerName", FormMethod.Post, new { enctype = "multipart/form-data"})) { %> <input type=" ...

javascriptjqueryasp.netajaxasp.net-mvc-3

Guide to creating a Discord bot that replies privately to users without other channel members being able to see the messages

As a newcomer to Discord, I am attempting to create a bot that will respond to user commands by sending a reply that only the user who issued the command can see. However, I am struggling to figure out how to implement this feature. Below is the source c ...

javascriptnode.jsdiscorddiscord.jsbots

What could be causing my navbar to not be responsive on mobile devices?

I'm in need of assistance. When viewing my website in mobile mode, the collapse hamburger menu is hiding too far to the right. This issue is making the site look unresponsive, and I've been unable to find a solution. It seems like the problem sta ...

htmlcssgridbootstrap-5

Multi-dimensional array: Include an extra array if the desired value is not located

I am currently working on a project that involves using Google tables to create a report based on data retrieved from my MYSQL Database. The issue I'm encountering is that there are 5 header values: ['Call Disposition', 'Answered' ...

javascriptmysqlarraysgoogle-visualization

Unable to activate function when closing Vuetify v-alert

Is there a way to trigger a function when the Vuetify v-alert is closed? I have explored the documentation but haven't found any information on this specific functionality. In the codepen example, the dismissible attribute allows for closing the alert ...

javascriptvue.jsvuetify.jsalert

Swap out the image for a div element if the image is not found

Is there a way to accurately display an image if it's available, and use a div as a replacement if the image is not present? // How can I determine `imageExists` without encountering cross-origin issues? (imageExists) ? (<img class="avatar-img" sr ...

javascripthtmlajaxxmlhttprequestcross-domain

Is it possible to merge createStackNavigator with createBottomTabNavigator for enhanced navigation functionality

Current Situation : My app currently has three tabs for navigation (School, Admin, Family); I am now facing a challenge as I want to add additional screens that do not require tabs for navigation. These screens will be accessed using this.props.navigati ...

javascriptreactjsreact-nativereact-native-navigation

Steps to import an excel file by clicking a button in an Angular application

Our project requires displaying an Excel file when a menu button is clicked. https://i.sstatic.net/9tas1.png When a new tab is opened, I would like to showcase the Excel file that is saved on my personal computer. The format of the Excel file should resem ...

htmlangularjsexcel

Utilizing CSS Positioning in a Slidebar

Currently, I am working with Tailwind and reactJS. I have two separate jsx files - Navpanel.jsx & Home.jsx. The issue I am facing is that when I use a fixed position for the Home Text, it ends up overlapping with the navpanel. I have tried using block ins ...

cssreactjsflexboxtailwind-css

Changing the time format from hh:mm:ss to GMT in an Angular 2 application

Given Input:- Current time: 21:00:00 Desired Output:- Updated time: Wed Dec 20th, 2017 9:00pm GMT+0530 (IST) OR Updated time: 2017-12-20 21:00:00 ...

javascriptangulardatetime

Emphasize a thumbnail by decorating it when selected in the gallery display page

I have created a gallery.php file with the following code: <div id="galleryImage"> <ul> <li> <a href= "gallery.php?imgName='artistvan'"> <img src="thumbnail/artistvan.jpg" ti ...

javascriptphpjquerycss

Troubleshooting: jqGrid is not displaying the requested JSON information

I am implementing jqGrid in an ASP.NET page. Here is the structure in the .aspx page: <div id="divMy" style="width: 100%; overflow: auto;"> <div id="divMyTable" style="width: 97%; display: none;"> <table id="MyTable"> ...

javascriptjqueryajaxjsonjqgrid

AngularJS fails to prioritize the following element

Here is my HTML code: <div ng-app="app"> <form> <div class="form-group"> <label >Username</label> <input focus type="text" class="form-control" id="loginUserName" ng-model="userForm.crn" required/> ...

javascriptjqueryhtmlcssangularjs

The symbols $ and doc have been declared, however, their combination $(doc) remains undefined

Incorporating Bootstrap 4 has been successful for my project, including features that require javascript to function properly. However, upon adding the following code snippet to my HTML page: $(document).ready(function() {console.log("hi")) I encounter ...

javascriptjquerybootstrap-4

The attribute selector is malfunctioning

Currently, I am attempting to target img tags based on the alt attribute in order to correctly load a background-image on mobile devices. The issue I am encountering is that regardless of the combination of attribute selectors I use, it does not seem to w ...

imagecsscss-selectorsselector

Run the scripts that are returned from AJAX requests

Here's a helpful tip from Lucian Depold: "Instead of sending JavaScript code from PHP to JS, simply send a JSON object or array and execute each entry using the eval() function." Inside index.php, there is code that runs when the document is ready: ...

javascriptphpajaxreturnalert

Guide on how to include an .env file within an HTML script tag?

I am trying to protect my API Key when sending a request to the server by storing it in an .env variable. However, I am unsure how to access this variable within a script tag in HTML. Can anyone provide guidance on how to achieve this? ...

htmlnode.js

Visual element and form entry

I have a follow-up question regarding the same topic. How can I edit it to move up in the list or does that happen automatically? Now, onto the main question - I have an image and an input box both contained within a span, and I want to display them next ...

htmlcss

Concealing a vessel, refreshing the innerHTML content, and then revealing it once more

Is it possible to conceal a container, modify the innerHTML of said container, and then reveal the container again? It appears that accomplishing both actions simultaneously is proving to be tricky... For a visual example, check out this JSFiddle - https: ...

javascriptjqueryjquery-ui

JavaScript and Responsive Design Techniques

I'm struggling to create a responsive page that starts with a mobile-first approach, but I keep running into the same issue. When I have my dropdown menu in the mobile version, it looks good. However, when I try to switch it to the non-mobile version ...

javascripthtmlcss