hover effect not working after Jquery

Question

I am currently making a website for an architecture firm, HLArchitects. In the projects page I have created an HTML / Javascript image gallery. When you hover over a smaller thumbnail the opacity changes from 0.5 to 1. It can be viewed here for reference: http://www.hla.co.za/projects/Hyuandai_Training_Centre/

My problem is that after you click on one of the smaller thumbnails, which changes the bigger picture above it, and then try to hover over another smaller thumbnail, it no longer changes opacity. I used a simple CSS :hover to change the opacity along with transition: opacity 0.2s. Here is the Javascript / Jquery for the on click event of he thumbnail:

var imageFlow = document.getElementById("imageFlow");
var img = imageFlow.getElementsByTagName("img");

$("#imageFlow img").click(function(){
    var src = $(this).attr("src");
    if (src != $('#displayImg img').attr("src")){
        $('#displayImg img').fadeOut(200);
        setTimeout(function(){$("#displayImg img").attr("src",src);}, 200);
        $('#displayImg img').fadeIn(200);
    }

    for (var i = 0; i < img.length; i++) {
        $(img[i]).css("opacity","0.5");         
    }
    $(this).css("opacity","1");

})

HTML:

<div id="displayImg">
        <img src="images/095.jpg">
    </div>

    <div id="imageFlow">
        <img src="images/095.jpg" alt="095" width="" height="" />
        <img src="images/105.jpg" alt="105" width="" height="" />
        <img src="images/106.jpg" alt="106" width="" height="" />
        <img src="images/110.jpg" alt="110" width="" height="" />
        <img src="images/133.jpg" alt="133" width="" height="" />
        <img src="images/137.jpg" alt="137" width="" height="" />
        <img src="images/138.jpg" alt="138" width="" height="" />
        <img src="images/141.jpg" alt="141" width="" height="" />
        <img src="images/145.jpg" alt="145" width="" height="" />
        <img src="images/149.jpg" alt="149" width="" height="" />
        <img src="images/160.jpg" alt="160" width="" height="" />
        <img src="images/DSC_0077.jpg" alt="DSC_0077" width="" height="" />
        <img src="images/DSC_0091.jpg" alt="DSC_0091" width="" height="" />
        <img src="images/DSC_0092.jpg" alt="DSC_0092" width="" height="" />
        <img src="images/DSC_0093.jpg" alt="DSC_0093" width="" height="" />
        <img src="images/DSC_0252.jpg" alt="DSC_0252" width="" height="" />
        <img src="images/DSC_0357.jpg" alt="DSC_0357" width="" height="" />
        <img src="images/DSC_0360.jpg" alt="DSC_0360" width="" height="" />
        <img src="images/DSC_0380.jpg" alt="DSC_0380" width="" height="" />
    </div>

I would really appreciate a solution to this so that the hover effect works even after you click on one of the thumbnails.
Thank you in advance

When you set styles with javascript, they are inline and override your stylesheet. Add and remove a class instead, and the issue will solve itself. — adeneo
– adeneo, Commented Apr 9, 2014 at 17:24
@adeneo would there be any way to add and remove the class but keep the transition? — YSK .CO
– YSK .CO, Commented Apr 9, 2014 at 17:26

adeneo · Accepted Answer · 2014-04-09 17:31:46Z

2

var images = $("#imageFlow img");

images.on('click', function(){
    var src = $(this).attr("src");

    if (src != $('#displayImg img').attr("src")){
        $('#displayImg img').fadeOut(200, function() {
            $(this).attr("src", src).fadeIn(200);
        });
    }

    images.removeAttr('style');
    this.style.opacity = '1';
});

FIDDLE

Also, your site has two opening body tags and strange invalid markup.

answered Apr 9, 2014 at 17:31

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

YSK .CO Over a year ago

Really appreciate your help. The reason for this is that I have made use of a php include() which I have not yet properly formatted

Roko C. Buljan · Accepted Answer · 2014-04-09 17:35:41Z

1

CSS:

#imageFlow img:hover,
#imageFlow img.active {
    opacity: 1;
}

JS:

var $img = $("#imageFlow").find("img");

$img.click(function(){
    var src = this.src;
    if (src != $('#displayImg img')[0].src){
        $(this).addClass('active').siblings('img').removeClass('active');
        $('#displayImg img').stop().fadeTo(200,0, function(){
             this.src = src;
             $(this).fadeTo(200, 1);
        });
    }
});

Take a good look at your HTML elements and fix unclosed tags, duplicate tags, duplicate ID elements etc... , and on other JS errors that pop out in console in your page. Otherwise you'll be running in loops ;)

edited Apr 9, 2014 at 17:35

answered Apr 9, 2014 at 17:28

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Comments

squashriddle · Accepted Answer · 2014-04-09 17:55:09Z

0

Initially when I run this in the console I get this error:

TypeError: projs is null
var img = projs.getElementsByTagName('img');

It seems that your script is looking for something in the DOM that hasn't loaded yet.

Currently proj.js is looking for elements that haven't loaded yet.

Your script should run at the bottom of your page like the imageFlow.js.

answered Apr 9, 2014 at 17:55

squashriddle

1761 silver badge5 bronze badges

Collectives™ on Stack Overflow

hover effect not working after Jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related