Hi,

i made an interactive slideshow with the help of other users here that allows you to slide the current image and another user on their own end can see the changes in real time. The page kinda works its just that it gets stuck after a while. I use jquery to have the page continuously read a value stored in an external txt file which contains the ID of the current image so it can detect when it changes and slide to that image. However seems like this method overloads the page and thats what makes it get stuck.

This is my code as of now:

Code:
(function(d) {
    var get = ajaxNew(function() {
        if ((this.readyState == 4) && (!get.ignore)) {
            var id = 'visual' + get.responseText;
            if (
                (this.status == 200) &&
                (current.id != id)
            ) setCurrent(d.getElementById(id));
            this.nextEvent = setTimeout(request, 1000);
        }
    });
   
    if (get !== false) {
        var
            t,
            fader = d.getElementById('fader'),
            botones = d.getElementById('botones'),
            divstatus = d.getElementById('status'),
            tags = fader.querySelectorAll('img, iframe'),
            iList = tags,
            iListMax = iList.length - 1,
            set = ajaxNew(function() {
                if (this.readyState == 4) {
                    textReplace(status, current.id);
                    get.ignore = false;
                    get.nextEvent = setTimeout(request, 1000);
                }
            }),
            current = iList[0],
            status = d.createElement('div'),
            previous = false;
           
        function prevent(e) {
            if (e.preventDefault) e.preventDefault();
            e.returnValue = false;
        }
 
        function setCurrent(e) {
            if (current != e) {
                get.ignore = true;
                clearTimeout(get.nextEvent);
                if (previous) classRemove(previous, 'previous');
                if (current) {
                    classSwap(current, 'current', 'previous');
                    previous = current;
                }
                current = e;
                classAdd(e, 'current');
                set.open('GET', 'imageId.txt', true);
                set.send();
            }
                var isJPG = $(current).attr('src').split('.').pop();
    if($('#fader').hasClass('scriptedFader') && isJPG == 'JPG') {
      classSwap(fader, 'scriptedFader', 'visorclose');
    } else if($('#fader').hasClass('visorclose') && isJPG != 'JPG') {
      classSwap(fader, 'visorclose', 'scriptedFader');
    }
        }
           
        classAdd(fader,'visorclose');
   
        function request() {
            get.open('GET','imageId.txt', true);
            get.send();
            this.ignore = false;
        }
   
        request();
       
        divstatus.appendChild(status);
       
    } // might want to add an else handler for no AJAX here
})(document);
The html code is really simple, only the images on the gallery:

HTML Code:
<img id="visual1" src="01.jpg">
<img id="visual2" src="02.jpg">
 
and so on
Also 2 buttons, one for going to the next image and other for the previous. They only thing they do is to update the value in the text file with the current one. They work fine so no need to put here.

I would like to know if there is a more effective alternative for this. Something like the way Facebook and google notifies you of new messages without having to reload the page.

Thank you.