How to make an element intangible to click events?

Question

I'm currently working on a website for a client that deals with concrete an construction that requested a picture/video gallery. What I did was this:

I grouped all the picture by project (ex. masonry, brickwork etc.). The projects themselves have inside of them various pictures and videos. Here is a quick snippet:

<div class="gl-project-wrap">
    <p class="projectTitle">Commercial - new entrance Montessori school with concrete walk and architectural white poured piers</p>

        <div class="gl-image-wrap">
        <img src="images/thumbs/24.png" class="gl-image" />
            <img src="images/thumbs/25.png" class="gl-image" />
        <img src="images/thumbs/26.png" class="gl-image" />

            <img src="images/videos/screenshots/12.png" class="gl-video" alt="Brickwork - Stone Veneer" />

    </div>
</div>

Now here is what I want to do:

• When mouse hovers over image, transform image to scale(1.2), change border to white, and change cursor to pointer. This works fine. This is not my question

My question is this:

When the user clicks on an image, I wrote a jQuery plugin that reads the src of the image, extracts the number from it (ex. 24, 25, 26), goes into the 'fullsize' folder and grabs the fullsize image according to the aforementioned number and starts loading it. The image then gets displayed in a 'lightbox' type app thing blah blah blah... This works fine with the regular images. This is not my question. I'm only writing this information so I can better explain my question which is the following:

• I want the screenshot images to work the same exact way as the picture thumbs except with an additional feature. I want a play button to appear on top of the image onmousehover (or onmouseenter, whichever is better) to symbolize to the user that this is a video.

Here is the quick jQuery code I wrote for this:

var gl_video;

$(document).ready(function() {
        $(document).on("mouseenter", ".gl-video", function(){ 

        gl_video = $(this);

    var styles = { 
            top:$(this).position().top,
        left:$(this).position().left,
        width:$(this).outerWidth() + 'px',
        height:$(this).outerHeight() + 'px'
    };

    $('<span id="videoCover" class="videoCover"><p>&#x27A4</p></span>').appendTo($(this).parents('.gl-image-wrap'));
    $('.videoCover').css(styles);
    });

        $(document).on("mouseleave", ".gl-video", function() {

           $(this).css({transform:'scale(1.2)', borderColor:'#fff'});
       $('.videoCover').css({transform:'scale(1.2)'});
    });

    $(document).on("mouseleave", ".videoCover", function(){ 

           $(gl_video).css({transform:'scale(1)', borderColor:'#e09b07'});
       $(this).animate({transform:'scale(1)'},2000, function(){ $(this).remove(); });
    });

});

This sort of works but I'm not very happy with it. I'm not at all a professional javascript/jQuery programmer but even I can see that this code is horrendous and sloppy.

There are a couple things I don't like about it:

• When the user hovers over a screenshot, the span videoCover gets appended to the corresponding .gl-image-wrap but it gets appended on top of the image. This causes the onmouseenter event to switch to the span and the screenshot image is no longer considered hovered over. This is why I have created a global variable called gl-video. This way, the screenshot that was hovered over can be recorded and used later in my plugin.

What I would prefer to do is this:

When the mouse hovers over a screenshot, the play button appears over the image and everything acts normal. I don't want to use the gl-video variable anymore. I would like to have the play button appear but if the user clicks on it, it should act as tho the screenshot behind it was clicked. Right now, it acts as tho the play button was clicked due to the switching of the hover event.

I know this is somewhat confusing so I'll summarize it here: 1) I wish to make my video screenshots display a play button when hovered over 2) I want this play button to basically have no click event. If the user clicks on it, it should trigger a click event on the image behind the play button

I had a couple ideas but none that satisfied me: 1) set the following to the play button element:

pointer-events: none

Since this isn't supported in IE, I would prefer not to use it. 2) Creating a complete set of new thumbs for every video screenshot and replacing the src with the hover src for every video screenshot on hover. I would prefer not to use this because I will be having about 30-40 videos on the page and that would require to load double the pictures (once for the regular thumbs, and again for the hover picture of each one). That would increase loading time and I would like to stay away from that.

Well, that's about it. Any help would be appreciated. Before I go, I would like to mention that this code is not set in stone, meaning that I'm open to better suggestions. Don't set yourself on trying to fix my sloppy code. If you have a better idea on how to implement this, I would be more than happy to read over it.

Thanks again guys!

Here's my JSFiddle

Answer 1

My idea for your problem is to put a blank div over your image and connect all your events (click / hover / leave) that you have now connected with your image.
Under this empty div (smaller z-index) display your "play"-gif when user hover your empty div. At the bottom leave your image itact.

Thats the easiest solution i can imagine.

In your example on fiddle - i did it by wrapper just with css - no animate necessary. Here: http://jsfiddle.net/abbJV/1/
...unneeded spacing between border and image fixed: http://jsfiddle.net/abbJV/2/
...final version - styled and prettyfied: http://jsfiddle.net/abbJV/3/
enjoy!

Answer 2

Try using event.preventDefault() for the no click event of the play button and then use click() to trigger the click event of the image.