Jquery and galleriffic -

Jquery and galleriffic -

this longshot but, i'm using galleriffic jquery plugin, , i'm changing images on fly javascript using appending , replacing img src:

$.each(paths,function(index, value) { if(size > 0) { var src = $('.thumbs li:nth-child('+index+')').find('img').attr('src', value); var str = value; var big_img=str.replace("_s","_b"); var src = $('.thumbs li:nth-child('+index+')').find('a').attr('href', big_img); size -- ; }

the problem i'm having somehow uses hash function convert image url display fullsize image, , since alter img src after dom loaded changed images not beingness displayed in viewer.

you can see effect here http://www.riskycode.com/wordpress/#

click on design focuses.

that's because of way plugin binding events

so before changing images attributes you'll have destroy gallerific instance;

then re-instantiate 1 time alter of images attribute finished

nb: old plugin whatever

go through code; replace this name of instance; depending on options part of script may unecesary;

start gallery.initializethumbs(); plenty (but won't trigger preload think)

// initialize thumbails this.initializethumbs(); if (this.maxpagestoshow < 3) this.maxpagestoshow = 3; this.displayedpage = -1; this.currentimage = this.data[0]; var gallery = this; // hide loadingcontainer if (this.$loadingcontainer) this.$loadingcontainer.hide(); // setup controls if (this.controlscontainersel) { this.$controlscontainer = $(this.controlscontainersel).empty(); if (this.rendersscontrols) { if (this.autostart) { this.$controlscontainer .append('<div class="ss-controls"><a href="#pause" class="pause" title="'+this.pauselinktext+'">'+this.pauselinktext+'</a></div>'); } else { this.$controlscontainer .append('<div class="ss-controls"><a href="#play" class="play" title="'+this.playlinktext+'">'+this.playlinktext+'</a></div>'); } this.$controlscontainer.find('div.ss-controls a') .click(function(e) { gallery.toggleslideshow(); e.preventdefault(); homecoming false; }); } if (this.rendernavcontrols) { this.$controlscontainer .append('<div class="nav-controls"><a class="prev" rel="history" title="'+this.prevlinktext+'">'+this.prevlinktext+'</a><a class="next" rel="history" title="'+this.nextlinktext+'">'+this.nextlinktext+'</a></div>') .find('div.nav-controls a') .click(function(e) { gallery.clickhandler(e, this); }); } } var initfirstimage = !this.enablehistory || !location.hash; if (this.enablehistory && location.hash) { var hash = $.galleriffic.normalizehash(location.hash); var imagedata = allimages[hash]; if (!imagedata) initfirstimage = true; } // setup gallery show first image if (initfirstimage) this.gotoindex(0, false, true); // setup keyboard navigation if (this.enablekeyboardnavigation) { $(document).keydown(function(e) { var key = e.charcode ? e.charcode : e.keycode ? e.keycode : 0; switch(key) { case 32: // space gallery.next(); e.preventdefault(); break; case 33: // page gallery.previouspage(); e.preventdefault(); break; case 34: // page downwards gallery.nextpage(); e.preventdefault(); break; case 35: // end gallery.gotoindex(gallery.data.length-1); e.preventdefault(); break; case 36: // home gallery.gotoindex(0); e.preventdefault(); break; case 37: // left arrow gallery.previous(); e.preventdefault(); break; case 39: // right arrow gallery.next(); e.preventdefault(); break; } }); } // auto start slideshow if (this.autostart) this.play(); // kickoff image preloader after 1 sec settimeout(function() { gallery.preloadinit(); }, 1000);

otherwise add/remove images shown there : http://www.twospy.com/galleriffic/example-4.html

jquery