› Forums › Easy FancyBox Pro › Fancybox stopped working properly on Chrome and only when user not logged in
- This topic has 6 replies, 3 voices, and was last updated 8 years, 2 months ago by
Pharéo.
-
AuthorPosts
-
-
18 August 2014 at 15:24 #3344
jonanwyl
ParticipantHi
Easy Fancybox had been working great. Recently though I’ve been trying to develop a way to mask image urls and I thought I had it cracked but now I’ve come across a problem on Chrome.
You can see an example at http://www.jatest.dreamhosters.com/test-page/
On this page I have two examples of the same image. One fires up fancybox in the standard way, while the other uses the new hidden url approach.
It works 100% on Firefox and IE, but when I try it on Chrome it doens’t work when the user is not logged in. It works fine when a user is logged in (doesn’t seem to matter what kind of user).
Here’s how I’m doing the hidden url approach. (This is a sort of cut-down version to keep it simple, but this is exactly how it’s implemented on the test page example I’ve given.)
On the “test-page” I have the following code (with a
session_start()
further up the page)<?php $img_src = 'http://www.jatest.dreamhosters.com/wp-content/uploads/Choir-practice.jpg'; //deletes all session variables related to fancybox hidden urls //only used to keep the number of session variables down foreach ($_SESSION as $key => $session_variable) { $locator = strpos( $key, 'rfhash' ); if ( $locator > 0 ) { //if this session variable was created for fancybox hidden url (because it contains _rfhash) unset($_SESSION[$key]); } } //create new session variable $imageHash = '_rfhash'.md5(uniqid()); $_SESSION[$imageHash] = $img_src; $hidden_img_src = add_query_arg('h', $imageHash, 'http://'.$_SERVER['HTTP_HOST'].'/get-image/'); ?> Unhidden url<br /> <a class = "fancybox" href = "<?php echo $img_src; ?>"> <img src="<?php echo $img_src; ?>" width = "700" height = "525"> </a> <br /> Hidden url<br /> <a class = "fancybox {type: 'image'}" href = "<?php echo $hidden_img_src; ?>"> <img src="<?php echo $hidden_img_src; ?>" width = "700" height = "525"> </a>
Then on the get-image page that the “masked” url points to, I have:
session_start(); if (isset($_GET['h'])) { $hash = $_GET['h']; if (isset($_SESSION[$hash]) && $_SESSION[$hash]) { echo file_get_contents($_SESSION[$hash]); unset($_SESSION[$hash]); } }
I’ve run out of ideas in trying to work out what’s going wrong. I’ve compared the source code (logged in vs logged out) and I can’t see any difference except for what I would expect to see (e.g., Logout link instead of login link, plus navigation items in the menu that are only visible to logged in users).
I’d be really grateful for any help you can give!
Thanks
Jon -
18 August 2014 at 23:30 #3349
jonanwyl
ParticipantPS discovered same thing is happening on Safari
In Chrome the Console is throwing up the following, both when the page loads and then again when I click on the image to open in Fancybox:
Resource interpreted as Image but transferred with MIME type text/html
-
24 August 2014 at 23:51 #3348
jonanwyl
ParticipantOK so I deactivated and reactivated all plugins and now it’s now working on any browser whether or not logged in. (The masked url method that is – the normal method still works fine.)
So don’t bother looking in to this for now. Not really sure what’s going on.
-
27 August 2014 at 18:26 #3347
jonanwyl
ParticipantI’m back.
I have found something that fixed the problem in Chrome but it doesn’t fix it in Safari. If you could take a look at it now, maybe the Chrome fix gives a clue? I have a question out on Stack Overflow too – perhaps best to refer to that for all the details – http://stackoverflow.com/questions/25436397/masked-url-method-with-fancybox-not-working-in-chrome-and-safari
Thanks very much for any help – would really like to get this working…
-
28 August 2014 at 12:29 #3346
jonanwyl
ParticipantHello again. Fixed the problem and was nothing to do with Fancybox or the plugin. Just my code! The answer is on Stack Overflow here in case anyone is interested http://stackoverflow.com/questions/25436397/masked-url-method-with-fancybox-not-working-in-chrome-and-safari
-
7 September 2014 at 13:11 #3345
Rolf
KeymasterHi Jon, good to hear you solved the issue on your site and thanks for sharing 🙂
For future reference: the problem is that with the masked URL (even when you assign it the “fancybox” class) FancyBox does not know how to interpret the media type. The script ‘only’ scans for file name extension and decides it to be an image based when it finds .jpg/png/etc… With your masked URL, this is (probaly) not the case and FancyBox falls back to HTML content.
Two approaches are possible:
1. make the masked URLs re-use the image file name extension (and only replace the file path and name) or
2. force FancyBox to interpret the media type as image.The first solution needs to be done in the theme or the URL masking plugin. The second can be done by activating the option “Include Metadata jQuery extension…” and appending the class like:
class="fancybox {type:'image'}"
The next release of Easy FancyBox will include the possibility to use
class="fancybox image"
without the need to include the Metadata extension. -
3 April 2015 at 12:10 #4749
Pharéo
KeymasterUPDATE:
Current stable release listens to a
class="fancybox image"
link attribute. This will force FancyBox to treat the link target media as an image no matter what the MIME type or extension is.
-
-
AuthorPosts
- You must be logged in to reply to this topic.