Question

How do you make the FancyBox jQuery images clickable with the Sliding Door Hover Effect in a portfolio gallery? Right now the sliding door effect works BUT the fancybox doesn’t do anything when you click on the gallery image.

How can I get both jquery.easing.1.3.js (sliding door effect) and jquery.fancybox.js to work together?

I followed the instructions in the comments for this tutorial to DELETE: window.location = $(this).find(‘a’).attr(‘href’); – in the jquery.easing HTML Head Tag code

My website has a lot going on because it’s a one-page portfolio. I’m trying to finish this website to send to employers for jobs. I’m frustrated because I’ve been working on this website for so LONG and I need a job!

Answer 1

You have to replace the

window.location = $(this).find('a').attr('href');

with

var url = $(this).find('a').attr('href');
$.fancybox({
    'padding'       : 0,
    'href'          : url,
    'title'         : 'Lorem ipsum dolor sit amet',
    'transitionIn'  : 'elastic',
    'transitionOut' : 'elastic',
    'type'      : 'image'
});

Note that

I am using 'type' : 'image' because I am loading images from links like http://placekitten.com/200/300, in such cases forcing type is necessary as the url doesn’t have a valid image extension .

Remove that if you dont need that.

Working Demo