Question

I have created (with help from other scripts found online) a slideshow script that turns other images to greyscale when hovered and pauses the slideshow at the same time. The problem is, when I hover over one of these images that is not part of the slideshow I cant get them to fade. I’ve tried a number of things to solve this including adding the required greyscale image over the existing image but I can’t get the effect to look the same so its kind of pointless.

The code for this is as follows (I apologise if it’s a mess I’m still pretty new to Javascript):

// Holds the alt description of an image
var desc;

// Used to try to solve problem
var bgimg;
var bgli;
var current;

$(document).ready(function () {
    //Execute the slideShow, set to 3 seconds for each images
slideShow(1000);
current = $('ul.slideshow li.show');
});

$(window).focus(function () {
    timer = setInterval('gallery()', speed);
});

$(window).blur(function () {
    clearInterval(timer);
});

function slideShow(speed) {
    //Set the opacity of all images to 0
    $('ul.slideshow li').css({opacity: 0.0});
    //Get the first image and display it (set it to full opacity)
    $('ul.slideshow li:first').css({opacity: 1.0}).addClass('show');
    //Call the gallery function to run the slideshow    
    var timer = setInterval('gallery()', speed);
    desc = $('ul.slideshow li.show').find('img').attr('alt');
    
    //pause the slideshow on mouse over
    $('img.color').hover(
    function () {
        clearInterval(timer);
        $('#caption').stop().animate({'height': '70px'}, 1000);
        cptxt(desc);
        if (this.id == "img6" || this.id == "img7" || this.id == "img8" || this.id == "img9" || this.id == "img10") {
            $(img1).stop().animate({"opacity": "0"}, "slow");
            $(img2).stop().animate({"opacity": "0"}, "slow");
            $(img3).stop().animate({"opacity": "0"}, "slow");
            $(img4).stop().animate({"opacity": "0"}, "slow");
            $(img5).stop().animate({"opacity": "0"}, "slow");
        }
    },
    function () {
        timer = setInterval('gallery()', speed);
        $(img1).stop().animate({"opacity": "1"}, "slow");
        $(img2).stop().animate({"opacity": "1"}, "slow");
        $(img3).stop().animate({"opacity": "1"}, "slow");
        $(img4).stop().animate({"opacity": "1"}, "slow");
        $(img5).stop().animate({"opacity": "1"}, "slow");
        $('#caption').stop().animate({'height': '0px'}, 1000);
        $('#caption').html('');
    });
}

function gallery() {
    //if no IMGs have the show class, grab the first image
    if ($('ul.slideshow li.show').length){
    // if we found an item with the show class, assign it to current
        current = $('ul.slideshow li.show');
    } else {
        // otherwise nothing is being shown, default to first element
        $('#ul.slideshow li:first');
    }

    //trying to avoid speed issue        
    if (current.queue('fx').length == 0) {
        //Get next image, if it reached the end of the slideshow, rotate it back to the first image
        var next;
        // if there are additional elements (true when .length > 0)
        if (current.next().length) { 
            next = current.next();
            if (next.attr('id') == 'dark') {
                bgli = next;
                bgimg = next.find('img'); 
                next = next.next();
            }
        } else {
            // there is no next element, go back to first.
            next = $('ul.slideshow li:first');
        }
    
        desc = next.find('img').attr('alt');
        //Set the fade in effect for the next image, show class has higher z-index
        next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
        //Hide the current image
        current.animate({opacity: 0.0}, 1000).removeClass('show');
    }
}

function cptxt(altmsg) {
    $('#caption').html(altmsg);
}

