Question

Ok I had asked a question before about how to open fancybox from an iframe to the parent page. And the solution worked like a charm and still works. Now I’ve been asked for it to show the left, right arrows but it seems that the code to open in parent page causes it not to show the buttons? :S here’s what I have so far:

<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-buttons.css?v=2.0.3" />
<script type="text/javascript" src="js/jquery.fancybox-buttons.js?v=2.0.3"></script>

 <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-thumbs.css?v=2.0.3" />
 <script type="text/javascript" src="js/jquery.fancybox-thumbs.js?v=2.0.3"></script>
 <script>
     /* <![CDATA[ */
     $(document).ready(function() {
    $('.fancybox-buttons').click(function(e){
    e.preventDefault();
    parent.$.fancybox({
            openEffect  : 'none',
            closeEffect : 'none',

            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,

            helpers : {
                title : {
                    type : 'inside'
                },
                buttons : {}
            },
            href: this.href
        });
    });
       }); // ready
       /* ]]> */
     </script>

if I change this:

$('.fancybox-buttons').click(function(e){
    e.preventDefault();
    parent.$.fancybox({

to

$('.fancybox-buttons').fancybox({

it works, except that it doesn’t open in my parent page. Help please?

Answer 1

Are you sure you have loaded in both pages, the parent page and the iframed page, all jquery and fancybox css and js files (including the buttons and thumbs js and css files)?

On the other hand, you said that if you remove the parent reference then the code shows the left/right nav arrows? that would be weird since you are using the “manual” call method (to open in the parent page), where you cannot have the default galleries unless you set your galleries manually within your custom script like:

$('.fancybox-buttons').click(function(e){
 e.preventDefault();
 parent.$.fancybox([
  {href:'images/01.jpg', title: '01'},
  {href:'images/02.jpg', title: '02'},
  {href:'images/03.jpg', title: '03'}
 ],{
  // href: this.href // not needed
  // other options, e.g.
  helpers : {
   title : {
    type : 'inside'
    },
   buttons : {}
  },
  ......etc.
 }); // fancybox
}); // click

I updated my demo page here if you want to check it out.