Galleria + Colorbox working in IE, not in others

Question

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]').colorbox();

    $('#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.

Answer 1

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">

Answer 2

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();
            });
        });
    }
}); 

Answer 3

how can I use thumbnails already exist to load large images

something like

<a href="larg.jpg"> <img src="thum.jpg" /></a>

Answer 4

I have the same situation except I'm trying to load a youtube video in the modal window (the thumbnails are the video thumbnails). I tried the above hack and got very close - the modal window comes up for a split second and then redirects to youtube. I'm not quite sure why - any ideas?

Thanks for any info.