Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Video/Flickr issue.
Sri Shaman (Guild Admin) 10/5/2009 4:23 AM EST : Video/Flickr issue.

Sri Shaman
Posts: 135
Posts With Wolves

I have the Flickr photostream for my images scrolling on my Gallery page, and the original static menu for the pictures on the side of it. So I wanted to use the code where you have the picture appear in the facebox but the issue I have is when it pops up it's under the Flickr photostream.

The same issue happens on another page.
On my Raid Library page I have a list of Youtube videos for raid strategies. In the center I wanted to showcase a spotlight video. But if someone clicks on one of the videos that pop up in a facebox, it appears underneath the youtube video. You can bring it forward by clicking on it but it's still an annoyance.

Is there some way to deal with this? Can you adjust the facebox to appear in front of other media on the page?

Links:

http://entity.guildportal.com/Guild.aspx?GuildID=281448&TabID=2371866&PageName=Gallery
http://entity.guildportal.com/Guild.aspx?GuildID=281448&TabID=2779335
TopBottom

Mottie (MVP) 10/5/2009 9:45 AM EST : RE: Video/Flickr issue.
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Sri Shaman!

Well, I guess I need to fix that post of mine on how to add a Flickr slideshow... because it works better if you embed it versus putting it in an iframe. So instead of just copying the link to the slideshow, you need to click on the "Share" link inside the slideshow and it provides the Embed HTML.

But, you need to make two minor additions to the code to make it not appear above the facebox popup... add the parts in green that set wmode="transparent". And of course adjust the width and height (in red) to your desired dimensions.
<object width="800" height="600"><param name="wmode" value="transparent"></param> <param name="flashvars" value="offsite=true&lang=en-us&page_show_url=%2Fphotos%2F43129461%40N05%2Fshow%2F&page_show_back_url=%2Fphotos%2F43129461%40N05%2F&user_id=43129461@N05&jump_to="></param> <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649"></param> <param name="allowFullScreen" value="true"></param><embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/slideshow/show.swf?v=71649" allowFullScreen="true" flashvars="offsite=true&lang=en-us&page_show_url=%2Fphotos%2F43129461%40N05%2Fshow%2F&page_show_back_url=%2Fphotos%2F43129461%40N05%2F&user_id=43129461@N05&jump_to=" width="800" height="600" wmode="transparent"></embed></object>
Sri, that is your code above, you can just copy and paste it... I included these instructions for others to learn from this and I'll update the original post as well.

Lastly, the facebox popup wasn't centering itself for me... and what I discovered from writing the toolbar script, it's very nice to be able to move the facebox window around and oddly it also centered the popup correctly. So just add this script to your Footer HTML and you can then click anywhere inside the facebox to move it.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#facebox').draggable({containment: 'parent'}).find('.body').css({ 'cursor': 'move' });
})
</script>
I thought GP was using the jQuery UI script, but the script above was giving me errors, so I've included a link to that as well (in blue).
TopBottom

Sri Shaman (Guild Admin) 10/5/2009 2:04 PM EST : RE: Video/Flickr issue.

Sri Shaman
Posts: 135
Posts With Wolves

A wonderful, quick response as usual. Thanks so much.
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%