Link an image to a slimbox presentation

chr1spy · 2009-08-01 03:05:12

I’m new to TextPattern, so forgive me if this has already been asked.

I’ve mocked up a page in html and gotten the effect I want: http://christopherposthuma.com/dev/lia/gallery.html
Click on the image of the baby in the top left corner of the page to see how it works.

Here’s the html:

<ul>
		<li><a class="galbutton" rel="lightbox-babies" href="images/gallery_babies_01.jpg"><img src="images/gallery_thumb_babies.jpg" alt="Babies" width="180" height="144" /><br /><strong>Babies</strong></a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_02.jpg">Babies 02</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_03.jpg">Babies 03</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_04.jpg">Babies 04</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_05.jpg">Babies 05</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_06.jpg">Babies 06</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_07.jpg">Babies 07</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_08.jpg">Babies 08</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_09.jpg">Babies 09</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_10.jpg">Babies 10</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_11.jpg">Babies 11</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_12.jpg">Babies 12</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_13.jpg">Babies 13</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_14.jpg">Babies 14</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_15.jpg">Babies 15</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_16.jpg">Babies 16</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_17.jpg">Babies 17</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_18.jpg">Babies 18</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_19.jpg">Babies 19</a></li>
		<li><a class="hide" rel="lightbox-babies" href="images/gallery_babies_20.jpg">Babies 20</a></li>								
</ul>

What I want to do is replicate this by using the smd_slimbox plugin to automatically pull in images from a category to create the list items, but without producing individual thumbnails of each image, but instead have a single thumbnail and have the other images appear in the overlay window. Producing the list items with smd_slimbox and using a class with the css attribute “hide” will due most of the work. I just can’t figure out how to get the single image to link to the slideshow.

I could code the lists by hand in the page template but thought it would be more elegant and easier to maintain (adding, removing, and changing images) by using smd_slimbox to produce the list items.

Thanks!

Edit: Edited code block

Last edited by chr1spy (2009-08-01 20:56:07)

TNT · 2009-08-01 08:16:09

smd_slimbox doesn’t do what you need, but you can use smd_gallery – which is smd_slimbox on a hefty dose of steroids. This enables you to use any kind of lightbox, so you have to put the lightbox-script in the head of your document.

Then, in your article-form call the plugin where you want it to be:

<txp:smd_gallery category="?customfield" form="gallery" thumblimit="1" />

Explanation:

category="?customfield": this is the custom field in the article with the name of the category of the photos. In your example this should be: category=?lightbox-babies"
form="gallery": this is the form to tell the plugin how to display the images (see below for this form)
thumblimit="1": tells the plugin to just display one image of the category. This defaults to the first one; there’s an attribute to change this to another image, but I didn’t use that one.

Your form="gallery" could look like this:

<a rel="lightbox[{category}]" href="{url}" title="{title}">{object}</a>

This form does everything automatically. Your lightbox should work now.

chr1spy · 2009-08-01 18:38:14

Thanks Arjan.

I’ll give this a try. I appreciate the help.

chr1spy · 2009-08-01 21:14:31

I set things up as Arjan and the smd_gallery plugin described for using a single image to call up a gallery. The gallery works with one exception. For some reason the thumbnail image isn’t being made. It’s neither in the Textpattern database, nor in the images directory in the Textpattern installation. Although the code produced for the page calls it out.

Any ideas why this is occurring?

chr1spy · 2009-08-01 23:33:17

Nevermind. Stupid mistake. I forgot to create/upload the thumbnail for the image.

TNT · 2009-08-02 08:38:21

Glad it’s working!

chr1spy · 2009-08-02 19:32:21

Thanks again Arjan!

Textpattern CMS

Textpattern CMS support forum

#1 2009-08-01 03:05:12

Link an image to a slimbox presentation

#2 2009-08-01 08:16:09

Re: Link an image to a slimbox presentation

#3 2009-08-01 18:38:14

Re: Link an image to a slimbox presentation

#4 2009-08-01 21:14:31

Re: Link an image to a slimbox presentation

#5 2009-08-01 23:33:17

Re: Link an image to a slimbox presentation

#6 2009-08-02 08:38:21

Re: Link an image to a slimbox presentation

#7 2009-08-02 19:32:21

Re: Link an image to a slimbox presentation

Board footer