Integrating ShadowBox into AutoGallery

This tutorial will show you in what hopefully is a clear manner how to integrate ShadowBox into our AutoGallery snippet (For more on what AutoGallery is click here).

• AutoGallery with ShadowBox Demo

Instructions:-

• Step 1 - Download these 2 files : AutoGallery.inc.php (zipped) and AutoGallery.snippet.
• Step 2 - Firstly upload AutoGallery.inc.php to your assets/snippets folder.
  Next paste the contents of AutoGallery.snippet into a new snippet, name the snippet AutoGallery.
• Step 3 - Download the excellent ShadowBox. For the purposes of this tutorial you only need to build base and images, so leave the drop down box as base and tick images.
• Step 4 - After downloading and unzipping, upload all the ShadowBox files to somewhere sensible on your server ( I always use assets/js ).
  Then include this text in the HEAD section of the template you are going to use for your gallery : <link rel="stylesheet" type="text/css" href="PATH/TO/MY/shadowbox.css">
  <script type="text/javascript" src="PATH/TO/MY/shadowbox.js"></script>
  <script type="text/javascript">
  Shadowbox.init();
  </script> Remebering to change the PATH/TO/MY/ to the path of YOUR install of ShadowBox.
• Step 5 - Time to create your AutoGallery Chunk
  Create a new Chunk, call it something like galleryThumbs and style it to your liking.
  Basic Example Chunk :- <div style="width:120px;float:left;margin-right:20px;margin-bottom:20px"><a href="[+imgpath+]"><img src="[+tnpath+]" /></a></div>
• Step 6 - Ok thats the basic AutoGallery chunk done, but ShadowBox wont work yet, we must add the attribute rel="shadowbox[MyGallery]" to our A tag in the galleryThumbs chunk (Feel free to change MyGallery to whatever you like).
  The above code now becomes :- <div style="width:120px;float:left;margin-right:20px;margin-bottom:20px"><a href="[+imgpath+]" rel="shadowbox[MyGallery]"><img src="[+tnpath+]" /></a></div> That is the basic set up of AutoGallery integrated with ShadowBox now for testing.
• Step 7 - Now to test the theory! This setup is AutoGallery at its very basic and as such we are going to call the gallery from its document ID, so create the page you want the Gallery to sit on and use this snippet call to instigate AutoGallery :- [!AutoGallery?&tnwidth=120&tnheight=180&itemchunk=galleryThumbs!] Then save the document, take note of the documents ID.
• Step 8 - In your FTP client create the folder galleries in the folder assets. Inside the galleries folder create a new folder the name being the ID of the document where your gallery is, so if your gallery document id is 22 create the folder 22 inside the galleries folder.
• Step 8 - Upload images to the folder you just created, at its mosts basic level AutoGallery works via document ID's it CAN more usefully work of other folder names, but thats a subject for another tutorial!
  If all is well, and you followed the instructions correctly, you should now have a working Autogallery and ShadowBox install!

Thankyou for following this tutorial, I hope it has been of some use to you. More information on AutoGallery can be found Here

Demo

Tutorial by Martyn ZombieTuesday

Big Credits go to Michael J. L. Jackson for creating the wicked ShadowBox