Fancybox stopped working properly on Chrome and only when user not logged in

Home Forums Easy FancyBox Pro Fancybox stopped working properly on Chrome and only when user not logged in

This topic contains 6 replies, has 3 voices, and was last updated by  Pharéo 2 years, 8 months ago.

  • Author
    Posts
  • #3344

    jonanwyl
    Participant

    Hi

    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

  • #3349

    jonanwyl
    Participant

    PS 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

  • #3348

    jonanwyl
    Participant

    OK 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.

  • #3347

    jonanwyl
    Participant

    I’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…

  • #3346

    jonanwyl
    Participant

    Hello 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

  • #3345

    RavanH
    Keymaster

    Hi 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.

  • #4749

    Pharéo
    Participant

    UPDATE:

    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.

You must be logged in to reply to this topic.

Site by Pharéo | Hosted on The Permanently Moving Network