Question

This is probably a longshot but, i’m using galleriffic Jquery plugin, and i’m changing the images on the fly with javascript by using appending and replacing the 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 is that it somehow uses a hash function to convert the image URL to display the fullsize image, and since I change the img src after the DOM is loaded any changed images are not being displayed in the viewer.

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

click on design focuses.

Answer 1

that’s because of the way your plugin is binding events

so before changing the images attributes you’ll have to destroy the gallerific instance;

then re-instantiate once your change of images attribute is finished

nb: very old plugin but whatever

go through this code; replace the this by the name of your instance; depending on your options part of the script may well be unecesary;

start with gallery.initializeThumbs(); only could be enough (but won’t trigger preload i think)

    // Initialize the thumbails
    this.initializeThumbs();

    if (this.maxPagesToShow < 3)
        this.maxPagesToShow = 3;

    this.displayedPage = -1;
    this.currentImage = this.data[0];
    var gallery = this;

    // Hide the 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();
                    return 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 to show the 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 Up
                    gallery.previousPage();
                    e.preventDefault();
                    break;
                case 34: // Page Down
                    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 the slideshow
    if (this.autoStart)
        this.play();

    // Kickoff Image Preloader after 1 second
    setTimeout(function() { gallery.preloadInit(); }, 1000);

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