Usng wp-slimbox2 with infinite scroll and other ajax plugins

[Anonymous]

Any idea what handle I can use to make slimbox process new data which was fetched using AJAX?

Specifically, I want to know what callback I can use with the InfiniteScroll WordPress plugin so new posts fetched will also make use of slimbox.

Thanks

[malcalevak]

The Slimbox creator, Christophe Beyls, provides an extensive API on his website: http://www.digitalia.be/software/slimbox2

You might also be able to get the desired results by calling the functions generated by your slimbox2_autoload.js.php file. The downside with this option is that you’d need to manually update the settings. There’s also a chance items might get hooked more than once.

Please post any results you discover for the use of others.

[Anonymous]

What JS does the plugin call once the page is loaded? Can you give me the chain of calls that registers all the items?

If I can call this one, it might do the trick. If it will create double registrations, I will need to somehow reset everything before.

Thanks

[malcalevak]

It’s going to be different each time depending on your settings. Check inside slimbox2_autoload.js.php (from the web interface, not through ftp, you want the output, not the code) to see what your settings are generating.

I don’t have an arrangement to test it, but in theory you could encapsulate the loading call within a function, and then call that function on the main page load, and then as your infinitescroll call back. You’d probably be able to get away with not tying in the CSS related JS.

If I get a chance later I’ll throw together a test version that does this, and you could try out.

[malcalevak]

Someone appears to have posted a very similar query to the one you did on the Slimbox creators website: http://groups.google.com/group/slimbox- … 249987bfb#

I’m unsure of how InfiniteScroll works, but it likely has a fixed area that it’s loading into, in which case you might be able to use: [code:31f6t6t9]jQuery("#content a").slimbox(); [/code:31f6t6t9] Where "content" is replaced with the id name for the container being updated by AJAX. Unfortunately I suspect it might not be sufficient enough, but it’s worth a shot.

[Anonymous]

I used firebug to debug.

Try 1:
$("#content a") is null
[Break on this error] $("#content a").slimbox();

Try 2:
jQuery("#content a").slimbox is not a function
[Break on this error] jQuery("#content a").slimbox();

The best way (and the most simple one) will be to re-init the slimbox objects and just run the load function on the whole page again.

Any way to reset the slimbox objects?
Any chance you can encapsulate the loading function for future calls?

Thanks

[malcalevak]

…did you replace "content" with the name of your container like I asked you to, or did you just literally copy and past that?

I’ll still look into encapsulation, but I’ve got a number of things I plan to work on as well.

[Anonymous]

The name of the container is content ” title=”Smiley” />
(like in most cases, since it’s almost a de-facto wordpress standard)

If you want to take a look and see what happens you can just scroll to the bottom at http://www.tinyways.com
(I saw the error with Firebug)

[malcalevak]

First…let’s warn everyone that there’s some suggestive content on your site.

That said…you should be aware that your site is rather cluttered.

You’re running two versions of jQuery, both in no conflict mode, which is almost certainly going to create issues. It appears the infinite scroll plugin is the culprit of that.

Also, what is myLightbox.initialize(); ? Since that’s all I actually see failing on your pages.

Fix the dual jQuery issue and I’ll take another look to see if I can figure out what’s up.

[Anonymous]

OK. I hopefully fixed the JS mess on my website.

I also managed to get some progress using:
jQuery("#content a").slimbox();

However, I have some weird bugs. When the page is loaded, things seem to work fine. However, after the first ajaxed scroll I get some weird stuff in the SlimBox slideshows. Specifically, when getting to the first or last in a batch, there seem to be more images available, but they never really load.

Any idea?

[malcalevak]

I suspect the problem is related to having overlapping groups (the original plus the new one), but I’m not certain. I’ll see if I can figure it out.

[Anonymous]

Thanks.

Is there maybe a way to reset the settings so the extra call won’t create any duplicates?

[malcalevak]

You only need to post once, not 3 times ” title=”Smiley” /> Since you’re using a guest account your posts need to be approved before they show.

As for your question, I have no idea, it’s a question I wanted to ask the developer myself (assuming I can’t find a related function in the API).

That said, I suspect you must be mistaken about the target area for the ajax loaded content, since if it was correct, it shouldn’t be overlapping the old data set (or maybe I’m wrong).

I’ve been very busy lately, so I haven’t really had any time to look into the issue further.

[malcalevak]

Looks like it’s a combination of things.

First off, "content" is not the target, each time a new page is called a new div is appended into the content div with an id of"infscr-page-PAGECOUNT", so the first time it loads you get "infscr-page-2", the next it’s "infscr-page-3", etc.

You’re going to want to modify your script to track each load with a variable counter, and then use "infscr-page-COUNTER" in your slimbox call.

That is, if you want each post to be it’s own gallery, if you don’t care about that, you can keep using "content".

Next, I should’ve realized this sooner, but I just looked off the similar question on the slimbox forums, and didn’t think about it. The reason you’d get all those non-loading images is likely because the call was selecting all hyperlinks, not just those of images, you’ll actually want to do something similar to the following:
jQuery("#infscr-page-2 a[href]").filter(function() {
return /.(jpg|png|gif)(?[dw=&]*)?$/i.test(this.href);
}).slimbox();

I tested this on your site myself, and it worked quite nicely on the first set of content loaded with ajax.

As we’ve now deviated away from what would really be a WP-Slimbox feature into a customization, I’m not going to write the script for you.

It’s simple enough that you should be able to figure it out on your own, and I’ve technically already done most of the work for you, I just haven’t provided a script.

I’d be willing to write the script for a small fee though, but that’s up to you.

Hopefully what I’ve provided helps you out.

[Anonymous]

OK. Took me a while until I got to it again.

So, first of all, the solution you gave is not perfect as it will not group the images properly. Since each infscr-page includes more than one post. However, I have a much simpler solution that does the trick:
1. Clear all slimbox from all the current images:
[code:1uc229qe]        jQuery("a[href]").filter(function() {
                        return /.(jpg|png|gif)(?[dw=&]*)?$/i.test(this.href);
                }).unbind("click");
[/code:1uc229qe]

2. Call the slimbox_autoload JS code again. For that purpose I wrapped the code into a function and just called it again. It re-computed slimbox for all the images.

I just have one request. I changed the slimbox_autoload.js.php file a bit, so the JS code there will be wrapped into a function. Any chance you can incorporate it into the official release?

The diff is:
[code:1uc229qe]27d26
< echo ‘function slimbox_autoload() {‘;
85,88c84
< echo ‘}
< ‘;
< echo ‘slimbox_autoload();’;
< ?>
—
> ?>
No newline at end of file
[/code:1uc229qe]

Thanks for all the help.

[Author]

Posts