Embedding Vimeo, and Jquery lightbox 0.5???

[TLomax]

Hi, could anybody please provide any guidance on using Vimeo within Sellerdeck 2013?? If possible we're hoping to use this alongside jquery lightbox 0.5 which we already use within the site. Any comments/help most welcome!

[Editorkit]

We use the standard vimeo embed code placed within a fragment - thus. Can't help with lightbox I'm afraid.

[TLomax]

Thanks....

Hi, thanks for the response. Looks good on your site, does exactly what it's supposed to do and definitely adds an extra layer of info for your site visitors.
I have used it this way on one or two of our pages and it's fine, just trying to add another dimension by using it alongside the lightbox as well. Not sure whether it's actually possible, although someone more familiar with such things may yet come up with a bright idea I hope!

[graphicz]

Switch to fancybox (http://fancyapps.com/fancybox/)

Then Vimeo/Youtube opens straight into the lightbox as per the examples on the page above.

<a class="fancybox-media" href="http://vimeo.com/36031564">Vimeo</a>

If you add this line the the document ready code:

$('a[rel*="lightbox"]').fancybox();

Thus

$(document).ready(function() {
			/*
			 *  Simple image gallery. Uses default settings
			 */$('.fancybox').fancybox();
			 
			 $('a[rel*="lightbox"]').fancybox();

			/*
			 *  Different effects
			 */ etc etc etc

All your rel="lightbox" links will fire into fancybox without you having to go through and change everything.

[TLomax]

Thanks....

Thanks. So using Fancybox instead of Jquery Lightbox 0.5 won't cause any problems with our existing lightbox features but will simply override and allow them to work in Fancybox instead? We currently only make very limited use of the lightbox feature anyway, but I don't want any issues; being a bit of a novice I need something that will work in a straightforward way!
I'll look into the links and code you've provided and will no doubt be posting more questions!
Thanks so much.

[TLomax]

code

So, this seems to be what we're working with at the moment, any 'Fancybox For Dummies' comments welcome!

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Product%20Page%27">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<!-- Jquery for thumbs/enlarge image -->
<link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="jquery.lightbox-0.5.js"></script>
<!--[ if IE 6 ]>
<style type="text/css">
.product_img_inner { position:inherit; }
</style>
<![ endif ]-->


<script type="text/javascript">
$(function() {
$('a.lightbox').lightBox(); // Select all links with lightbox class
});
</script>



<script type="text/javascript">
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
</script>
</actinic:block>

[graphicz]

The usual lightbox call is rel="lightbox"

I am not skilled enough at javascript to authoritatively comment n the code above. It does seem that you are triggering lightbox on an 'a' tag with the class lightbox.

I that case, you would add the appropriate line to the document ready stuff:

$(document).ready(function() {
			/*
			 *  Simple image gallery. Uses default settings
			 */$('.fancybox').fancybox();

                          $('.lightbox).fancybox();
			 
			 $('a[rel*="lightbox"]').fancybox();

			/*
			 *  Different effects
			 */ etc etc etc

Without warranty

Create another Sellerdeck site (if multisite) or install SD on another laptop (if not), load up your site and try it out before committing to the live site.

[TLomax]

Thank you again!

Thanks. Very helpful (I hope!). Going to look through all this and make sense before trying and testing it.....will update on results here soon(ish)