Title: Problem with jquery + plugin – opacity
Last modified: July 21, 2021

---

# Problem with jquery + plugin – opacity

 *  Resolved [dominikdevisu](https://wordpress.org/support/users/dominikdevisu/)
 * (@dominikdevisu)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/problem-with-jquery-plugin-opacity/)
 * I have one more question, because in my website at home page, im using pro version
   of your plugin [https://zolkiewskiego7.bielsko.pl/](https://zolkiewskiego7.bielsko.pl/).
   And I already I added 3 photos with marked areas and I want them to be displayed
   after pressing the buttons “Parter”, “Piętro I” and “Piętro II” I already used
   jquery and wrote the function but its not working because when I switch photos
   between buttons, it changes me opacity 0 in styles and i can only see one of 
   the three photos. Currently I tried the hot fix and instead of hide () and show()
   in jquery I use opacity 1. Thats how my jquery function looks like:
    jQuery(document).
   ready(function($){ $( “#hotspot-145, #hotspot-152” ).css(‘opacity’, ‘0’) $( “.
   parter” ).click(function(){ $( “#hotspot-145, #hotspot-152” ).css(‘opacity’, ‘
   0’) $( “#hotspot-125” ).css(‘opacity’, ‘1’) }); $( “.jeden” ).click(function(){
   $( “#hotspot-125, #hotspot-152” ).css(‘opacity’, ‘0’) $( “#hotspot-145” ).css(‘
   opacity’, ‘1’) }); $( “.dwa” ).click(function(){ $( “#hotspot-125, #hotspot-145”).
   css(‘opacity’, ‘0’) $(‘#hotspot-152’).css(‘opacity’, ‘1’) }); }); The problem
   with this solution is that I cannot rigidly set position: relative and negative
   margins, because the strokes in the photos do not work however, pictures are 
   displayed correctly.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fproblem-with-jquery-plugin-opacity%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  Plugin Contributor [Draw Attention Support](https://wordpress.org/support/users/wpdrawattention/)
 * (@wpdrawattention)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/problem-with-jquery-plugin-opacity/#post-14686607)
 * Hello [@dominikdevisu](https://wordpress.org/support/users/dominikdevisu/),
 * Thanks for reaching out and sharing what you’ve written so far!
 * First let me mention that Draw Attention sometimes has trouble working within
   tabs and layouts where it’s “hidden” on first page load. The reason behind this
   is that we run the hotspots.init() function on page load to display the image
   and it’s hotspots. And if the image is hidden that function doesn’t run.
 * Which is why your images appear to be missing when you try to click between the
   buttons. The function requires a page load. So to get the Draw Attention images
   to show between button clicks we’ll need to write some jQuery to load that function
   when the buttons are clicked.
 * Could you give this a try?
 *     ```
       jQuery('.parter, .jeden, .dwa').on('click', function(){
       	setTimeout(function() {
       		hotspots.init();
       	}, 1000);
       });
       ```
   
 * It looks like your current jQuery is adjusting the opacity of the image to display
   it on click of the button. But, we advise against using this method since setting
   the opacity to 0 actually has a purpose behind it. This makes it possible for
   us to get the correct size of the Draw Attention image. The actual image displays
   on top of the 0 opacity image.
 * I think this is why you were having issues with the margins.
 * Let me know if that helps 🙂

Viewing 1 replies (of 1 total)

The topic ‘Problem with jquery + plugin – opacity’ is closed to new replies.

 * ![](https://ps.w.org/draw-attention/assets/icon-256x256.png?rev=2888664)
 * [Interactive Image Map Plugin - Draw Attention](https://wordpress.org/plugins/draw-attention/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/draw-attention/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/draw-attention/)
 * [Active Topics](https://wordpress.org/support/plugin/draw-attention/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/draw-attention/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/draw-attention/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Draw Attention Support](https://wordpress.org/support/users/wpdrawattention/)
 * Last activity: [4 years, 10 months ago](https://wordpress.org/support/topic/problem-with-jquery-plugin-opacity/#post-14686607)
 * Status: resolved