Fancybox The requested content cannot be loaded. Please try again later

Question

<link rel="stylesheet" href="<?php echo $this->getSkinUrl(''); ?>js/fancybox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo $this->getSkinUrl(''); ?>js/fancybox/source/jquery.fancybox.pack.js?v=2.0.6"></script>

<script type="text/javascript">

$(document).ready(function() {
  $("a#image").fancybox();
  $("a#image").trigger('click');
  $("a#image").hide();
});

<a id="image" href="banner-about-cart.png"><img src="<?php echo $this->getSkinUrl() ?>images/banner-about-cart.png" alt=""/></a>

Any ideas? The image loading I test without fancy plugin I can see image in site, I am using magento as well.

Answer 1

I think you should specify the fancybox class inline, remember that there are styling code in the css file as well:

 <a id="image" href="banner-about-cart.png" class="fancybox">
    <img src="<?php echo $this->getSkinUrl(); ?>images/banner-about-cart.png" alt="" />
 </a>
 <!--notice that you forgot to semi-colon after $this->getSkinUrl() -->
<script>
   $(document).ready(function() {
     $("a#image").fancybox();
     //try wrapping the rest of the code in this document load:
     $(document).load(function(){
         $("a#image").trigger('click');
         $("a#image").hide();
     });
   });
</script>

also, what happens If you try one of the following?:

 $('#image').trigger('click');
//or
$('a[id="image"]').trigger('click');
//?

Answer 2

When using getSkinUrl() you should put the path as the parameter to the function, not after it. There is logic within the method that looks in the current theme for the file you've specified, and if it doesn't exist there then it falls back to the default theme path.

Example

Let's assume you use a custom theme (named custom/theme). Given the following file structure:

skin/
  frontend/
    custom/
      theme/
        images/
          new-logo.png
    default/
      default/
        images/
          new-logo.png
          logo.png

// Good!
<?php echo $this->getSkinUrl('images/new-logo.png'); ?>
// returns http://www.example.com/skin/frontend/custom/theme/images/new-logo.png

// Good, even though images/logo.png doesn't exist in our custom theme.
<?php echo $this->getSkinUrl('images/logo.png'); ?>
// returns http://www.example.com/skin/frontend/default/default/images/logo.png

// Bad! This will cause a 404 error!
<?php echo $this->getSkinUrl('') . 'images/logo.png'; ?>
// returns http://www.example.com/skin/frontend/custom/theme/images/logo.png

I should point out that I don't think this will work with query strings ?v=2.0.6 so that you'll need to append:

<link rel="stylesheet"
      href="<?php echo $this->getSkinUrl('js/fancybox/source/jquery.fancybox.css'); ?>?v=2.0.6"
      type="text/css"
      media="screen" />

Answer 3

Maybe this

href="banner-about-cart.png"

should be

href="<?php echo $this->getSkinUrl() ?>images/banner-about-cart.png"

or simply

href="images/banner-about-cart.png"

Check that you have the right path. Can you link to the image if javascript is disable (and the link is not hidden yet)?

A side note:

This :

  $("a#image").fancybox();
  $("a#image").trigger('click');
  $("a#image").hide();

can be reduced to this :

$("a#image").fancybox().trigger('click').hide();

... just for fun ;)