tabbed content with fancybox

Question

i am trying to load dynamic content via ajax with fancybox.

it pulls it fine but i wont change the tab if i use the default function or i use via ajax. but i use fancybox and set the type to 'iframe' it loads and tabs alternate properly.

i am looking at not using iframe so that the box can ease and auto adjust into the tabs selected

the live site is at www.wearsitbest.com ...the login/register link.

$(document).ready(function() {

      $("#various2").fancybox();

      $("#various3").fancybox();

              });     </script>

link to the fancy box

LOGIN / REGISTER

tabbed.js for the login.php

onload = function() { var e; var i = 0; while (e = document.getElementById('galleryx').getElementsByTagName ('DIV') [i++]) { if (e.className == 'on' || e.className == 'off') { e.onclick = function () { var getEls = document.getElementsByTagName('DIV'); for (var z=0; z

please help!!!!

Answer 1

Edit: Alright, I've taken a look at your login.php file. Remember that you're loading content with AJAX using the fancybox plugin. This is very different from putting it in an iframe. When you load content via AJAX, it is a part of your page and not a separate HTML document within your page. It will share the same scripts as your page and any scripts on your main page can apply to the loaded content too, which is why I suggested you use jQuery code.

Now, in the firebug javascript console when I ran the code, it worked, while when you put it in your login.php file it did not. Clearly the scripts are not getting loaded via ajax by fancybox. Look at: Using fancybox in an AJAX loaded page. You can see that there are no scripts loaded if you inspect the fancybox login element in firebug or some other tool.

Hence, you need separate code on your main page to handle the scripting for the login bit when it loads. You can use the fancybox onComplete option for this. So in your code to initialize the fancybox bit for the login link, $("#various3").fancybox();, use this instead:

$("#various3").fancybox({onComplete: function() {
    var $gallery = $('#gallery');
    var $titles = $gallery.find('div[title]');
    $titles.click(function() {
        var $this = $(this);
        if ($this.hasClass('off')) {
            $titles.removeClass('on').addClass('off');
            $this.removeClass('off').addClass('on');
            $gallery.find('.show').removeClass('show').addClass('hide').hide()
                .end().find('#' + $this.attr('title')).removeClass('hide').addClass('show').show();
        }
    });
});

Note that this is on your main page. This code will now be run each time fancybox loads content. You could use your own tabbed.js javascript code here instead of the jQuery code I've posted, however both will work fine.

Please note that there is one thing you are doing fundamentally wrong here. The only reason you would need the login.php file as a standalone page is if the user did not have javascript enabled - in this case the link would take the user to that page rather than loading the fancybox. However, your login page will not work properly without javascript. Users without javascript cannot register to your site.

You should be coding the standalone login.php page so that it works just fine without javascript and then add in the tabbing functionality entirely by code. You do not need any javascript on the login.php standalone page because any user accessing that page as is will not have javascript enabled.

A simple way to make the page work without javascript - make both the #Register and #Login divs have the 'show' class initially. Then change the first bit of my jQuery code above to:

var $gallery = $('#gallery');
$gallery.find('#Register').removeClass('show').addClass('hide');
var $titles = $gallery.find('div[title]');

Rather long, but I hope that helps you out. Let me know if you have problems.