Getting started
Sections
Help

Shadowbox

From Snowfire Wiki

Jump to: navigation, search

How to open a large image in a Shadowbox (Lightbox)

Download Shadowbox from http://www.shadowbox-js.com/index.html.

1) Put shadowbox.js into your /javascript folder
2) Put shadowbox.css into your /styles folder
3) Create the folder shadowbox inside your /images folder and put all images there.
4) Open shadowbox.css and make sure all links to .gif and .jpg looks like this: 

../images/shadowbox/play.png

5) Open layouts/containers/container.liquid and add the following rows inside <head> 

{{ 'shadowbox.css' | css }}
{{ 'shadowbox.js' | javascript }}
<script type="text/javascript">
Shadowbox.init({
	overlayOpacity: 0.9
});
</script>

6) Now add an image component with the rel attribute (to trigger the shadowbox) 

{ com_image(
	id:'8', 
	description:'Preview', 
	a-rel:'shadowbox[Gallery]', 
	autoLinkToFile:'true',
	linkable:'true',
	maxHeight:'100',
	maxWidth:'100'
) }

The autoLinkToFile parameter will wrap a link around the image and link it to the original file.


Other examples

Makes all linked images (added by content blocks) open in a shadowbox with the gallery feature enabled 

if(typeof(isInEditMode) == 'undefined') {
	Shadowbox.init({
		skipSetup: true,
	}); 
 
	window.onload = function(){
		Shadowbox.setup(".snippet-image-image a, .snippet-text-image a, .snippet-image-text a", { 
			gallery: "", 
			title: "" 
		}); 
	};
}
</script>
Retrieved from "http://wiki.snowfireapp.com/Shadowbox"
Views
Personal tools