Question

I have a problem I really cant solve and hopefully you guys can help me out as im relatively new at css/js. I am trying to use the neat CSS3 Page Transitions template along with the fancybox gallery.

All good but when I use the jquery.fancybox.js the template menu links wont work anymore, I click them and nothing happens, transitions not happening anymore.
I suspect there’s something that has to do with both using hrefs (the template is a one page site using hrefs and so does the .js to call the pics?)

Sorry for my bad english and lack of a mature question, hope someone knows what I’m talking about and can help me.
Cheers!

edit:

Thanks alot for trying to help, here are 2 links, note that everything on the pages are codes ive copied from the net and nothing is mine, just for test purposes.

not working with jquery fancybox

this one you can see jquery is doing its magic, when you click View in portfolio the images are properly displayed BUT the menu is not working anymore and you cant navigate.

working without the jquery fancybox

this one without the jsquery you can see the nav is properly working and page transitions happen but when you click the view thumbnail in portfolio you just see the .jpeg, ofcourse… and cant navigate thru pictures.

thanks alot for help hope this is fixable so i can have a working jquery fancybox images view WITH page transitions working!

Answer 1

It’s not fancybox that kills your CSS3 transitions. The issue is created by this line in your script.js file :

$('a').bind('click', function (event) {
  var $anchor = $(this);
  $('html, body').stop().animate({
    scrollTop: $($anchor.attr("href")).offset().top
  }, 1000, "easeOutExpo");
  event.preventDefault();
});

… where you set event.preventDefault() to ALL the anchors in your web page, including those that fancybox is bound to (<a class="fancybox" ...>).

For instance, if you comment out event.preventDefault() then you will have both fancybox and CSS3 transitions working seamlessly.

See JSFIDDLE

Generally speaking, it’s not a good idea to bind events or apply css rules to general elements or tags but use specificity instead, mostly when you have several plugins that bind other events to those elements … so instead of doing

$('a')

do

$('a.selector')