CODEWITHSUNDEEP
jquerymagentofancybox
raduken
raduken

Reputation: 2119

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

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

Upvotes: 0

Views: 6112

Answers (3)

pythonian29033
pythonian29033

Reputation: 5207

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');
//?

Upvotes: 1

JFK
JFK

Reputation: 41143

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

Upvotes: 0

nachito
nachito

Reputation: 7035

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" />

Upvotes: 0

Related Questions