CODEWITHSUNDEEP
jquerybrowserlightboxprettyphoto
Archie Butler
Archie Butler

Reputation: 475

prettyPhoto only works in Firefox, needs to be cross browser

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.

Upvotes: 0

Views: 607

Answers (4)

Archie Butler
Archie Butler

Reputation: 475

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();
    });

Upvotes: 0

huncyrus
huncyrus

Reputation: 658

For idea. First of all, try to debug, what doesn't work in your code? Use the chrome dev tools or firebug under firefox or any JS debugger tool (tons of tools exists) or IE WebDev Toolbar under Explorer.

The original code is working in every browser what you try?

For binding use "ON" and before it, unbind everything and use all "prevent" stuff to avoid the double clicking jquery glitch.

This lightbox isn't replacable with other plugin or a simple css3/html5 transition effect? (or with smart little script instead of a third party plugin? )

Update: my debugger say: 

"NetworkError: 404 Not Found - http://archibaldbutler.com/projects/PA-lightbox-demo/style/loading-2.gif"


"NetworkError: 404 Not Found - http://archibaldbutler.com/projects/PA-lightbox-demo/style/grab.png"

And some url error in the html structure:

ref="//cloud.

(missing http: ?)

For final tip, i'm prefer to use for these type of sites a prototype / boilerplate or bootstrap. Try it, lot of function exists and it's not messed up.

Upvotes: 0

Jehanzeb.Malik
Jehanzeb.Malik

Reputation: 3390

The issue is with the styling of the object. If you see in developer tools, although your image is inside the anchor tag with id "youtube_video", it is positioned absolutely. I am guessing that the plugin is positioning it.

The anchor tag is not styled and its child elements are positioned absolutely. Therefor it is positioned at the beginning of document with 0px width and height. But when you click on the img tag the click event should propagate to its parents and run your click event. In your case the click event is not propagated. There are two reasons for that.

  1. The parent element (anchor) is not physically behind the img tag, and therefor does not inherit the event.
  2. Maybe the plugin when binding with img tag click event, specifically stops the click event propagation to its parent.

Try running this command in the console of your browser's developer tools. It will specifically trigger a click event on the anchor tag, showing that the lightbox is working and binding.

$('#youtube_video').trigger('click');

So what you need to do first is fix the styling and make sure that your anchor and img tag are at proper position. You can update the question if the problem persists after the fix.

Upvotes: 0

Joakim M
Joakim M

Reputation: 1803

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

Upvotes: 1

Related Questions