Adding ID selector to image chosen in Photo Module

[jlpeifer]

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?

(This is a follow-up question to this closed thread…
Reloading an image on interval)

[pross]

I you use the photo module WP will incude the image id in the markup

[jlpeifer]

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.

[pross]

url to the page? why do you need the attachment id?

[jlpeifer]

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.

Link to page… https://vistamarina.it/test/

[pross]

The attachment ID is there in a class, you can fetch that with jQuery quite easily but what do you plan on doing with that ID?

[jlpeifer]

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.

[pross]

Well you can either grab the srcset attribute then add your time string to the urls in it, or simply remove the srcset and sizes attributes

jQuery(document).ready( function() {
    var img = jQuery( '#myimg img' );
    var src = img.attr( 'src' );
    img.removeAttr( 'srcset' );
    img.removeAttr( 'sizes' );
	setInterval( function() {
        img.attr( 'src', src + '?' + new Date().getTime() );
    }, 2000 );
});

[jlpeifer]

Posting jibberish to keep this thread open a little longer. Coming back to it later today or tomorrow.

[jlpeifer]

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);
});