PDA

View Full Version : Ultimate Fade-in slideshow



upf
11-08-2010, 08:31 PM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem:
Hi guys! The problem is that I have several popup windows on the website and the slideshow that I've created using scripts that I mentioned always appears on top of the all popup windows. The popup windows that I've created, I've used this very small tutorial (http://xara-users.info/demos/popup-youtube-with-close-button/index.htm).
U can see this problem in the example that I've created and uploaded on server. irakli-k.com/xara/index.htm

ddadmin
11-09-2010, 02:44 AM
The script gives the slideshow container a very high CSS z-index value (1000). To get your popup DIVs to show up above the slideshow, try giving them an even higher z-index value, for example, 2000:


<div id="popup" style="z-index:2000">pop up here</div>

upf
11-09-2010, 01:18 PM
Thank you for reply.

<div id="popup" style="z-index:2000">pop up here</div>
"Pop up here" you mean name of popup or entire code of popup? Like
<div id="fadeshow2"></div>
How do I know which is my popup?

Sorry for noob questions, it's first time that I'm using web programming.

jscheuer1
11-09-2010, 04:07 PM
What ddadmin is suggesting is to find the popup element and give it a z-index style of 2000.

Because you don't appear to know what code makes or governs the style of the popup, it would be hard for us to guess. It should be easy enough to see if we could see the live page though:

Please post a link to a page on your site that contains the problematic code so we can check it out.

Or if you just cut and paste the popup code from somewhere on the web, perhaps a link to where you got the popup code would be sufficient. A link to your live page would be better. It can just be an orphan page somewhere on your site/the web, doesn't have to be linked to or from your other pages. It just has to demonstrate the problem.

upf
11-09-2010, 07:52 PM
jscheuer1
Thank you for reply.
Here is an example of the problem http://irakli-k.com/xara/index.htm If you click on the click me button the window pops up but the slideshow appears on top of the popup, there should be close button but it's behind of the slideshow. This is only example, because the original is still in production , but basicly it will do the same thing - pupup window with close button and HTML placeholder.
Also you can download this example packed with win-rar form here http://irakli-k.com/xara/xara.rar

jscheuer1
11-10-2010, 02:37 PM
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):


<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:


<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:


<!--[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 (http://fancybox.net/)

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.

upf
11-10-2010, 08:35 PM
jscheuer1
Thank you very much for your help. It works now! But I'll try to use fancyBox script.

upf
11-12-2010, 06:38 PM
jscheuer1
Just one question. Is it possible to assign to open button close command? I mean in my website, using this code.

jscheuer1
11-13-2010, 01:30 AM
If the open button were to become a close button, what button will become the open button?

I realize this is probably not what you meant. But there are a number of possibilities. Could you be more specific?

upf
11-13-2010, 09:45 AM
I mean, if this button opens one layer :

<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>
how do I assign to the same button command that will close some other layer.
e.g. By clicking on button "A", will close "Layer1" and at the same time will open "Layer2".

Apologize for my bad English.

jscheuer1
11-14-2010, 04:20 AM
I'm not so sure that's not happening anyway. The way the current code is written together with the markup prevents one from clicking on another opener when one is open. You only gave me one opener anyway. But I can see that once you move off of it, none of the others nor it could be clicked until the present one is closed. You can click the same one again before moving off of it. If you do, it relaunches that one. So if you could click another, it might work out with no additional code.

BTW - the FancyBox script wouldn't have that problem. Opening a new FancyBox pop up closes any current one first. There are tons of these scripts around. FancyBox was just an idea I had because it uses jQuery which your page already has, and can do video. It can also be customized to look almost any way you like.

upf
11-14-2010, 12:25 PM
OK, Thank you very much for your help.
I'll try doing this using FuncyBox.

upf
11-14-2010, 09:21 PM
I found solution. It's possible to do in the program that I've used for building this kind of webpage - it's xara web designer 6. There is an option to do this using interface of program.