CODEWITHSUNDEEP
jqueryjquery-pluginsfancybox
Nils
Nils

Reputation: 475

Opening links inside a fancybox-window inside the same fancybox window

This is probably not all that difficult, because otherwise iäm sure i wouldv'e found the answer somewhere...

What i want to do i open up a fancybox (the jquery plugin), loading it whith ajax-content, and when i click a link inside it, it loads it with new ajaxcontent, like clicking a link inside a frame.

Any ideas?

Upvotes: 2

Views: 5537

Answers (5)

user3827507
user3827507

Reputation: 21

Yes what you need is a frame (iframe). Fancybox has to know that the content its loading should be treated like a frame so you might want to use a

$('#contentclassorid').fancybox({ type: "iframe" });

Upvotes: 0

xxx
xxx

Reputation: 9094

Use the onComplete (1.3 or lower) or afterShow (2.0+) callback.

Just run the same code there as you would on your page to activate the fancybox.

I like to make it functional, so you can easily re-call it.

function initFancybox() {
  $("a.openModal").fancybox({options..., onComplete: initFancybox });
}

You can also do it manually and use a selector if you only want to activate fancybox links within the newly-opened fancybox. This might be slightly more efficient.

function initFancybox(selector) {
  if (selector == null) { selector = ""; }
  $(selector+" a.openModal").fancybox({options..., 
    onComplete: function() { initFancybox("#fancybox-content"); }
  });
}

Upvotes: 0

Marina
Marina

Reputation: 11

I don't code but it seems I have it working after I struggled for 5 hours

If you are opening a new HTML / PHP file with the fancybox this does work (ie9 / ff / safari / chrome)

I created 4 pages - main.php / page1.php / page2.php / page3.php

main.php >> Use the fancybox code (style as required)

$(document).ready(function() {
    $("a.openModal").fancybox({
    'autoDimensions'    : false,
    'width'         : 750,
    'height'        : 500,
    'transitionIn'      : 'elastic',
    'transitionOut'     : 'elastic',
    'titleShow'     : false,
    'hideOnContentClick'    : false, 
    });
});

{a href="page1.php" class="openModal"}Page Name{/a}

user clicks on fancybox link I specified on main.php (I used classes as I have many fancybox links on one page)

All pages have links to each other (but not to main.php)

page1.php & page2.php & page3.php - MUST have the same identical code you used in the main page (otherwise you'd get resizing and transition issues)

page1.php

$(document).ready(function() {
    $("a.openModal").fancybox({
    'autoDimensions'    : false,
    'width'         : 750,
    'height'        : 500,
    'transitionIn'      : 'elastic',
    'transitionOut'     : 'elastic',
    'titleShow'     : false,
    'hideOnContentClick'    : false, 
    });
});
  • {a href="page1.php" class="openModal"}Page Name{/a}
  • {a href="page2.php" class="openModal"}Page Name{/a}
  • {a href="page3.php" class="openModal"}Page Name{/a}

Works perfectly for me - links via fancybox Modal, to a page and then links to page within Modal, links to another page within Modal (I have gone 6 links in).

Must be an "easier" way (correct word would be "right") - but this workaround is my solution

I haven't tested with forms - and I cannot get "javascript: history.go(-1)" to work -

so ONLY goes forward (help with that would be AWESOME)

Upvotes: 1

EvanC
EvanC

Reputation: 61

Here's how I do it:

  $('#fancybox-content a').live('hover', function(){
    $(this).fancybox();
  });

This will fancybox-animate, including resizing, any link within a fancybox.

Upvotes: 1

instanceof me
instanceof me

Reputation: 39138

You can either

  1. use an iframe inside the fancybox (quickest & easiest, will not use ajax, yet will do as you want and easier SEO), or

  2. put a div inside your fancybox, fill it using ajax and html(), then bind the contained a elements'click event to a function which will do the same again.
    Note that with this second way, you won't automatically have the browser's back button working, SEO's harder, etc.

Upvotes: 1

Related Questions