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
|

Re: Documents loaded through ajax, shadowbox not working

monkey
I'm still having issues, maybe someone who's figured it out can help.

I'm using shadowbox's wordpress plugin, and like the above posts, shadowbox works fine on the individual posts but not on the ajax loaded content.

I've tried using the shadowbox's "skip setup: false" (the plugin is even kind enough to make that a configurable option) but no matter where I try to stick "Shadowbox.setup();", I can't seem to get it to apply to the new content. I feel like there must be a simple fix, but somehow I'm missing it.

This is my current js file which changes the page content:

$(function() {

        $('header').fadeIn(1000);
        $('#backgrounds img:first').fadeIn(6000, function() {
        $('#backgrounds').cycle({
            speed: 4000,
            });
});
       
        $('nav li a').click(function(){
    var toLoad = $(this).attr('href')+' #content';  
    $('#content').fadeOut(1000,loadContent);
    $('#backgrounds').fadeOut(1000);
    $('#load').fadeIn(1000);
   
    function loadContent() {
    $('#content').load(toLoad,'',fadeInNewContent())
    }
    function fadeInNewContent() {
    $('#content').fadeIn(3000,fadeOutLoader());
        Shadowbox.init(); Shadowbox.setup();
   
    }
    function fadeOutLoader() {
    $('#load').fadeOut(1000);
    }
    Shadowbox.setup();
    return false;

    });

});


You can see, I tried adding the "Shadowbox.setup();" there at the end, but it does nothing. Is that just incorrect placement?
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

kd7rules
Super Gab, thanks so much for the solution - your solution enabled me to do in 15 minutes, what would have taken me 4 hours to figure out!
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

matlepirate
Hi !

I have a search engine powered by an Ajax request which displays results on my page. On clicking the link of a result, a Shadowbox should appear. Yet, a new page is opened when clicking on the links.

The problem is I don't know where to put the Shadowbox.setup in my code. Here it is:


function searchSuggest() {
        if (searchReq.readyState == 4 || searchReq.readyState == 0) {
                var libelle = escape(document.getElementById('libelle').value);
                var lieu = escape(document.getElementById('lieu').value);
                var utilisateur = escape(document.getElementById('utilisateur').value);
                searchReq.open("GET", 'actionrecherche.php?motcle='+libelle+'&lieu='+lieu+'&utilisateur='+utilisateur, true);
                searchReq.onreadystatechange = handleSearchSuggest;
                searchReq.send(null);
        }
}

//Called when the AJAX response is returned.
function handleSearchSuggest() {
        if (searchReq.readyState == 4) {
                var ss = document.getElementById('search_suggest')
                ss.innerHTML = '';
                var str = searchReq.responseText.split("\n");
                for(i=0; i < str.length - 1; i++) {
                        //Build our element string.  This is cleaner using the DOM, but
                        //IE doesn't support dynamically added attributes.
                        var suggest = str[i];
                        ss.innerHTML += suggest;
                }
        }
}

Would anyone be SO nice to give me a hand ?
Thanks in advance !
Mat, a student from Switzerland
Dan
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Dan
In reply to this post by Hbod
Thank you!! Worked Great for me
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox

Re: Documents loaded through ajax, shadowbox
In reply to this post by T1T
but working now..
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

trungnguyen85
In reply to this post by Hbod
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Pradeep
In reply to this post by Wizzud
Thanks a LOT :)
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Hallu
In reply to this post by Kal
Awesome! That worked!

I placed the following in my Default.Master file
Javascript:
            Shadowbox.init({
                // skip the automatic setup again, we do this later manually
                skipSetup: true
            });

            window.onload = function () {

                // set up all anchor elements with a "test" class to work with Shadowbox
                Shadowbox.setup("a.test", {
                    gallery: "test",
                    handleOversize: "resize",
                    modal: true,
                    overlayColor: "#000000",
                    overlayOpacity: 0.8,
                    counterType: "skip"
                });

            };

            $('.test').live('click', function () {
                Shadowbox.open(this);
                return false;
            });
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

tomdizzle
anyone prepared to make a tutorial for this? im such a f0cktard, i cant understand where to place what line of code... going mental..
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Rebecca
In reply to this post by mmkader85
Hi mmkader85,

I don't know if his is still relevant but I had the same problem.

It's caused because each time you call setup() it adds the images to the shadowbox cache again, resulting in images being repeated.

The solution is to call clearCache() before you call setup()

So you're function should look like this:

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

Hope this helps!
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Matt Heinrich
In reply to this post by Wizzud
Thanks Wizzud for this answer. It has helped me 3.5 years later!
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Owen
In reply to this post by Hbod
100000 cookies to you, good sir!
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Debashis Chowdhury
In reply to this post by Hbod
Thanks a lot for the solution. Your example helped me a lot to understand. :)
Reply | Threaded
Open this post in threaded view
|

Re: Documents loaded through ajax, shadowbox not working

Rajeev
In reply to this post by Hbod
Work Fine !!! Thanks
12