Recently I implemented Jonathan Schemoul’s SmoothGallery and ran into a few issues. I’m certain there’s at least one other person out there searching desparately for answers, so here they are:

Issue #1

First of all, I was getting a Type Mismatch error when trying to use the timed gallery. It looks like the error was due to some conflict with MooTools…I’m not really sure but I didn’t want to spend hours trying to figure out the cause exactly. Luckily, I found this post: http://smoothgallery.jondesign.net/forums/viewtopic.php?pid=2246 describing a workaround. The workaround essentially calls myGallery.showCarousel(); which opens up the carousel (aka the thumbnail thing) right from the get-go. That fixes the error issue, but now the carousel is open indefinitely. To fix the issue, I ended up with the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var myGallery;
function startGallery() {
	myGallery = new gallery($('myGallery'), {
		timed: true
	});
	myGallery.showCarousel();
}
function hideCarousel() {
	myGallery.hideCarousel();
}
window.addEvent('domready',startGallery);
setTimeout(hideCarousel, 3000);
</php>
 
Basically, it still opens up the carousel initially, but sets up a timer to close it after 3 seconds.  After implementing it, I actually like it...it kind of gives the user a peek of the carousel functionality and then gets out of the way.
 
<strong>Issue #2</strong>
 
When I try to use the flag showArrows:false, it not only removes my arrows, but it also removes the pictures.  By using the flag I mean this:
 
<pre lang="javascript" line="1">
myGallery = new gallery($('myGallery'), {
	timed: true,
	showArrows: false
});

To fix this, open up jd.gallery.js and find this line:

1

this.galleryElement.addClass(this.options.withArrowsClass);

and move it to directly after the if statement that it’s currently in. That should do it! The code will now look like this:

1
2
3
4
5
6
7
8
9
10
11
12

if ((this.galleryData.length>1)&&(this.options.showArrows))
{
	var leftArrow = new Element('a').addClass('left').addEvent(
		'click',
		this.prevItem.bind(this)
	).injectInside(element);
	var rightArrow = new Element('a').addClass('right').addEvent(
		'click',
		this.nextItem.bind(this)
	).injectInside(element);
}
this.galleryElement.addClass(this.options.withArrowsClass);

Issue #3

In the how-to guide for installing SmoothGallery, Jon’s instructions aren’t very clear about how to use thumbnails. I tried using the useThumbGenerator: true flag but couldn’t get it to work. Rather than digging through his code, I decided to directly use the resizer.php file that’s included in the script files. I’m sure there are multiple ways of doing this, but I took the resizer.php file, moved it into the root directory of my website. Then where I set up my “image elements” for SmoothGallery, I call it like so:

1
2
3
4
5
6
7

<div class="imageElement">
	<h3>GT-7 Black</h3>
	<p>A description about the GT-7 black table stand.</p>
	<a href="gt7.php" title="open image" class="open"></a>
	<img src="/images/products/gt7_black_slide.jpg" class="full" />
	<img src="/resizer.php?imgfile=images/products/gt7_black_slide.jpg" class="thumbnail" />
</div>

I then edited a couple variables in resizer.php so they are now:

1
2

$max_height = 75;
$max_width = 100;

You should be good to go now. Feel free to give me a hollar if you can’t get it to work. If you have other tips…please, join the intimate conversation.

Tags: JavaScript, SmoothGallery

This entry was posted on Saturday, December 29th, 2007 at 6:38 pm and is filed under General Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.