SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbnail Hover Effect

    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!

  2. #2
    SitePoint Zealot GOPalmer's Avatar
    Join Date
    Jan 2009
    Location
    Wiltshire, UK
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by GOPalmer View Post
    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.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by BTC View Post
    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.

    Code javascript:
    (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));
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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.

    Code javascript:
    (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!

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by BTC View Post
    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?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •