Documents loaded through ajax, shadowbox not working

classic Classic list List threaded Threaded
34 messages Options
12
Reply | Threaded
Open this post in threaded view
|

Documents loaded through ajax, shadowbox not working

Zain-3
I'm trying to use shadowbox as a nifty way to display my art.  Shadowbox is definitely nifty. But, on my site, the navigation is built and the seperate pages are loaded into a div using ajax, and on those seperate pages is where i have the shadowbox links and image elements. Now, on the content documents itself shadowbox works and is effective such as seen here:
http://cis2.oaklandcc.edu/~s74/illustrations.html

but upon viewing my index:
http://cis2.oaklandcc.edu/~s74/index.html
and clicking the ART button (nav bar icons upper right), which will load illustrations.html into the content div, shadowbox is not working. each link just loads the picture into the window like a normal link.

i've tried initializing shadowbox in various dom places logically and stuck the js in both the index and the content pages and i dunno

can this work somehow
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Hbod
Hello Zain,

don't worry.... i'm sitting here since 6 hours to get this work. And now i got it.

Shadowbox.init; or Shadowbox.init(); doensn't work, because we aren't allowed to call this init more then 1 time.

But this works:

Shadowbox.init({ skipSetup: true }); Shadowbox.setup();

Thats it.

My Script (yui shadowbox, mootools ajax)

function callAJAX(pageid) {
        var url = "index.php?article_id=11&pageid=" + pageid;

        new Fx.Tween('left',{
                        onComplete: function(){
                                new Request.HTML({
                                        method: 'get',
                                        update: $('left'),
                                        url: url,
                                        onSuccess: function(responseText, responseXML){
                                                Shadowbox.init({ skipSetup: true }); Shadowbox.setup();
                                                new Fx.Tween('left').start('opacity', '0', '1');
                                        }
                                }).send();
                        }
                }).start('opacity', '1', '0');
        return false;
}
T1T
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

T1T
In reply to this post by Zain-3
I have the same problem,
but I don't use mootools...


in my page at:
http://www.skenelab.com/index.php?page=archivio

going to "mostre" and then to "buzzati" I load an included page

http://www.skenelab.com/buzzati.htm

but shadowbox, that works in this page, doesn't start if I include this page with an ajax dynamic content script

What I have to do to re-inizialize shadowbox in this dynamic page??

thanks


Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Wizzud
It doesn't matter which library you use - MooTools, jQuery, or YUI (that you're using) - the principle is still the same.

First run Shadowbox.init() : if you have static media elements on the page that use Shadowbox then allow init() to run setup(); if you don't then by all means set skipSetup:false - your decision.

If you subsequently load any shadowboxable media dynamically, eg. by ajax, then you need to tell shadowbox about it! You do this via Shadowbox.setup(), and the Advanced Usage section of the documentation gives some pointers.

If you run Shadowbox.setup() with no arguments, it will search the current DOM for all relevant links and add new ones to its cache, or rebuild the cache entry of those it already knows about.

Alternatively, you can supply a collection of shadowboxable links as the first argument, with (optional) options as the second argument, eg Shadowbox.setup(links [, options]), where links can be a single element, an array of elements, or false/null if you simply want to supply a new set of options for current (and new) links found in the DOM.

So, for ajax calls, the 'oncomplete' (or equivalent) callback should include a call to Shadowbox.setup(), with or without arguments as you deem appropriate.

Note : Shadowbox.init() should be run at the first available opportunity on your page; re-running Shadowbox.init() at any later stage on the same page does absolutely nothing!.
Combine literacy with curiosity and a whole world of information opens up to you
T1T
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

T1T
Thanks for the answer,

I'm not a Java programmer and I've a lot of problem to solve this...

for lightbox i use this in the head:

onmouseover="if(!window.albumInit){initLightbox();window.albumInit=true;};"

and in the link that open the big picture:

onClick="myLightbox.start(this); return false;"

Are there a similar easy solution for shadowbox (that I prefer instead of lightbox) ?


thanks a lot
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Wizzud
You have to understand at least the fundamentals of what you doing.

The buzzati.htm file that you are loading by ajax is inserted into the current page's DOM, within div#pagina.
Your buzzati.htm has the shadowbox script and css files included into it, and window.onload stuff as well. Don't need it! Get rid of it! It's already in your main page!

Oh, and take out the onclick on your first image - the buzz2 one.

The ajax script you are using does not have a 'success' callback, so edit the loadpage() function and insert a Shadowbox.setup() call, eg...

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText;
Shadowbox.setup();
}

This isn't the most efficient way of doing it because it will scan the whole DOM when it doesn't really need to, but at least it should get you going.

You have lifted code from Michael's Shadowbox documentation page - the initDemos stuff - none of it is relevant to your page so take it out.
Just keep the ...
  window.onload = function(){
    Shadowbox.init();
  };

Combine literacy with curiosity and a whole world of information opens up to you
T1T
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

T1T
great!!!!
thank you !!!


You have saved me!
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Lauren
In reply to this post by Wizzud
This was VERY helpful!  Thank you.
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Super Gab
In reply to this post by Wizzud
I'm sorry  but I have a similar problem with my site.

I use Shadowbox/jQuery to display my images on this portfolio page and it works fine. I would like to load this page using an AJAX scripts, scroll down to the bottom of this page and click on photos, the page will reload and you will see that the Shadowbox doesn't work anymore.

I tried to use the LiveQuery jQuery plugin to solve this problem but my understanding of all this is not really good.

Using the following code, I'm able to get the alert message but not to make Shadowbox work.

        $('a[rel*=shadowbox]')  
        .livequery('click', function(event) {
                Shadowbox.setup();
                alert('Shadowbox test');
        });

I just don't know what to do or try next make this work.

The script I use to load the page is located here.

Many thanks for your time and help.
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Super Gab
The solution I was looking for...

        $('a[rel*=shadowbox]')  
        .livequery('click', function(event) {
                Shadowbox.open(this);
                return false;
        });
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Nick
Maybe I'm being an idiot too, but I can't seem to get dynamically loaded content to load shadowbox...

my page is at www.preciousangeldesigns.co.uk.

If you click on "what we do" and then "prepare for sale rent". There are 5 images. They all have rel="shadowbox;" attached to them, but they don't seem to work.

Any help would be much appreciated.
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Nick
i'm an idiot - i've answered my own question. The reason it wasn't loading was because i had a setTimeout on the content that was being placed on the page with ajax. I hadn't put a setTimeout on the Shadowbox.Setup().

All i did was make sure that:
 Shadowbox.init({ skipSetup: true }); Shadowbox.setup()

was initiated after the content was placed on the page. Now it works. Lovely.
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

thedavidmeister
Thank you very very much Mr. Hbod.

I dedicate my 8 hours of peaceful sleep tonight to you!
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Kody
In reply to this post by Nick
Dumb question, but how do I make sure that Shadowbox.init({ skipSetup: true }); Shadowbox.setup() is initiated after the ajax content is placed on the page.
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

vetrib2w
Hi,
This works fine for me in all the browsers expect IE browser.

  Shadowbox.init({ skipSetup: true }); Shadowbox.setup()

Error i am getting:
Message: Invalid argument.

.Why this error occurs.
Am i doing anything wrong.?
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

vetrib2w
Anybody have this problem?
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

mmkader85
In reply to this post by Zain-3
Hi,

     I had the same problem on loading the images via ajax and reached this thread to get it fixed.. thanks a lot..

     I end up another problem. Im showing up the gallery of images(having 20 pics) from webalbum with anchor tag surrounds it having rel = "shadowbox[My Gallery];width=xxx;height=xxx" for all pictures.. Its actually an ajax which is inserting the pics into a container div. Upon success ajax call, im calling the below two lines.

Shadowbox.init({ skipSetup: true });
setUpShadowBox();


The function setUpShadowBox is
function setUpShadowBox(){
        Shadowbox.setup("a.picasa_pics", {
                handleOversize: "resize"
        });
};


       Everything is fine upto now.. Now, user can refresh the container images by ajax call (given a button for the user to reload the pictures; so as to get the latest pics from the webalbum).. This also loads fine and i can still the shadowbox for the newly loaded images. But, the image counter used to show in the shadowbox increases by 20(no of images loaded) for every ajax load..

       If clicked on third image for the first time ajax call, it shows 3 of 20.. After the next ajax call, if clicked on the same third image then it shows 3 of 40.. next it is 3 of 60.. and it keeps going on..

       Can anyone help me fixing this..?

Thanks
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

cody
In reply to this post by Wizzud
@Wizzud, thank! You saved my ass too,
Kal
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Kal
In reply to this post by Super Gab
I like Super Gab's jQuery solution. Only, you don't need to use livequery now… You can simply use jQuery's new 'live' method. And using jQuery, you're free to use whatever selector you like (doesn't have to be 'rel'):

        $('.lightbox').live('click', function() {
                Shadowbox.open(this);
                return false;
        });

Too easy!
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Mihail
In reply to this post by Wizzud
Thanks for your competent help!
12