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

Adds a Lightbox slideshow to your products.
Post Reply
norman
Site Admin
Posts: 1242
Joined: Sat Feb 07, 2004 9:55 pm

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

Post by norman » Fri Nov 27, 2009 10:13 pm

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>
Norman

norman
Site Admin
Posts: 1242
Joined: Sat Feb 07, 2004 9:55 pm

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

Post by norman » Tue Dec 01, 2009 2:05 pm

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>
Norman

DaveSMR
Posts: 1
Joined: Thu Aug 18, 2011 1:23 pm

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

Post by DaveSMR » Thu Aug 18, 2011 1:30 pm

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" />?

norman
Site Admin
Posts: 1242
Joined: Sat Feb 07, 2004 9:55 pm

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

Post by norman » Thu Aug 18, 2011 4:01 pm

I've added to my first post re making the same capability for Fragments.
Norman

Post Reply