$(document).ready(function(){
    $('img.color').hover(
    function() {
        if (this.id == "img1") {
            $(img2).stop().animate({"opacity": "0"}, "slow");
            $(img3).stop().animate({"opacity": "0"}, "slow");
            $(img4).stop().animate({"opacity": "0"}, "slow");
            $(img5).stop().animate({"opacity": "0"}, "slow");
            $(img6).stop().animate({"opacity": "0"}, "slow");       
            $(img7).stop().animate({"opacity": "0"}, "slow");
            $(img8).stop().animate({"opacity": "0"}, "slow");
            $(img9).stop().animate({"opacity": "0"}, "slow");
            $(img10).stop().animate({"opacity": "0"}, "slow");
        }
        else if (this.id == "img2") {
            $(img1).stop().animate({"opacity": "0"}, "slow");
            $(img3).stop().animate({"opacity": "0"}, "slow");
            $(img4).stop().animate({"opacity": "0"}, "slow");
            $(img5).stop().animate({"opacity": "0"}, "slow");
            $(img6).stop().animate({"opacity": "0"}, "slow");
            $(img7).stop().animate({"opacity": "0"}, "slow");
            $(img8).stop().animate({"opacity": "0"}, "slow");
            $(img9).stop().animate({"opacity": "0"}, "slow");
            $(img10).stop().animate({"opacity": "0"}, "slow");
        }
        else if (this.id == "img3") {
            $(img1).stop().animate({"opacity": "0"}, "slow");
            $(img2).stop().animate({"opacity": "0"}, "slow");
            $(img4).stop().animate({"opacity": "0"}, "slow");
            $(img5).stop().animate({"opacity": "0"}, "slow");
            $(img6).stop().animate({"opacity": "0"}, "slow");
            $(img7).stop().animate({"opacity": "0"}, "slow");
            $(img8).stop().animate({"opacity": "0"}, "slow");
            $(img9).stop().animate({"opacity": "0"}, "slow");
            $(img10).stop().animate({"opacity": "0"}, "slow");
        }
        else if (this.id == "img4") {
            $(img1).stop().animate({"opacity": "0"}, "slow");
            $(img2).stop().animate({"opacity": "0"}, "slow");
            $(img3).stop().animate({"opacity": "0"}, "slow");
            $(img5).stop().animate({"opacity": "0"}, "slow");
            $(img6).stop().animate({"opacity": "0"}, "slow");
            $(img7).stop().animate({"opacity": "0"}, "slow");
            $(img8).stop().animate({"opacity": "0"}, "slow");
            $(img9).stop().animate({"opacity": "0"}, "slow");
            $(img10).stop().animate({"opacity": "0"}, "slow");
        }
        else if (this.id == "img5") {
            $(img1).stop().animate({"opacity": "0"}, "slow");
            $(img2).stop().animate({"opacity": "0"}, "slow");
            $(img3).stop().animate({"opacity": "0"}, "slow");
            $(img4).stop().animate({"opacity": "0"}, "slow");
            $(img6).stop().animate({"opacity": "0"}, "slow");
            $(img7).stop().animate({"opacity": "0"}, "slow");
            $(img8).stop().animate({"opacity": "0"}, "slow");
            $(img9).stop().animate({"opacity": "0"}, "slow");
            $(img10).stop().animate({"opacity": "0"}, "slow");
        }
    },
    function() {
        $(img1).stop().animate({"opacity": "1"}, "slow");
        $(img2).stop().animate({"opacity": "1"}, "slow");
        $(img3).stop().animate({"opacity": "1"}, "slow");
        $(img4).stop().animate({"opacity": "1"}, "slow");
        $(img5).stop().animate({"opacity": "1"}, "slow");
        $(img6).stop().animate({"opacity": "1"}, "slow");
        $(img7).stop().animate({"opacity": "1"}, "slow");
        $(img8).stop().animate({"opacity": "1"}, "slow");
        $(img9).stop().animate({"opacity": "1"}, "slow");
        $(img10).stop().animate({"opacity": "1"}, "slow");
        }
    );
});

Sorry if the code is terrible :D. I spent a few minutes trying to lay it out properly but a lot of it needs to be cleaned up.

Anyway, to reiterate, hovering over slideshow images truns other images to greyscale correctly. Hovering over otherimages does not turn current slideshow image to greyscale.

Any help would be appreciated.

As requested, JSFiddle link
http://jsfiddle.net/KXW4f/12/

The slideshow doesn’t appear to work on it but I may have some wrong settings selected on that site. It works when run on my PC anyway but the general idea is shown though I think.

Currently, the slideshow images just fade out to white background (opacity goes to 0) but what I want is for a greyscale image to appear as it fades out. Thanks.

Answer 1

Ok, with the example it was a lot easier to understand. Nevertheless the conception of your code is a bit messy… 😉

First of all, the link to the corrected code (should work now): http://jsfiddle.net/Aletheios/ZZHjS/2/ (new link)

I’ve done the following changes:

1. Declared global variables timer, speed and img1–img8 to resolve several errors.
2. Removed slideshow start in slideShow(), the slideshow was started twice (slideShow() and window.focus).
3. Added display/show functionality for the big grayscale images. The code detects which image is currently shown in the slideshow and displays its grayscale counterpart when requested.

This is the code (see JSFiddle for details):

$("img.color").hover(function(){
    var li;
    for (var i = 6; i <= 8; ++i) {
        li = $("#img"+i).closest("li");
        if (li.hasClass("show")) {
            li.next().css("opacity", 1);
        }
    }
    ...
}, function() {
    $(...).stop().animate({"opacity": "1"}, "slow", function(){
        $(this).closest("li").next().css("opacity", 0);
    });
});

Some annotations:

1. IDs (e.g. in HTML markup) only make sense if used no more than once 😉
2. You could make your code a lot more readable (and probably more efficient) if you group together jQuery selectors. So instead of $(img1).animate() and $(img2).animate() after another better use $([img1, img2].join(",")).animate().

Hope that helps… 😉 Besides, if you don’t already use it, I’d recommend you work with Firebug; it’s a great tool to debug your JS code.