Image overview with smd_gallery

fhd · 2009-11-15 11:24:45

I’m creating a site which contains several galleries, and I’ve decided to use smd_gallery for this. These are my requirements:

On the main page, a list of all the galleries should be shown, and when a gallery is clicked, the respective gallery should be shown.
When showing a gallery, there should be a list of links (one for each image, consecutively numbered) and a single thumbnail. When one of these links is clicked, the thumbnail should be set to the image that was clicked. Initially, the first image’s thumbnail should be shown.
Clicking on the thumbnail should show the full image in a lightbox.

I’ve got 90% of that working. What I couldn’t get to work yet:

Having a different CSS class for the currently selected image (like active_class attribute of category_list) can smd_gallery do that?
Showing the first image’s thumbnail when first showing a gallery. Can smd_gallery work only on the first image?
A section list without entries still contains “Galleries” and a line with nothing but a _|_ on it. Can I check if any categories exist at all?

Can somebody help me with these problems?

My approach is as follows:
I’m absolutely open to suggestions for improvement – or an altogether easier way to do what I want. I’m rather new to textpattern :)

I create each gallery as an image category. To show links to each gallery, I use the following code:

<span>Galeries</span><br/>|
<txp:category_list type="image" section="galleries" exclude="site-design" active_class="selected" break="<br/>|"/>

The galleries section uses the following code to display links to all images:

<txp:smd_gallery category='<txp:category/>' form="gallery_image"/>

Below the gallery, there is the following code which shows the thumbnail:

<a id="current-image-link" rel="lightbox-smd" href="#">
	<img id="current-image-thumb"/>
</a>

The href="#" is required for the lightbox script to work.

Finally, gallery_image uses the following code to display a link to each image:

<a href='javascript:set_cur_img("{url}", "{thumburl}")'>{counter}</a>

Yes, it does call a javascript function. This one is defined in the header and the most ugly part of my solution:

function set_cur_img(url, thumb_url)
{
	document.getElementById("current-image-link").href = url;
	document.getElementById("current-image-thumb").src = thumb_url;
}

All of this works as expected (except the above problems).
That is, when I first enter my site, I get something like:

Galleries
| Autumn 2008
| Cars
| Furniture

When I click on one of these, e.g. Cars, I get something like:
This is where I’d actually like to see the first picture already

1 2 3 4 5

When I click on one of these numbers, I see the following:
This is where I’d like to have a different CSS class for the selected name

1 2 3 4 5
[image of an mercedes]

If I click that image, I see it in a lightbox.

Bloke · 2009-11-16 10:26:41

Woah! That’s pretty deep. You’re going to have to do some javascript trickery I’m afraid because all your stuff is after the smd_gallery tag has finished its job. Lucky for you, jQuery is your friend. Load jquery.js on the client pages somewhere and let’s get stuck in…

Having a different CSS class for the currently selected image

For this we need to change a few things. Firstly, your smd_gallery tag:

<txp:smd_gallery category='<txp:category />' form="gallery_image" wraptag="div" class="navig" countform="1:gallery_init" />

So that just wraps your anchor tags in a div with class navig (you could use a span I suppose). The countform will be used for part 2, so ignore it for now.

A slight alteration to gallery_image is needed so we pass the counter into the function as well:

<a href='javascript:set_cur_img("{url}", "{thumburl}", "{counter}")'>{counter}</a>

And then your javascript can read the counter, iterate over every anchor inside your gallery (that’s why we needed the wraptag and class) and check if its contents matches the given number. If it does, set class="active", if not, remove the class name:

function set_cur_img(url, thumb_url, ctr)
{
	jQuery("#current-image-link").attr("href", url);
	jQuery("#current-image-thumb").attr("src", thumb_url);
	jQuery(".navig a").each(function() {
		curr = jQuery(this);
		if (curr.text() == ctr) {
			curr.addClass("active_image");
		} else {
			curr.removeClass("active_image");
		}
	});
}

Showing the first image’s thumbnail when first showing a gallery

This is where the countform comes in. Essentially you need to tell jQuery that, onload, it needs to call your javascript function with the items from the first image. We’ve told countform to only fire on the 1st image and call this form called gallery_init:

<script type="text/javascript">
jQuery(function() {
	set_cur_img("{url}", "{thumburl}", "{counter}");
});
</script>

That’s it.

Can I check if any categories exist at all?

You probably need some txp:variable magic here. I’ve not tried this but the general idea is as follows:

