OK, see the notes below for some explanation. What you need to do is add a class to the close button and one to the button that opens the pop up. If in your finished version you have more than one button to open the pop up with various contents, you may add the opener class to each of them (from your demo's source code, additions highlighted):
Code:
<a class="opener" href="javascript:xr_cpu(2)" onclick="return(xr_nn());">
<img class="xr_ap" src="index_htm_files/2.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 39px; top: 471px; width: 147px; height: 87px;"/>
</a>
and:
Code:
<a class="close" href="javascript:xr_ppc(%27xr_xp2%27);" onclick="return(xr_nn());">
<img class="xr_ap" src="index_htm_files/10.png" alt="" title="" onmousemove="xr_mo(this,2,event)" style="left: 302px; top: 75px; width: 60px; height: 19px;"/>
</a>
Then add this highlighted script near the end as shown:
Code:
<!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->
<script type="text/javascript">xr_aeh()</script>
<script type="text/javascript">
(function($){
var fs = $('#fadeshow1');
$('a.opener').click(function(){
fs.css({zIndex: -1}).mouseenter();
});
$('a.close').live('mousedown', function(){
fs.css({zIndex: 'auto'}).mouseleave();
});
})(jQuery);
</script>
</center>
</body>
</html>
Notes: That's an old, old pop up script, or at least is based upon one without much done to update it to modern practices. I'd suggest finding another more modern one like:
fancyBox
it also uses jQuery, so you would only need one external script tag to jQuery.
But there's a way as noted above, using the antiquated pop up script that you have. It's difficult to work with because it requires a visible stub in the markup from which it's launched. So we can't boost its z-index without obscuring the slideshow from the very beginning. It also uses mousedown and mouseup instead of the usual click events to work, and does so in such a way that makes modifying/adding to these events problematic.
It has other drawbacks - It uses browser sniffing, a couple of strategically placed initialization commands, and a lot of global variables. But these don't present problems integrating it with the slideshow. They could if other scripts are employed on the same page with it.
Ultimate Fade-in slideshow
Reply With Quote
Bookmarks