I am placing an image onto a page using BB’s Photo Module. I need to be able to tag that image with a specific ID selector. The module provides an option to add and ID selector to the container where the image is placed, but not to the image itself.
Is there a way to give the photo itself an ID selector of my choosing?
I couldn’t find an ID selector associated with img. I could find a Class selector and tried to modify the jQuery script to target the class, but couldn’t get it to work.
This thread is a follow-up to the one I previously started about updating and image on a page on an interval. You and I had discussed a jQuery option to do this using an ID selector (I was coding this manually in an HTML module). You suggested that I use the Photo module instead and target the ID assigned to the image by that module (the img itself not the container). Sadly, this hasn’t worked out so well. There is no ID selector associated with the img. There is a Class selector which I’ve tried to target, but the image refresh doesn’t seem to work with that.
Sorry, I’m showing my CSS illiteracy. All I see in the IMG tag is a class selector (or 3 of them?) “fl-photo-img.wp-image-642.size-full”. My intent is to do the same as I did with the HTML module in the thread I previously noted. I have an image that gets updated every few seconds on my server. I want the jQuery code to refresh the image (not the page) every few seconds. I only want to load the original image… not all the resized varieties.
Thanks for the assist. For anyone trying to solve a similar issue in the future, here’s the Javascript code that finally did the trick.
jQuery(document).ready(function() {
// Select the specific image using its class
var img = jQuery('img.fl-photo-img.wp-image-642');
// Store the original src
var src = img.attr('src');
// Remove srcset and sizes attributes
img.removeAttr('srcset');
img.removeAttr('sizes');
// Set an interval to refresh the image every 5 seconds
setInterval(function() {
// Update the src with a timestamp to force refresh
img.attr('src', src + '?' + new Date().getTime());
}, 5000);
});