SmoothGallery fixes

12.29.2007

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: ,


Comments

03.06.2008 / Dasha said:

Thanks for this, it solved the outstanding one of the JS errors I was getting!

03.13.2008 / Al said:

I am also having Issue #3 and can not solve it.
I tried the above solution but was not met with success.

I am not getting any errors tho, all I get is a missing image.

Test gallery: http://ubroadcast.com/comedy_stations/gallery2/gallery.php
missing link: http://ubroadcast.com/comedy_stations/gallery2/resizer.php?imgfile=images/tpx/3.jpg&max_width=100&max_height=75

Any help you can provide would be appreciated.
Thanks
AL

03.14.2008 / Aaron Hardy said:

Hey Al,

Thanks for the message! I’m not sure what issues you’re having exactly, but if you “view source” on the second link you posted you’ll see the following error:

Fatal error: Call to undefined function imagecreatefromjpeg() in /home/www2/comedy_stations/gallery2/resizer.php on line 73

imagecreatefromjpeg() is a function that requires the GD library. Apparently your PHP wasn’t built with this library enabled. You can find more info here:

imagecreatefromjpeg manual entry

Hope that helps!

03.24.2008 / Andrew Benitez said:

I was just glad to find out about this javascript gallery to use for my webiste. Thanks Aaron.

05.18.2010 / Ricardo said:

I just wanna say “Thanks”. It´s working fine.


Leave a Comment

Your email address is required but will not be published.




Comment