Photo & Video Thumbnail Gallery

Question

I've been after a simple plugin for my portfolio site so I can include photos and videos of my work.

I currently have this implemented in my website concept ; Simple Thumbnail Gallery but I wouldn't know where to start if I wanted to add video in this? even if its possible? I want 5 image thumbnails and 1 video thumbnail and when you click on any they appear in a larger viewport with fade transition. I can't believe how difficult it is to find something like this, surely people have wanted this before?

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

I had a need of something like this.
Did some research on the net & jsfiddle & modified & came up with this code.
WORKING DEMO

$(".fancybox").find("img").stop(true, true).animate({
            "opacity": 0.2
        }, "slow");

$(".fancybox").on("mouseenter", function () {
            $(this).find("img").stop(true, true).animate({
                "opacity": 1
            }, "slow");
}).on("mouseleave", function () {
        $(this).find("img").stop(true, true).animate({
            "opacity": 0.2
        }, "fast");
}).fancybox({
padding: 0,
openEffect: 'elastic',
openSpeed: 250,

closeEffect: 'elastic',
closeSpeed: 450,
closeClick: false,

helpers: {
    overlay: {
        css: {
            'background': 'rgba(0, 0, 0, 0.9)'
        }
    }
}
});

It is using fancy box plugin.
I know i might be already late in replying but just might help someone out there looking for the same query.

Photo & Video Thumbnail Gallery

1 Answers1