<txp:variable name="has_cats" value='<txp:category_list type="image" section="galleries" exclude="site-design" />' />

If the category_list tag returns any content then the variable has_cats will contain something. You can then test for that later in your page with:

<span>Galleries</span><br/>|
<txp:if_variable name="has_cats" value="">
   <p>None available</p>
<txp:else />
   <txp:category_list type="image" section="galleries" exclude="site-design" active_class="selected" break="<br/>|"/>
</txp:if_variable>

Not sure if that’s quite what you want, but if you tinker with that idea it’ll probably get you where you want to be. Hope that helps.

fhd · 2010-05-22 10:56:28

Thanks a bunch Bloke, I was able to make it all work!

Sorry for reacting this late though, I didn’t quite find the time for this project until now…

I couldn’t use jQuery because Slimbox required MooTools which appears to conflict with jQuery. But I was able to do everything with MooTools. This is how I adopted your suggestions:

Function setCurrentImage

function setCurrentImage(url, thumbUrl, caption, label) {
	$('current-image-link').href = url;
	$('current-image-thumb').src = thumbUrl;
	$('current-image-info').innerHTML = caption;
	$('navigation').getElements('.image-link-table a').each(function(el) {
		if (el.text == label)
			el.addClass('selected');
		else
			el.removeClass('selected');
	});
}

Gallery links

<div id="navigation">
	<div class="image-link-table">
		<txp:smd_gallery category='<txp:category/>' form="gallery_image" countform="1:gallery_init"/>
	</div>
</div>

Form gallery_image

<div class="image-link-cell">
	<a href='javascript:setCurrentImage("{url}", "{thumburl}", "{caption}", "{counter}")'>{counter}</a>
</div>

Form gallery_init

<script type="text/javascript">
window.addEvent('domready', function() {
	setCurrentImage("{url}", "{thumburl}", "{caption}", "{counter}");
});
</script>

Gallery menu

	<txp:variable name="galleries" value='<txp:category_list type="image" section="galleries" exclude="site-design" active_class="selected" break="<br/>|"/>'/>
	<txp:if_variable name="galleries" value="">
	<txp:else/>
		<div class="gallery-links">
			<span class="significant">Galerie</span>
			<br/>|
			<txp:variable name="galleries"/>
		</div>
	</txp:if_variable/>

Last edited by fhd (2010-05-22 11:01:12)

jakob · 2010-05-22 12:00:27

Very nice. Nice that you posted back after such a long time.

couldn’t use jQuery because Slimbox required MooTools which appears to conflict with jQuery

BTW: Christoph Beyl (incidentally a txp user) updated his slimbox especially for jquery: slimbox2.

Bloke · 2010-05-22 14:16:19

And also, if you’re ever in a situation where you absolutely must have MooTools and jQuery together, either checkout jQuery’s noconflict feature, or replace all jQuery $ symbols in your page with the word jQuery.

fantasmo · 2010-05-30 15:10:56

Hello,

i also started testing smd_gallery.

But i was wondering:
1. I use hak_tinymce to write my articles. Is it possible to insert the gallery by using one of the tinymce buttons?
I only know that button, which inserts one image.

2. If I insert the gallery manually, i first toggle the editor to disable tinymce and then i insert a tag like <txp:smd_gallery category=“animals” sublevel=“all” form=“gallery” />. Then i press “publish”. But that actually deletes what i’ve just typed in and turns on tinymce again.

I believe I still didn’t get how to use smd_gallery exactly. I hope somebody can help… if possible I’m looking for a way to insert a gallery easly via hak_tinymce.

EDIT:
Ok, now I logged out and in again, and my own rel-pulldown menue works. And also the linking and clicking works.

But still…isn’t it possible to enter a word for the “rel”? To have an input field next to the “rel”-thing in the hyperlink menue?

Last edited by fantasmo (2010-06-01 10:41:39)

Textpattern CMS

Textpattern CMS support forum

#1 2009-11-15 11:24:45

Image overview with smd_gallery

#2 2009-11-16 10:26:41

Re: Image overview with smd_gallery

#3 2010-05-22 10:56:28

Re: Image overview with smd_gallery

#4 2010-05-22 12:00:27

Re: Image overview with smd_gallery

#5 2010-05-22 14:16:19

Re: Image overview with smd_gallery

#6 2010-05-30 15:10:56

Re: Image overview with smd_gallery

Board footer