This tip shows you how to create an image gallery using Shadowbox and the Textpattern plugin smd_gallery.
Here is what you need:
- Download smd_gallery
- 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.
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.
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!