Problem with jquery + plugin – opacity

Resolved dominikdevisu
(@dominikdevisu)

4 years, 10 months ago

I have one more question, because in my website at home page, im using pro version of your plugin 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 to see the link]

Viewing 1 replies (of 1 total)

Plugin Contributor Draw Attention Support
(@wpdrawattention)

4 years, 10 months ago
Hello @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.