AJAX loading gallery [SOLVED]

[pritaeas]

Hi.

I am almost there with my AJAX loading gallery, just need a little more guidance if possible. Basically, when a link to a gallery is clicked, I insert additional images into the DOM with jQuery. The first click only shows the first image, originally inserted by PHP code, although the DOM says the links are there. On the second click I can browse through them all. Same behaviour on Opera, Chrome, FireFox and Safari, except for IE8/IE9 which appears does not respond to the inserts, and only opens the initial image in the main window.

I have uploaded my demo here: http://www.pritaeas.net/demos/highslide-ajax/
You can download the full source to the example here: http://www.pritaeas.net/demos/highslide ... e-ajax.rar

I hope you can point me into the right direction.

Regards, Hans

[pritaeas]

I feel so silly... Apparently my html5 doctype got lost during my coding.

I have updated the demo and rar accordingly.

It looks to work better, but sometimes it behaves as in the previous post. For example, on IE9 the 1st gallery does not show the additional images, but the 2nd and 3rd appear to be working as expected. On Opera the behaviour is still the same.

Update:
Updated the code to use numberOfImagesToPreload set to zero, that fixes it for IE9, but doesn't change a thing on Opera. Haven't done any testing yet, but could it be that dynamicallyUpdateAnchors works with IE, but differently with the other browsers ?

Sidenote: My compliments for the code anyway, because I just saw it also works on my BlackBerry Touch

[RoadRash]

Hi Hans,

Try change your function to this:

Code: Select all

function ajaxLoadGallery(id, name) {
    var children = $('#container-' + name + ' > a').size();
    if (children <= 1) {
        $.getJSON('get.php?gallery=' + name, function(data) {
            $.each(data, function(key, value) {
                var link = $(document.createElement('a')).attr('href', value.name).attr('class', 'highslide').attr('onclick', 'return hs.expand(this, { thumbnailId: \'opener-' + name + '\', slideshowGroup: ' + id + ' });');
                $(link).appendTo('#container-' + name);
                var caption = $(document.createElement('div')).attr('class', 'highslide-caption').html(value.title);
                $(caption).appendTo('#container-' + name);
            })
            // open the thumb after the data has arrived over the line
            document.getElementById(name).onclick()
        });
    } else { // open the thumb now
        document.getElementById(name).onclick()
    }
    return false;
}

[pritaeas]

Thanks for this update Hilde. At least now I have the old version working on IE, and your new version on the other browsers I have no clue why your new code breaks on IE (not even after adding some missing semi-colons), but if I merge them with some conditionals I should get it to work. I'll report back when it works, and update the rar file for others to use.

Update: Just decided to try the XHTML doctype instead of the HTML5 one, and now it appears to work on IE too. I have updated the website and the rar file. Perhaps I'll write a short beginner's tutorial about how the inserting works. If I do, those links will be redirected to the article. Anyone, feel free to use the code.

[dragan]

Hi,

graet idea. I need it with thumpstrip.
Is it possible to load the thumbstrip with ajax?

[pritaeas]

I have not tried yet, but if the images are loading, then the thumbstrip should work too.

[dragan]

I need something like this: http://www.roadrash.no/hs-support/3galleries-thumbstrip-above.html

What's about .JPG Pictures??? It is only possible to show .jpg?

[pritaeas]

Extension is not important. In my demo code I only have .jpg, but I have other galleries working with all kinds of extensions/formats.

[dragan]

I did the change with the extensions.

The only problem ist the thumbstrip...
Would you help me?

[dragan]

Somebody an idea?

[torstein.honsi]

Can we see your efforts live?

[dragan]

http://risto-pc.de/bau/galery-ajax.php5

[sahar]

sorry if that might sound newbish but whats the benefit of such gallery over a normal one ?

Also why do you have a big empty part on the right side of the images?

[pritaeas]

sorry if that might sound newbish but whats the benefit of such gallery over a normal one ?

None for a regular gallery.

Also why do you have a big empty part on the right side of the images?

Looks like he wants his thumbstrip there (judging by the pointer).

[dragan]

This is precisely the point of the gallery. I want to have thumbnails.
If I load all at one time, it takes a long time.
Therefore, I came across this topic. I want to reload the thumbnails via Ajax.