Allowing dynamic changes to the gallery content

[kibblewhite]

Issue: When dynamically changing content within the slides, when rotating through the gallery, changes are lost. This is because content is saved at the start into an array variable called 'gallery'.

Fix: Within the 'function transitionTo(gallery, index)', use '.detach()' to save any dynamically changed content on a slide back into the gallery array. Only three lines of code is required to be changed. It's an easy upgrade, couldn't be easier.

Diff:

133c133
<                       $cont.children().eq(0).css('position','absolute').slideIt({direction:oldSlideDir,showHide:'hide',changeSpeed:config.changeSpeed},function(){$(this).remove();});

---
>                       $cont.children().eq(0).css('position','absolute').slideIt({direction:oldSlideDir,showHide:'hide',changeSpeed:config.changeSpeed},function(){ gallery[oldCounter] = $(this).detach().get(0); });
138c138
<                       $cont.children().eq(0).css('position','absolute').fadeOut(config.changeSpeed,function(){$(this).remove();});

---
>                       $cont.children().eq(0).css('position','absolute').fadeOut(config.changeSpeed,function(){ gallery[oldCounter] = $(this).detach().get(0); });
143c143
<                       $cont.children().eq(0).css('position','absolute').remove();

---
>                       gallery[oldCounter] = $cont.children().eq(0).detach().get(0);
146c146
<               

---
> 

Function

            // utility for loading slides
            function transitionTo(gallery,index) {

                var oldCounter = counter;
                if((counter >= gallery.length) || (index >= gallery.length)) { counter = 0; var e2b = true; }
                else if((counter < 0) || (index < 0)) { counter = gallery.length-1; var b2e = true; }
                else { counter = index; }


                if(config.effect=='slideLeft'){
                    var newSlideDir, oldSlideDir;
                    function slideDir(dir) {
                        newSlideDir = dir=='right' ? 'left' : 'right';
                        oldSlideDir = dir=='left' ? 'left' : 'right';                   
                    };


                    counter >= oldCounter ? slideDir('left') : slideDir('right') ;

                    $(gallery[counter]).clone().appendTo($cont).slideIt({direction:newSlideDir,changeSpeed:config.changeSpeed});
                    if($cont.children().length>1){
                        $cont.children().eq(0).css('position','absolute').slideIt({direction:oldSlideDir,showHide:'hide',changeSpeed:config.changeSpeed},function(){ gallery[oldCounter] = $(this).detach().get(0); });
                    };
                } else if (config.effect=='fade') {
                    $(gallery[counter]).clone().appendTo($cont).hide().fadeIn(config.changeSpeed,function(){if($.browser.msie)this.style.removeAttribute('filter');});
                    if($cont.children().length>1){
                        $cont.children().eq(0).css('position','absolute').fadeOut(config.changeSpeed,function(){ gallery[oldCounter] = $(this).detach().get(0); });
                    };
                } else if (config.effect=='none') {
                    $(gallery[counter]).clone().appendTo($cont);
                    if($cont.children().length>1){
                        gallery[oldCounter] = $cont.children().eq(0).detach().get(0);
                    };
                };

                // update active class on slide link
                if(config.links){
                    $('.'+uniqueClass+'-active').removeClass(uniqueClass+'-active jshowoff-active');
                    $('.'+uniqueClass+'-slidelinks a').eq(counter).addClass(uniqueClass+'-active jshowoff-active');
                };
            };