Add a photo gallery to Magento using Photobox

What is Photobox CSS3 JQuery plugin?

Photobox is a lightweight image gallery modal window script which uses only CSS3 for silky-smooth animations and transitions, utilizes GPU rending, which can be completely controlled and themed directly from the CSS, and in most cases mobile friendly. More information and the files can be found on their official website http://dropthebit.com/500/photobox-css3-image-gallery-jquery-plugin/

Getting started with adding a photo gallery to Magento using Photobox

First, where going to have to do some editing of Magento files, all of which is in your theme files under app>design>frontend>yourtheme>default if your theme doesn’t have the file mentioned create one, or look for the Magento’s default file under app>design>frontend>base>default

First we will add a few lines to the local.xml file located at app>design>frontend>yourtheme>default>layout>local.xml

            <action method="addItem">
                <type>skin_css</type>
                <stylesheet>css/photobox.css</stylesheet>
            </action>
            <action method="addItem">
                <type>skin_js</type>
                <name>js/photobox.js</name>
            </action>

What this bit of code does is adds the required css and js files for the gallery to work.

Next upload the css and js files to your sever in your preferred method. Upload these under /skin>frontend>yourtheme>default>css and js respectively.

Finally, we will need to create a page under Magento’s admin located under CMS > Pages

We named ours Gallery. Under the content add this bit of code.

<div id="gallery">

<!-- Add Images here -->

<a href="{{media url="wysiwyg/Gallery-1/Large/image.jpg"}}"><img src="{{media url="wysiwyg/Gallery-1/Thumbs/image.jpg"}}" alt="" /></a>

<!--          <a href="{{media url="wysiwyg/Gallery-1/Large/image.jpg"}}"><img src="{{media url="wysiwyg/Gallery-1/Thumbs/image.jpg"}}" alt="" /></a>          -->

<!-- END OF IMGAES -->
</div>

<!-- DONT EDIT BELOW -->
	<script>
		$j('#gallery').photobox('a');
		// or with a fancier selector and some settings, and a callback:
		$j('#gallery').photobox('a:first', { thumbs:false, time:0 }, imageLoaded);
		function imageLoaded(){
			console.log('image has been loaded...');
		}
	</script>

Code explanation:

We wrapped out images in a div with a class of gallery so we can set its width properties via css, and other things.

If you noticed we broke down our images into 2 categories, Thumbs, and Large. Which you can make when you’re uploading your images. Keep you images named the same in both directories. This will make things much easier.

For a working demo please see our implementation at http://www.happehoneybeefarm.com/gallery/

Leave your comments below to let us know what you think.