# Adding ID selector to image chosen in Photo Module

**URL:** <https://community.wpbeaverbuilder.com/t/adding-id-selector-to-image-chosen-in-photo-module/18970>\
**Category:** Beaver Builder\
**Tags:** beaver-builder\
**Created:** [September 23, 2024, 6:07am UTC](https://community.wpbeaverbuilder.com/t/adding-id-selector-to-image-chosen-in-photo-module/18970 "2024-09-23T06:07:30Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![jlpeifer](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/j/f9ae1b/32.png) [@jlpeifer](https://community.wpbeaverbuilder.com/u/jlpeifer)\
**Post date:** [September 23, 2024, 6:07am UTC](https://community.wpbeaverbuilder.com/t/adding-id-selector-to-image-chosen-in-photo-module/18970/1 "2024-09-23T06:07:30Z")

</div>

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](https://community.wpbeaverbuilder.com/t/reloading-an-image-on-interval/18952))

---

<div class="post-metadata">

**Author:** ![pross](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pross/32/883_2.png) [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Post date:** [September 23, 2024, 11:48am UTC](https://community.wpbeaverbuilder.com/t/adding-id-selector-to-image-chosen-in-photo-module/18970/2 "2024-09-23T11:48:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jlpeifer](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/j/f9ae1b/32.png) [@jlpeifer](https://community.wpbeaverbuilder.com/u/jlpeifer)\
**Post date:** [September 24, 2024, 7:44am UTC](https://community.wpbeaverbuilder.com/t/adding-id-selector-to-image-chosen-in-photo-module/18970/3 "2024-09-24T07:44:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![pross](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pross/32/883_2.png) [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Post date:** [September 24, 2024, 11:28am UTC](https://community.wpbeaverbuilder.com/t/adding-id-selector-to-image-chosen-in-photo-module/18970/4 "2024-09-24T11:28:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jlpeifer](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/j/f9ae1b/32.png) [@jlpeifer](https://community.wpbeaverbuilder.com/u/jlpeifer)\
**Post date:** [September 24, 2024, 12:19pm UTC](https://community.wpbeaverbuilder.com/t/adding-id-selector-to-image-chosen-in-photo-module/18970/5 "2024-09-24T12:19:41Z")

</div>

This thread is a follow-up to the one I previously started about [updating and image on a page on an interval](https://community.wpbeaverbuilder.com/t/reloading-an-image-on-interval/18952). 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/](https://vistamarina.it/test/)

---

<div class="post-metadata">

**Author:** ![pross](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pross/32/883_2.png) [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Post date:** [September 24, 2024, 12:45pm UTC](https://community.wpbeaverbuilder.com/t/adding-id-selector-to-image-chosen-in-photo-module/18970/6 "2024-09-24T12:45:22Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jlpeifer](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/j/f9ae1b/32.png) [@jlpeifer](https://community.wpbeaverbuilder.com/u/jlpeifer)\
**Post date:** [September 26, 2024, 9:10am UTC](https://community.wpbeaverbuilder.com/t/adding-id-selector-to-image-chosen-in-photo-module/18970/7 "2024-09-26T09:10:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![pross](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pross/32/883_2.png) [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Post date:** [September 26, 2024, 1:05pm UTC](https://community.wpbeaverbuilder.com/t/adding-id-selector-to-image-chosen-in-photo-module/18970/8 "2024-09-26T13:05:57Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![jlpeifer](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/j/f9ae1b/32.png) [@jlpeifer](https://community.wpbeaverbuilder.com/u/jlpeifer)\
**Post date:** [September 27, 2024, 10:48am UTC](https://community.wpbeaverbuilder.com/t/adding-id-selector-to-image-chosen-in-photo-module/18970/9 "2024-09-27T10:48:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jlpeifer](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/j/f9ae1b/32.png) [@jlpeifer](https://community.wpbeaverbuilder.com/u/jlpeifer)\
**Post date:** [September 28, 2024, 12:33pm UTC](https://community.wpbeaverbuilder.com/t/adding-id-selector-to-image-chosen-in-photo-module/18970/10 "2024-09-28T12:33:49Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![system](https://community.wpbeaverbuilder.com/uploads/default/original/2X/9/9db1b183a7ea1efa26199a2a2b3511d742473dae.png) [@system](https://community.wpbeaverbuilder.com/u/system)\
**Post date:** [September 30, 2024, 12:34am UTC](https://community.wpbeaverbuilder.com/t/adding-id-selector-to-image-chosen-in-photo-module/18970/11 "2024-09-30T00:34:26Z")

</div>

This topic was automatically closed 36 hours after the last reply. New replies are no longer allowed.