Textpattern tips, tutorials and code snippets

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;
</script>

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

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}" />
</a>

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.

14 Comments Comment feed

  • Simon
  • 8 October 2008

Thanks a lot, that worked like a treat.

Great! It’s working at www.gunnardaan.nl/txp/1960-1969 A site under construction. The only thing is that smd_gallery doesn’t work if you want to tweak it. Say by giving it extra attributes … !?

Nice tip, thanks Lee.

Redfox: Looking good, but what do you mean by “doesn’t work if you want to tweak it”?

If you ever read this, let me know via the forum/e-mail how the plugin is failing you. If it’s a shortcoming with the code, I’m sure it can be fixed ;-)

Hi, great Gallery tip\tutorial!
Thank you for shearing!

I have one question.

Can I put the
————————-
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;
————————-
in external JS file?

I guess it can be done, but Im wondering how would it look, and how would it execute onLoad?

Well, now I know you CAN tweak smd_gallery. See this thread at the Textpattern forum > http://forum.textpattern.com/viewtopic.php?pid=194549#p194549

Thanks for the tutorial.

Does anyone know how to alter the skin css to give the image padding and a white background so it looks like a photograph or print?

I duplicated the classic skin in the skin directory and renamed it gallery. Then I played the the css but couldn’t get it to work properly since there is so much crazy css already going on.

Never mind. I figured it out after a bit of playing around.

Thanks for this tutorial, but unfortunately it’s a little out-dated cause shadowbox 3.0b is solely available. I’ve tried to figure out how it works with smd_gallery but I failed. So I hope for a tutorial update :-)

I’ve got it! This is how it works for me with shadowbox 3.0b:
<head>
<link rel=“stylesheet” type=“text/css” href=“shadowbox/shadowbox.css”>
<script type=“text/javascript” src=”<txp:site_url/>textpattern/jquery.js”></script>
<script type=“text/javascript” src=”<txp:site_url/>shadowbox/adapters/shadowbox-jquery.js”></script>
<script type=“text/javascript” src=”<txp:site_url/>shadowbox/shadowbox.js”></script>
<script type=“text/javascript”>
Shadowbox.init({ language: “de-DE”,
});
</script>

The image player is loaded by default. If you like a different player add this for example after “language:”: players: [“qt”]

Thanks Kai. The instructions for Shadowbox 3.0 are here.

  • dandul
  • 2 March 2010

This is the code that i put in my <head> that finally worked:

<link rel="stylesheet" type="text/css" href="<txp:site_url />shadowbox/shadowbox.css">

<script type="text/javascript" src="<txp:site_url />shadowbox/jquery.js"></script>

<script type="text/javascript" src="<txp:site_url />shadowbox/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({ handleOversize: "drag", modal: true }); </script>

Note there’s no adapters anymore. Also note jquery.js has to load before the other javascript.

Everything else is the same as the tutorial

thanks! great article!

guys, how i can do something,
When i’m view category list, after category choose get to page with gallery?

i do it)
Thanks again, great tutor!

Add a comment

Use Textile help to style your comments