prettyPhoto only works in Firefox, needs to be cross browser

Question

I am having a compatibility issue with prettyPhoto lightbox, which I integrated myself from Github. It works fine in Firefox, but I have to double click it in Internet Explorer, Safari and Chrome. There is a conflict with my swipe actions or css transitions. Any ideas for a quick fix? Try clicking the video thumbnail or the image expand icon above it. The link is:

http://archibaldbutler.com/projects/PA-lightbox-demo/

the weird thing is it works in all browsers before the css transition/swipe effect has finished, but once the page is not moving, you can’t click these lightbox icons, same for the video icons. I am bewildered.

These are the video thumbnails FYI: http://archibaldbutler.com/projects/PA-lightbox-demo/img/bottle-thumbnail.png

This is the image pop up icon FYI: http://archibaldbutler.com/projects/PA-lightbox-demo/img/open.png

I have tried moving my prettyPhoto initialize script to the end of my document so it opens first, this didn't fix it.

I need to get the click to detect, I tried to write a "detect click" function in Javascript but I can't get it to work:

$(document).ready(function () {
  $("a#youtube_video").bind('click', function () {
     alert("I am an alert box!");
  });
});

This breaks my site. Any ideas would be greatly appreciated.

Answer 1

Someone helped me find a solution, here is the js for reference, eventhough I don't quite understand it :S

$(document).ready(function(){
    /*       console.log();
   //$('.ms-slide-layers').find('a').css({height:'100px'});
   $('.ms-slide-layers').find('a').each(function(){
     //$(this).css({zIndex:'9999', position:'absolute', backgroundColor:'#000'})
     $(this).find('img').on('click', function(e){
       console.log('here');
     });
   });
   $('.ms-view').on('click', function(e){
     console.log('leave');
   });*/
   $("a[rel^='prettyPhoto']").prettyPhoto();
    });