Where can I find the script to get the hover effect that this website has on their thumbnails? I have looked through the source code and I can’t find it. Any help is appreciated!
Thank you for the reply.
I have a question, will this give the hover transition effect on the thumbnails (change the thumbnail by the position of the hovering cursor)? I can’t find any examples of this effect in the examples.
You could look at their code for inspiration. They are using a CSS background filmstrip-like image, with a jQuery plugin called imagescan.
The code is in the wcms-js.js file.
It’s not mentioned who developed the imagescan technique, but the jQuery plugin looks to be somewhat unpolished, so it’s most-likely an in-house job.
I wouldn’t want to make major changes to this code, so all I’ve done is used Google Chrome’s pretty print to make it readable, and run the code through jslint.com to weed out significant coding issues.
Any more than that though and I’d want at least the informed consent of the original developer.
(function ($) {
$.fn.imageScan = function (settings) {
var config = {
maxframes: 10,
filmstripPath: "/modules/Gallery/filmstrip2.php",
galleryPath: "/modules/Gallery/FlashGallery.php",
loader: "/_resources/images/loading_CCCCCC.gif",
loaderBG: "#CCCCCC",
padding: 10,
imageScale: true,
zoomOpacity: false,
zoomSpeedIn: 300,
zoomSpeedOut: 300,
zoomSpeedChange: 300,
easingIn: 'jswing',
easingOut: 'jswing',
easingChange: 'swing',
frameWidth: 752,
frameHeight: 547,
overlayShow: true,
overlayOpacity: 0.7,
hideOnContentClick: false,
centerOnScroll: true,
itemArray: [],
callbackOnStart: null,
callbackOnShow: null,
callbackOnClose: null
};
if (settings) {
$.extend(config, settings);
}
this.each(function () {
this.config = config;
this.bt = parseFloat($(this).css('border-top-width'));
this.bl = parseFloat($(this).css('border-left-width'));
this.film = (parseFloat($(this).attr('rel')) <= config.maxframes) ? parseFloat($(this).attr('rel')) : config.maxframes;
this.frame = 0;
this.current = 0;
this.galid = $(this).attr("id").substring(6);
this.factor = $(this).width() / this.film;
this.bgimage = config.filmstripPath + "?id=" + this.galid + "&w=" + $(this).width() + "&h=" + $(this).height();
this.img = new Image();
var scanner = this;
$(this).css('backgroundPosition', "center center").css("background-image", "url(" + config.loader + ")").css("background-color", config.loaderBG);
$(this.img).load(function () {
$(scanner).css('backgroundPosition', "0px 0px").css("background-image", "url(" + scanner.bgimage + ")");
$(scanner).closest('a').attr("href", config.galleryPath + "?id=" + scanner.galid);
$(scanner).mousemove(function (e) {
var x = e.pageX - $(scanner).offset().left - scanner.bl,
y = e.pageY - $(scanner).offset().top - scanner.bt,
pos = "0 0";
scanner.frame = Math.floor(x / scanner.factor) % scanner.film;
if (scanner.current !== scanner.frame) {
pos = "-" + ($(scanner).width() * scanner.frame - $(scanner).width()).toString() + "px 0px";
$(scanner).css('backgroundPosition', pos);
scanner.current = scanner.frame;
}
});
$(scanner).mouseout(function (e) {
$(scanner).css('backgroundPosition', "0px 0px");
});
var windowheight = $(window).height();
if (windowheight < 650) {
$(scanner).click(function (event) {
event.preventDefault();
window.open($(scanner).parent().attr('href'), "gallery", "height=547,width=752,status=no,toolbar=no,menubar=no,location=no");
});
} else {
$(scanner).parent().fancybox({
padding: scanner.config.padding,
imageScale: scanner.config.imageScale,
zoomOpacity: scanner.config.zoomOpacity,
zoomSpeedIn: scanner.config.zoomSpeedIn,
zoomSpeedOut: scanner.config.zoomSpeedOut,
zoomSpeedChange: scanner.config.zoomSpeedChange,
easingIn: scanner.config.easingIn,
easingOut: scanner.config.easingOut,
easingChange: scanner.config.easingChange,
frameWidth: scanner.config.frameWidth,
frameHeight: scanner.config.frameHeight,
overlayShow: scanner.config.overlayShow,
overlayOpacity: scanner.config.overlayOpacity,
hideOnContentClick: scanner.config.hideOnContentClick,
centerOnScroll: scanner.config.centerOnScroll,
itemArray: scanner.config.itemArray,
callbackOnStart: scanner.config.callbackOnStart,
callbackOnShow: scanner.config.callbackOnShow,
callbackOnClose: scanner.config.callbackOnClose
});
}
}).attr('src', this.bgimage);
});
return this;
};
}(jQuery));
Paul,
Thank you very much for your help! I really appreciate it!
I’m just starting to learn Javascript. Is it best to place this code in a new document and call it “imagescan.js” and create it a link to it in <head> with a separate jquery link too?
Also, does my site need to be in php for this to work?
Once again, thank you very much!
As I think I mentioned before, I’m not going to have anything to do with that code until I gain approval from its author for the code to be used.
You’re welcome to have someone else look at it though.