Shadowbox and smd_gallery

This tip shows you how to create an image gallery using Shadowbox and the Textpattern plugin smd_gallery.

Here is what you need:

  1. Download smd_gallery
  2. Download Shadowbox – choose “jQuery” from Adapter and select “img” from “Players”. Click “Build it”. After this, click on “download full” from “Source”.

You should then have a folder called shadowbox-2.0 and a file called shadowbox-2.0.js.

Install smd_gallery and Shadowbox

To install smd_gallery, go to your plugins page and install the plugin as normal. Then, place the shadowbox-2.0 folder in your root folder. Rename the folder shadowbox.

Also upload the shadowbox-2.0.js file to the new shadowbox folder.

Initialise Shadowbox

In your <head>, place the following code:

<script type="text/javascript" src="<txp:site_url/>textpattern/jquery.js"></script>
<script type="text/javascript" src="<txp:site_url/>shadowbox/build/adapter/shadowbox-jquery.js"></script>
<script type="text/javascript" src="<txp:site_url/>shadowbox/shadowbox-2.0.js"></script>
<script type="text/javascript">
Shadowbox.loadSkin('classic', '<txp:site_url/>shadowbox/src/skin');
Shadowbox.loadLanguage('en', '<txp:site_url/>shadowbox/build/lang');
Shadowbox.loadPlayer(['img'], '<txp:site_url/>shadowbox/build/player');
window.onload = Shadowbox.init;

It is also possible to just upload the Shadowbox files that are referenced above, but then you would need to change the paths in the code. I prefer to simply upload the entire Shadowbox folder, because it will be easier to upgrade to a newer version.

Place the call to smd_gallery in your page

<div id="images">
<txp:smd_gallery category="your_category" form="gallery" />

Create a new “gallery” form and place the following code in it:

<a href="{url}" title="{title}" rel="shadowbox[gallery]">
<img class="img" src="<txp:site_url/>images/{thumbdef}" alt="{alt}" />

And that’s it. Remember that with Shadowbox it is possible to display Flash, QuickTime and other content types. For more information, visit the Shadowbox site.

comments powered by Disqus