Galleria + Colorbox working in IE, not in others

I thought I had this worked out, but unfortunately it does not work in FF or Chrome. I have a list of images that I would like displayed as a slideshow with carousel on my page. When the user clicks on the larger image I would like it to open a full size image in a lightbox. Here is the code that works in IE:

<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/galleria.js" type="text/javascript"></script>
<script src="Scripts/galleria.classic.js" type="text/javascript"></script>
<script src="Scripts/jquery.colorbox-min.js" type="text/javascript"></script>


<script type="text/javascript">
$(document).ready(function() {
    $('a[rel=test]').colorbo开发者_如何学Gox();

    $('#exteriorSlideShow_gallery').galleria({
        max_scale_ratio: 1,
        image_crop: false,
        height: 210,
        transition: 'fade',
        extend: function() {
            this.bind(Galleria.LOADFINISH, function(e) {
                $(e.imageTarget).click(this.proxy(function(e) {
                    e.preventDefault();
                    $('a[rel=test]').eq(this.active).click();
                }));
            });
        }
    });
});
</script>

In the above, "this.active" represents the index of the image in which the carousel is currently on. Since it is in the same order the links below are displayed in, it corresponds to the correct link I would like to have clicked.

<div id="exteriorSlideShow_gallery">
    <a href="/Images/ORIG1.gif" rel="test"><img src='/Images/THUMB1.gif' /></a>
    <a href="/Images/ORIG2.gif" rel="test"><img src='/Images/THUMB2.gif' /></a>
    <a href="/Images/ORIG3.gif" rel="test"><img src='/Images/THUMB3.gif' /></a>
</div>

Anyone know why this wouldn't work in anything but IE?

EDIT For the time being I have put in a work around. If the browser is IE I call the code as above else I use $.colorbox({ 'href': urloflargeimage }). This doesn't allow grouping of the images for anything but IE, but at least I have a lightbox up.

Galleria strips most of your container content after grabbing necessary data, but it leaves it hidden in IE because of a loading bug. That is why your hack works in IE but not elsewhere.

I'm not sure how colorbox works, but it looks like it cannot take a normal array of URLs and assign it as a group of images and then call each box manually onclick. But you might be able to do something like this (hack):

var box = $('a[rel=test]').clone().colorbox(); // save the colorbox array

$('#exteriorSlideShow_gallery').galleria({
    extend: function() {
        this.bind(Galleria.LOADFINISH, function(e) {
            var index = this.active;
            $(e.imageTarget).bind('click', { active: this.active }, function(ev) {
                box.eq(ev.data.active).click();
            });
        });
    }
}); 

I have solved this. You have to put the links outside the galleria container, separate from the images, then click them when an image is clicked. Like so:

$(document).ready(function(){

Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$('a[rel="lightbox"]').colorbox();
var targ;

$("#gallery").galleria({
    autoplay: 6000,
    transitionSpeed: 1000,
    transitionInitial: 'fade',
    width: 958,
    height: 443,
    imageCrop: 'width',
    minScaleRatio: 1,
    extend: function() {
        this.bind(Galleria.IMAGE, function(e) {

            $(e.imageTarget).css('cursor','pointer');

            $(e.imageTarget).click(this.proxy(function() {

                targ = $(e.imageTarget).attr('src');

                $('a[href="'+targ+'"]').click();

            }));
        });
    }

});

});

and the HTML looks like:

<div id="gallery">
    <img src="images/jqIm4.jpg" />
    <img src="images/jqIm5.jpg" />
</div>
<div id="source">
    <a href="images/jqIm4.jpg" rel="lightbox"></a>
    <a href="images/jqIm5.jpg" rel="lightbox"></a>              
</div>

The script tag is missing a quote character. Is it like that in your actual source? If so, that could seriously upset Firefox.

Specifically

<script type="text/javascript>

should be

<script type="text/javascript">