Flashfader vs. Lightbox
I’m using Lightbox and Flashfader at my site http://www.ericgooch.com.
When Lightbox is showing a large image and that image covers the flashfader images, the flash is drawn on top of the lightbox image. Is there a way to force Lightbox to draw on top of everything else?
this is covered in google, and on my site, which btw, comes up in the proper google search, however for simplicities sake..
I tried a Google for “Lightbox and Flashfader”, but only got comments on one or the other. And I am unfortunately not able to bring up your site…will keep trying!
Ahh…I see. it’s because the “larger image” is a script, but the flash image is, well, Flash.
Flash is *not* part of normal HTML as you think it. It’s outside of the DOM. It’s an object – not an image. Therefore, it will place itself on top of anything else on the page – because it’s not *really* a part of the page.
However, there is a simple way around it. You must add this to your code in the object/embed area:
<param name=”wmode” value=”transparent”>
and then in the line that starts
<embed src...>, you must add ‘wmode=”transparent”‘
I believe wmode=”transparent” doesn’t work in Linux though. Or does it?
Thanks Doodlebee…I’ve got the call to Flashfader in the sidebar like so:
<?php include (ABSPATH.'wp-content/flashfader/flashfaderhtml.txt'); ?>
and the embed src that you mentioned is in the plugin php like this:
width="'.$width.'" height="'.$height.'" id="flashfader" align=""><param name="movie" value="'.get_settings('siteurl').'/wp-content/plugins/flashfader.swf" /><param name="FlashVars" value="path2xml='.get_settings('siteurl').'/wp-content/flashfader/images.xml"><param name="quality" value="high" /><param name="bgcolor" value="'.$color.'" /><embed src="'.get_settings('siteurl').'/wp-content/plugins/flashfader.swf"
Should the lines you mentioned go in the sidebar, or the plugin? (I’m a total noob to this)
off my page (since you cant get to it):
The second problem involves how flash objects don’t handle the transparency. The fix for this is to assign the container for the flash object a z-index of 0
For instance, I put all my flash objects inside a <div> with the class “flashy”.
The CSS reads:
Then, you add an extra <param> tag to your flash object that reads,
<param name="wmode" value="transparent" />
Voila. Flash objects are now transparent like everything else. This trick was gleamed off the original Lightbox site linked above.
Way cool stuff.
In your case you ought to actually edit the plugin so that it includes that extra <param> tag without any extra editing on your part.
I really don’t know 🙂
And whooami – it is my understanding that placing the flash in a div with a z-index doesn’t matter in the least. Flash is out of the DOM scope, and therefore not really part of the HTML – it’s an object that has it’s own “policies” if you will. You can z-index it to hell, and it won’t budge from the top. It’s the param tag editing that does the trick – if you don’t have that, then nothing will work. Also, the need for the line in the embed tag is necessary in some browsers (I can’t remember which ones off the top of my head, though.)
Again, this is my understanding of how CSS related to objects like Flash, Quicktime and other such things, so don’t take my word as gospel on the fact. But if you know otherwise, I’d love to see some links to that info!
Oh, and Eric – what whooami said about changing your plugin. Normally, you’d just edit it right there in the param/embed tags – but if the theme uses a plugin for it, save yourself some future headaches and just do it there 🙂
Hmmm…thanks for the responses. I’ve added
<param name="wmode" value="transparent" />to both lines in the plugin that have any params, but it’s still showing on top.
I don’t suppose any of you brave and stalwart plugin writers could tweak that plugin so that it it’s transparent and doesn’t cause this conflict?
eric, which version of the plugin, and who’s the author? There are 3 lightbox plugins floating around, I think. I know that atleast 1 author was made aware and he might have updated his plugin (this issue got brought up via comments on the plugins permalink page).
Ill be more than happy to make the changes for you though, if there isnt an updated one available.
If you change the code in the plugin though, today, it wont affect posts you made yesterday. Make sure thats not what you are doing. You will need to re-edit the posts you included any flash in, and ‘pretend’ you are inserting the flash anew.
@doodlebee Im aware of all of that, I posted the ‘fix’ i found, and gave the reference.
Thanks whooami, the Lightbox plugin I’m using is Lightbox 2:
but I think the problem is with the Flashfader plugin:
as the flashfader is what’s drawing on top of the Lightbox image. (I’ve got a temporary post in place, at http://www.ericgooch.com and if you click on the thumbnail, when the larger image pops up, the Flashfader draws on top of it.)
I could easily be wrong though…maybe a different Lightbox plugin wouldn’t have the same problem?
yes, im sorry, youre right. its the flashfader plugin that will need the editing, All the same ill be more than willing to help with editing,
Like I said though, even if you correctly edit the plugin code, you may or may not see the changes immediately — I dont know. I would edit the code, and test it on another page, to see if it the new usage of the plugin is changed by the addition – You dont need lightbox o0n the page to test, you just need to look for the added line in your source.
byw, thats a very nice site you have 🙂
Im off to sleep but feel free to email me via the contact form on my site and if you need me to do the edits and test for ya.
Thanks for the offer to help whooami, unfortunately I still am having no luck connecting to your site. I’ve tried from work and from home…no luck. 8(
There were 2 places in the plugin where I added the param line
<param name=”wmode” value=”transparent”>
one was here:
width="'.$width.'" height="'.$height.'" id="flashfader" align=""><param name="movie" value="'.get_settings('siteurl').'/wp-content/plugins/flashfader.swf" /><param name="FlashVars" value="path2xml='.get_settings('siteurl').'/wp-content/flashfader/images.xml"><param name="quality" value="high" /><param name="bgcolor" value="'.$color.'" /><param name="wmode" value="transparent" /><embed src="'.get_settings('siteurl').'/wp-content/plugins/flashfader.swf"
and the other was here:
$tmpl = '<object type="application/x-shockwave-flash" data="'.get_settings('siteurl').'/wp-content/plugins/flashfader.swf" width="'.$width.'" height="'.$height.'"><param name="wmode" value="transparent" /><param name="bgcolor" value="'.$color.'" /><param name="movie" value="'.get_settings('siteurl').'/wp-content/plugins/flashfader.swf" /><param name="FlashVars" value="path2xml='.get_settings('siteurl').'/wp-content/flashfader/images.xml" /><param name="quality" value="high" /></object>';
As you can see, I’m guessing as to whether or not I added these at the right place.
If you get the chance to download the Flashfader plugin, it’s lines 167 and 178.
Take a look at http://dark-code.bulix.org/2texfm-15637
The two additions are at lines 172 and 182 respectively
Note also, that I changed the order some in that second blob of code simply because I didnt like how late the plugin was actually defining the movie parameter, and seperated things out by line just to make viewing easier for you.
Unfortunately, you’ll play hell copying and pasting those 2 areas because of the line number insertion that pastebin does, but atleast you’ll see better.
I think my problem is realated to the one discussed here.
I use use many videos from dailymotion.com in my blog and also the wp-lightbox-2 extensively. The problem is that the videos are flash, so if I start playing one then pause, and then view a lightbox image, the video will appear on top of the lightbox.
I also use an mp3 player called the Dewplayer with the same problem with Lightbox.
Is there a way to solve this? If I need to modify anything, is it the dailymotion player or the lightbox?
the fix is already stated above. It’s a matter of editing whatever you are using to insert the flash object, plugin, your own code, whatever it is.
I know absolutely nothing about dewplayer, but if its creating a flash object also than that plugin needs editing as well.
- The topic ‘Flashfader vs. Lightbox’ is closed to new replies.