WordPress.org

Ready to get started?Download WordPress

Forums

Flashfader vs. Lightbox (25 posts)

  1. EricG
    Member
    Posted 7 years ago #

    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?

    Thanks...

  2. whooami
    Member
    Posted 7 years ago #

    this is covered in google, and on my site, which btw, comes up in the proper google search, however for simplicities sake..

    http://www.village-idiot.org/search/lightbox%20fix

  3. EricG
    Member
    Posted 7 years ago #

    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!

    Thanks

  4. Doodlebee
    Member
    Posted 7 years ago #

    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"'

  5. ZMAng
    Member
    Posted 7 years ago #

    I believe wmode="transparent" doesn't work in Linux though. Or does it?

  6. EricG
    Member
    Posted 7 years ago #

    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)

  7. whooami
    Member
    Posted 7 years ago #

    eric,

    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:

    .flashy {
    z-index: 0;
    }

    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.

  8. Doodlebee
    Member
    Posted 7 years ago #

    ZM -

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

  9. EricG
    Member
    Posted 7 years ago #

    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?

  10. whooami
    Member
    Posted 7 years ago #

    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.

    But ..

    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.

  11. EricG
    Member
    Posted 7 years ago #

    Thanks whooami, the Lightbox plugin I'm using is Lightbox 2:
    http://www.m3nt0r.de/blog/lightbox-wordpress-plugin/

    but I think the problem is with the Flashfader plugin:
    http://www.lynk.de/wordpress/flashfader/

    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?

  12. whooami
    Member
    Posted 7 years ago #

    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.

  13. EricG
    Member
    Posted 7 years ago #

    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.

    Thanks!

  14. whooami
    Member
    Posted 7 years ago #

    Eric,

    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.

  15. flush
    Member
    Posted 7 years ago #

    Hi,
    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?
    Thanks

  16. whooami
    Member
    Posted 7 years ago #

    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.

  17. EricG
    Member
    Posted 7 years ago #

    It worked!!! Whooami, you are the most awesome of all awesomness.

    Thanks a ton for taking the time to do that, it's really appreciated.

  18. whooami
    Member
    Posted 7 years ago #

    eric, if you edit the plugin correctly, it will work -- Ive demonstrated it successfully on my site. I have a flash object in my header :)

    Im curious about your inability to view my site though, since you mentioned trying from work as well. Do you use proxies? Care to share the domains or ips?

    edit: wonderful! glad to hear that :)

  19. flush
    Member
    Posted 7 years ago #

    You mean the code I use in my post to call the function? Or the code of the plugin itself?

    This is how I call the flash mp3 player:
    <object type="application/x-shockwave-flash" data="http://raphaella.co.kr/blog/musique/dewplayer.swf?son=http://raphaella.co
    .kr/blog/musique/outtonight.mp3" height="20" width="200"><param name="movie" value="http://raphaella.co.kr/blog/musique/
    dewplayer.swf?son=http://raphaella.co.kr/blog/musique/outtonight.mp3" /></object>

    And this is how I call the dailymotion videos:
    <div style="margin-bottom: 25px; margin-top: 25px; text-align: left; width: 320px"><iframe src="http://www.dailymotion.com/blog/
    video/69213?key=5lri5uvvf2jc9lp8d4o6jie9ebbplijf8r1e1pu7" style="width:320px;height:256px;border:none;margin:0px;" width="320"
    height="256" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" id="i5lri5uvvf2jc9lp8d4o6jie9ebbplijf8r1e1pu7"
    >Dailymotion blogged video</iframe>
    <span style="margin-top:0px;"><a href="http://www.dailymotion.com/video/x1hel_emilie-simon-fleur-de-saison">Emilie Simon -
    Fleur de Saison</a></span></div>

  20. whooami
    Member
    Posted 7 years ago #

    flush, if thats what you are actually writing into your "post" box, then yes, you need to include what I posted above:

    <param name="wmode" value="transparent" />

    Note that doodleby used fancy quotes, and copying and pasting her line will break things.

    Regarding the dailymotion videos, it appears your using their reccomended code, so I dont know.

  21. flush
    Member
    Posted 7 years ago #

    Thank you,
    Yes there's no <param tag in the video call, do you think I can try putting one in?

  22. whooami
    Member
    Posted 7 years ago #

    you can try anything you want. if it breaks, remove it.

  23. flush
    Member
    Posted 7 years ago #

    Ok at least it works for the Dewplayer. Thanks a lot.

  24. whooami
    Member
    Posted 7 years ago #

    your welcome :)

  25. flush
    Member
    Posted 7 years ago #

    Pity it doesn't work for the dailymotion videos though...

Topic Closed

This topic has been closed to new replies.

About this Topic