12.29.2007 / SmoothGallery fixes
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:
-
var myGallery;
-
function startGallery() {
-
myGallery = new gallery($('myGallery'), {
-
timed: true
-
});
-
myGallery.showCarousel();
-
}
-
function hideCarousel() {
-
myGallery.hideCarousel();
-
}
-
window.addEvent('domready',startGallery);
-
setTimeout(hideCarousel, 3000);
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.
Issue #2
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:
-
myGallery = new gallery($('myGallery'), {
-
timed: true,
-
showArrows: false
-
});
To fix this, open up jd.gallery.js and find this line:
-
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:
-
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:
-
<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:
-
$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
Thanks for this, it solved the outstanding one of the JS errors I was getting!