simple-gallery.js only partially working, js conflict?

I am using simple-gallery.js (found here: alexkalicki.com/jquery-simple-gallery/) and it is only half-way working for me. The script seems to be pulling in the photos per the jQuery initiation code, but clicking on the thumbnails does not replace the large photo (.project-image) the way it is suppose to. I have gotten the same plugin working before, I assume there must be some kind of javascript conflict or a dumb coding mistake I can’t see. Any help would be much appreciated.

The test site is here: joshofsorts.com/projects/dsenergy/#commercial. If you click on one of the photos under the “Portfolio” heading, it will reveal the gallery in question.

Read More

Here is my js that is dynamically creating the initiation jQuery line for each gallery and inserting it into the footer:

    var newjava = "<scr"+"ipt type='text/javascript'>";
    newjava += "jQuery(document).ready(function($) {";
    $('[id$=-project-gallery]').each(function() {
        var the_id = this.id;
        newjava += "$('#" + the_id + " .project-image').gallery({source:'#" + the_id + " .project-thumbnails img'});";
    });
    newjava += "});";
    newjava += "</scr"+"ipt>";
    $('#newjava').replaceWith(newjava);

And here is the html/php:

    <div id="<?php echo $solution; ?><?php echo $item; ?>-project-gallery">
        <div class="project-image"></div>
        <div class="project-thumbnails"
        <?php if($image_count == 1){echo ' style="display:none"';} ?>>
            <?php $fourmax=0;
            foreach ($images as $image){
                if($fourmax==4) break;
                echo '<img src='.$image['sizes']['project-image'].'>';
                $fourmax++;
            } ?>
        </div>    
    </div>

Related posts