Page 1 of 1

Adding a "Start Slideshow" button or link to jQuery Lightbox

Posted: Fri Nov 27, 2009 10:13 pm
by norman
If you're using the jQuery based Lightbox, then the following will allow a button or link to start the lightbox.

Put the following into your Overall Layout, just abve the </head> tag:

Code: Select all

<script type="text/javascript">
function lbshow(ref){
	var ancs = $('a[rel=lightbox-' + ref +']');
	var imgs = new Array();
	for ( var i=0; i<ancs.length; i++ ) imgs.push([ancs[i].href, ancs[i].title]);
	if ( imgs.length ) jQuery.slimbox(imgs, 0);
	return false;
}
</script>
PRODUCT LAYOUTS:
Use the following in your Product Layout if you want a button:

Code: Select all

<input type="button" value="Start Slideshow" onclick="lbshow('<actinic:variable name="EncodedProductAnchor" />');" />
Or make a link (perhaps around your product image) like:

Code: Select all

<a href="#" onclick="lbshow('<actinic:variable name="EncodedProductAnchor" />');">Start Slideshow</a>
FRAGMENT LAYOUTS:
Use the following in your Fragment Layout if you want a button:

Code: Select all

<input type="button" value="Start Slideshow" onclick="lbshow('<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Brochure%22" >bp_<actinic:variable encoding="perl" name="BrochurePageID" selectable="false" />_<actinic:variable encoding="perl" name="ListIndex" selectable="false" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Brochure%22" ><actinic:variable encoding="perl" name="FragmentAnchor" selectable="false" /></actinic:block>');" />
Or make a link (perhaps around your fragment image) like:

Code: Select all

<a href="#" onclick="lbshow('<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Brochure%22" >bp_<actinic:variable encoding="perl" name="BrochurePageID" selectable="false" />_<actinic:variable encoding="perl" name="ListIndex" selectable="false" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Brochure%22" ><actinic:variable encoding="perl" name="FragmentAnchor" selectable="false" /></actinic:block>');">Start Slideshow</a>

Re: Adding a "Start Slideshow" button or link to jQuery Lightbox

Posted: Tue Dec 01, 2009 2:05 pm
by norman
If you want the link or button to only be displayed if Lightbox images are defined then put the bits inside a big Condition like:

Code: Select all

<actinic:block if="%28%3cactinic%3avariable%20name%3d%22LightboxImage1%22%20%2f%3e%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage2%22%20%2f%3e%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage3%22%20%2f%3e%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage4%22%20%2f%3e%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage5%22%20%2f%3e%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage6%22%20%2f%3e%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage7%22%20%2f%3e%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage8%22%20%2f%3e%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage9%22%20%2f%3e%20%2e%20%3cactinic%3avariable%20name%3d%22LightboxImage10%22%20%2f%3e%29%20%21%3d%20%22%22" >
	CODE TO SHOW ONLY IF LIGHTBOX IMAGES DEFINED
</actinic:block>
So you'd put the button where the CODE TO SHOW... is.

If using a link, then put the block in twice, once for the <a ....> and again for the </a>

Re: Adding a "Start Slideshow" button or link to jQuery Ligh

Posted: Thu Aug 18, 2011 1:30 pm
by DaveSMR
Is there anyway to get this type of functionality on a Fragment Image? Would I just replace the <actinic:variable name="EncodedProductAnchor" /> with <actinic:variable name="FragmentAnchor" />?

Re: Adding a "Start Slideshow" button or link to jQuery Ligh

Posted: Thu Aug 18, 2011 4:01 pm
by norman
I've added to my first post re making the same capability for Fragments.