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!
Announcement
Collapse
No announcement yet.
Embedding Vimeo, and Jquery lightbox 0.5???
Collapse
X
-
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!
Comment
-
Switch to fancybox (http://fancyapps.com/fancybox/)
Then Vimeo/Youtube opens straight into the lightbox as per the examples on the page above.
Code:<a class="fancybox-media" href="http://vimeo.com/36031564">Vimeo</a>
Code:$('a[rel*="lightbox"]').fancybox();
Code:$(document).ready(function() { /* * Simple image gallery. Uses default settings */$('.fancybox').fancybox(); $('a[rel*="lightbox"]').fancybox(); /* * Different effects */ etc etc etc
Jonathan Chappell
Website Designer
SellerDeck Website Designer
Actinic to SellerDeck upgrades
Graphicz Limited - www.graphicz.co.uk
Comment
-
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.
Comment
-
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>
Comment
-
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:
Code:$(document).ready(function() { /* * Simple image gallery. Uses default settings */$('.fancybox').fancybox(); $('.lightbox).fancybox(); $('a[rel*="lightbox"]').fancybox(); /* * Different effects */ etc etc etc
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.Jonathan Chappell
Website Designer
SellerDeck Website Designer
Actinic to SellerDeck upgrades
Graphicz Limited - www.graphicz.co.uk
Comment
Comment