Hello, I've put together a rather slick site using mootools. You can
find it at http://www.gjphoto.ca. It works quite well except for one
issue with WebKit based browsers (Safari and Chrome).
If you open one of the portfolios (linked at the bottom) in FF or IE
you'll be able to see how it is supposed to work. The thumbnails
should slide up and down, and when you click on one the picture area
will slide over to the relevant photo. There are also previous and
next buttons covering each half of the picture area to navigate one
photo at a time.
The problem with Webkit is that although the picture area technically
does slide, it doesn't get refreshed until you move the mouse over it.
What I really don't get is that the thumbnails do slide very well and
the code is pretty much identical for both. Essentially, it calculates
the position that it needs to move to, use .Tween to move the
containing DIV and then enables/disables the up/down/next/previous
buttons. Here's the code:
var movePhotoViewer = function(newPhotoIndex){
if (curPhotoIndex!=newPhotoIndex) {
photoPos = photoWidth * newPhotoIndex;
lpELPhotosInside.tween('margin-left', '-'+ (photoPos) +'px');
curPhotoIndex = newPhotoIndex;
if (curPhotoIndex==0) {
lpPrevious.addClass('deactivated');
lpNext.removeClass('deactivated');
} else if (curPhotoIndex==(lpData.length-1)) {
lpNext.addClass('deactivated');
lpPrevious.removeClass('deactivated');
} else {
lpPrevious.removeClass('deactivated');
lpNext.removeClass('deactivated');
}
}
};
var moveThumbViewer = function(tmp){
if (tmp=='up') { thumbPos--; }
else if (tmp=='down') { thumbPos++; }
else {
var tmpTPos = Math.ceil((tmp+1)/thumbnailsPerPage);
if (thumbPos!=tmpTPos) {thumbPos=tmpTPos;}
}
lpELThumbInside.tween('margin-top', '-'+ ((thumbnailSize *
thumbnailRows)*(thumbPos-1)) +'px');
if (thumbPos==1) {
lpDown.removeClass('deactivated');
lpUp.addClass('deactivated');
} else if (thumbPos==maxThumbPages) {
lpDown.addClass('deactivated');
lpUp.removeClass('deactivated');
} else {
lpDown.removeClass('deactivated');
lpUp.removeClass('deactivated');
}
};
Here are a few things I've tried:
1) I tried changing it so that in Webkit browsers it doesn't tween but
just uses a setStyle. This still doesn't work.
2) I tried removing the previous/next buttons that are over the photo,
in case it was the layered divs that were the cause, this just
prevented it from ever refreshing.
Any ideas on what might be causing this?
Cheers.
