I would use CSS to make the link a block element with a size specified equivalent to the size of the image, with the image set as the background in the CSS. Then set the alternative image as the background for the hover state.
eg:
in your page add the popup shortcode with a div inside:
[popup url="http://wordpress.org" scrollbars="yes" height="500" width="500" alt="my popup" title=""]<div class="myspopupimage"></div>[/popup]
In your child theme’s stylesheet or in a custom styles plugin, add the css rules:
.myspopupimage {
background-image: url(http://path.to/your-button-image.png);
display: block;
height: 20px;
width: 200px;
text-align: center;
margin: 0 auto;
}
.myspopupimage:hover {
background-image: url(http://path.to/your-button-hover-image.png);
}
Change the dimensions & the image paths as required.
Thread Starter
Donovan
(@beastcode)
Ok I have now done that. But that still didn’t work. Wanting to test again I just put a regular text link and that hasn’t worked either. So there’s obviously another plugin conflicting with this one. Or it could be the theme.
Thread Starter
Donovan
(@beastcode)
Ok. I’ve seemed to figure it out. You’re plugin isn’t compatible with the Avada theme which is weird, as that’s probably one of THE most popular themes out for WordPress when it comes to premium themes. Or perhaps it used to be compatible but an Avada update happened. Somewhat disappointing as this would have been perfect for what I wanted to use it for. Or will you be making this plugin compatible for Avada?
I suspect that the theme adds its own ‘popup’ shortcode
If this is the case, it is the theme that is doing it wrong, not the plugin, as themes should not provide shortcodes.
However I can probably add a feature to kill a theme’s ‘popup’ shortcode when the alligator popup plugin is active.
Thread Starter
Donovan
(@beastcode)
Ah I see. Well then that would be a good idea then to make it so more themes are compatible with your plugin if that’s the case. If you want me to I can send you over the theme for testing.
I’ve just uploaded a new version (1.3.0) of Alligator popup – please try this one.
Thread Starter
Donovan
(@beastcode)
Doesn’t look like WordPress has let it update yet to the new 1.3.0. Even here on the wordpress.org website. I’ll wait til it either lets me update the plugin to 1.3.0 or I’ll keep checking back here to see if I can download it.
Thanks for all your help and I’ll let you know the outcome.
I’ve not set this version as the latest stable version yet, which was an oversight, but probably for the best as it is working as expected on my dev site, but it could probably benefit from more testing.
You can try it after downloading it from: https://wordpress.org/plugins/alligator-popup/developers/ – other versions -> development version
Thread Starter
Donovan
(@beastcode)
Ok. I’ve installed the new version but that didn’t fix the problem as it’s still not showing with the theme activated. So it looks like it’s something else. I can always send you over the theme if you’d like if you’d like to take a look.
I have found some forum topics where this has been discussed previously and, and it seems that the issue is not due to the shortcode name but was due to the ‘popup’ class name being used by the theme.
I have updated the development version (now at v1.3.1) changed the classname used internally by in the plugin to ‘alligatorpopup’, but to retain backwards compatibility for people adding a popup without using the shortcode, I have also enabled the script to continue working with elements with the ‘popup’ class applied.
Can you try the new development version 1.3.1 please?
Thread Starter
Donovan
(@beastcode)
Ok. You are almost there it seems. Even my original code has the button show up and everything link it should when I switch the classname to ‘alligatorpopup’ with your new version. But when you click on the button that page doesn’t show in a pop-up, but it just goes directly to that page like it’s a regular link. This is the same way for just the regular text link also.
Are you not using the shortcode?
Please link to the page on your site where you are including the popup
Thread Starter
Donovan
(@beastcode)
I’ve tried both with the shortcode and the HTML way.
The website isn’t live but if you change your hosts file you can view the website. The info for the hosts file is:
65.111.162.193 hurricanecustomcanopies.com
And the URL is:
http://hurricanecustomcanopies.com/canopies/
You can see I have the button in there with the original code I used and it works fine with exception that you don’t get the popup. Then you have small text called ‘text’ underneath that with simple shortcode and it does the same thing.
As a troubleshooting measure I copied your button code into a page on my test site:
<center><a href="http://hurricanecustomcanopies.com/orderquote/10-x-10-canopy-order-inquiry/" class="alligatorpopup" data-height="500" data-width="525" data-scrollbars="0" alt="image"><img src="http://hurricanecustomcanopies.com/wp-content/uploads/2015/10/buttonhoverred.png" onmouseover="this.src='http://hurricanecustomcanopies.com/wp-content/uploads/2015/10/buttonhoverblue.png'" onmouseout="this.src='http://hurricanecustomcanopies.com/wp-content/uploads/2015/10/buttonhoverred.png'"></a></center>
This worked exactly as expected on my site.
On your site I can see that the alligator-popup/popup.js script is included, however as you mentioned, the popup isn’t happening. I suspect that this may be due to a javascript issue. If a script stalls and it runs before the code in popup.js, the code in the popup.js script may never be run. You over a dozen scripts loading on each page load, including some large ones, plus some embedded javascript.
To troubleshoot this, first temporarily deactivate all plugins except alligator popup and test to see whether that makes a difference. If so, this indicates a plugin issue. You can then activate the plugins one by one until the issue reappears to identify the plugin causing the issue.
