This shows how to automatically display YouTube videos in a FancyBox by putting the YouTube ID into a user Variable.
INSTALLATION:
Go to http://fancybox.net/ and click the "Version 1.3.4 (2010/11/11)" link in the right hand column.
This will download a ZipFile.
Open it, browse to the "fancybox" folder and extract everything in that folder directly into your Site folder.
Go to http://jquery.com/download/ scroll down until you see Past Releases, then 1.8.3.
From the 1.8.3 entry, right-click "Minified" and save the resulting file "jquery-1.8.3.min.js" into your Site folder.
N.B. We're not using the latest jQuery as it seems to break FancyBox.
That's all the required files in the right place.
Now to add the capability into SellerDeck.
Go to Design / Library / Layouts / JavaScript Header Functions / Standard JavaScript Header Functions.
paste the following into the bottom below everything that's there:
OK out.
Go to Design / Library / Variables.
Right-click Product and select New Variable.
Make the following settings (leave others as-is):
OK out.
Paste the following code into your Product Layout(s) (Design /Library / Layouts / Product) at the appropriate place.
E.g. Immediately after <actinic:variable name="ProductDescription" /> (may show as ProductDescription in blue).
OK out and that's it installed.
OPERATION:
To add a video to a product:
Get the filename part of an embedded video's URL from YouTube (the bit between last / and the following ?).
E.g. From http://www.youtube.com/embed/Z_cCwnfiC7w?rel=0&hd=1 we only want the Z_cCwnfiC7w bit.
In Product Details / Properties / Product / YouTubeLink, paste in said filename part (try the code above).
That's it. A link to the video should now show. And when you click said link the video should autostart in a FancyBox.
This probably won't work on the internal Preview but will if you do Publish Current Page to see it in a full browser.
INSTALLATION:
Go to http://fancybox.net/ and click the "Version 1.3.4 (2010/11/11)" link in the right hand column.
This will download a ZipFile.
Open it, browse to the "fancybox" folder and extract everything in that folder directly into your Site folder.
Go to http://jquery.com/download/ scroll down until you see Past Releases, then 1.8.3.
From the 1.8.3 entry, right-click "Minified" and save the resulting file "jquery-1.8.3.min.js" into your Site folder.
N.B. We're not using the latest jQuery as it seems to break FancyBox.
That's all the required files in the right place.
Now to add the capability into SellerDeck.
Go to Design / Library / Layouts / JavaScript Header Functions / Standard JavaScript Header Functions.
paste the following into the bottom below everything that's there:
Code:
<script type="text/javascript">
if ( typeof(jQuery) == 'undefined' ) document.write('<script type="text/javascript" src="jquery-1.8.3.min.js"></sc' + 'ript>');
</script>
<script type="text/javascript" src="jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$('.youtubefbox').fancybox();
});
</script>
Go to Design / Library / Variables.
Right-click Product and select New Variable.
Make the following settings (leave others as-is):
Code:
Name: YouTubeLink Description: The filename part of the YouTube URL. Prompt: YouTubeLink Place Of Setting: Product
Paste the following code into your Product Layout(s) (Design /Library / Layouts / Product) at the appropriate place.
E.g. Immediately after <actinic:variable name="ProductDescription" /> (may show as ProductDescription in blue).
Code:
<actinic:block if="%3cactinic%3avariable%20name%3d%22YouTubeLink%22%20%2f%3e%20%21%3d%20%22%22" > <br /><br /> <a class="iframe youtubefbox" href="http://www.youtube.com/embed/<actinic:variable name="YouTubeLink" />?rel=0&autoplay=1&hd=1"> <b>View a video via YouTube</b> </a> </actinic:block>
OPERATION:
To add a video to a product:
Get the filename part of an embedded video's URL from YouTube (the bit between last / and the following ?).
E.g. From http://www.youtube.com/embed/Z_cCwnfiC7w?rel=0&hd=1 we only want the Z_cCwnfiC7w bit.
In Product Details / Properties / Product / YouTubeLink, paste in said filename part (try the code above).
That's it. A link to the video should now show. And when you click said link the video should autostart in a FancyBox.
This probably won't work on the internal Preview but will if you do Publish Current Page to see it in a full browser.