jQuery not working in IE 7 and Chrome

Question

Okay, I have enough code that I probably shouldn't post the code directly, but I'm not sure where the problem lies within it.

The page in question is at letterlyyours.com/design.php. How it's supposed to work is that you type in a word, press "Submit", and then little photos of each letter appear below--that you can scroll up and down. In addition, if you click on a thumbnail, fancybox opens to show the full image.

The problem is that in Chrome, all the scrolling arrows are disabled. Also in IE 6/7 (it works in IE 8), fancybox only works for the first thumbnail in the list. Isn't that weird?

Anyway, I suspect the problem may be caused by something hackish I had to do to fix another problem. For a list of photos, I had originally used 2D arrays, like photos[4][6], but this only worked in Firefox, so I changed it to something like eval('photos'+number+'[index]), which seemed to make it work in IE except for the aforementioned problems.

The link to the file with all the javascript code is: http://letterlyyours.com/jcarousel/design.js.php

Here's the code:

photos0 = [
{url: "photos/thumb_A 1.jpg", title: "A 1"},
{url: "photos/thumb_A 2.jpg", title: "A 2"},
...
];
...
...
photos25 = [
{url: "photos/thumb_Z 1.jpg", title: "Z 1"},
...
];

jQuery(document).ready(function() {

jQuery('#create').submit(function(event) {
    var word = jQuery('#word').val();
    event.preventDefault();
    jQuery('ul').unbind();
    jQuery("#creation").html('');
    jQuery('#creation').css('width', Math.max(122, 75*word.length));
    for (var a = 0; a < word.length; a++)
        {
        jQuery('#creation').append('<ul class="jcarousel jcarousel-skin-tango" id="carousel' + a + '"></ul>');
        var total = eval('photos' + parseInt(word.toUpperCase().charCodeAt(a)-65) + '.length');
        for (var b = 0; b < total; b++)
            {
            var url = eval('photos' + parseInt(word.toUpperCase().charCodeAt(a)-65) + '[b].url');
            var url_full = url.replace('thumb_', '');
            jQuery('#carousel' + a).append('<li><a id="thumb' + b + '" href="' + url_full + '"><div style="width: 75px; height: 113px; background-image: url(\'' + url + '\');"></div></a></li>');
            jQuery('a#thumb' + b).fancybox({
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'hideOnContentClick': true
            });
            }       
        jQuery('#carousel' + a).jcarousel({
            vertical: true,
            scroll: 1,
            itemVisibleInCallback: function(carousel, li, index, state) {
                jQuery(li).parent().data('image', jQuery(li).children('a').children('div').css('background-image').replace(/"/g, ''));
            }
        });
        }
    jQuery('#creation').append('<a id="order" href="#orderform"><img width="122" height="24" src="images/button_order.png" tabindex="3" alt="Order Yours" /></a>');
    jQuery('a#order').fancybox({
    'hideOnContentClick': false,
    'transitionIn': 'fade',
    'frameWidth': 'auto',
    'title': 'Order \'' + word + '\'',
    'overlayShow': true,
    'overlayOpacity': 0.8,
    'overlayColor': 'black',
    'onStart': function() {
        jQuery('#list').html('');
        jQuery('#cost').html(word.length + ' photos at $6.00 per photo <br />Total: $' + word.length*6);
        jQuery('form#contact-form').unbind();
        jQuery('form#contact-form').submit(function(event) {
            jQuery.fancybox.showActivity();
            jQuery.post('contact.php', jQuery('form#contact-form').serialize(), function()
                {
                jQuery.fancybox(jQuery('div#thanks'));
                });
            event.preventDefault();
        });
        var photolist = '';
        for (a = 0; a < word.length; a++)
            {
            jQuery('#list').append('<div style="float: left; width: 75px; height: 113px; background-image: ' + jQuery('#carousel' + a).data('image') + '"/>');
            photolist += jQuery('#carousel' + a).data('image');
            }
        jQuery('#photonames').val(photolist);
        }
    });
});

jQuery('#word').keypress(function(event) {
    var letter = event.which;
    if ((letter != 8) && (letter != 0))
        {
        if (letter < 97)
            letter += 32;
        if (!((letter >= 97) && (letter <= 122)))
            {
            event.preventDefault();
            }
        }
});

jQuery('#word').select(function(event) {
    event.preventDefault();
});
});

Answer 1

Hi Nick,

I looked at your code. You might be on the right track for the IE problem where fancybox is only applied to one item.

The fact that the fancybox is applied to the first image, but not any after that tells me based on your script that the total variable is equal to 1 for IE7 for some reason

var total = eval('photos' + parseInt(word.toUpperCase().charCodeAt(a)-65) + '.length');

This is my assumption because then you have a for loop which attaches the fancybox to jQuery('a#thumb' + b). This must only be firing once, meaning b < total was only true for one iteration (the first iteration when b=0).

To test in IE, what you might want to try is to do a raw alert just to see what the total is. So:

var total = eval('photos' + parseInt(word.toUpperCase().charCodeAt(a)-65) + '.length');
alert('total = ' + total);

It would at least eliminate that possibility.

Also - I'm not familiar with fancybox, but I wonder if you could just apply a CSS class to the images so that rather than having to iterate and generate 'a#thumb' + b and select each one individually, you could just apply a selector such as:

jQuery('a.thumbnail').fancybox({ .... });

Anyway just some ideas to get you started...

For the Chrome issue and the carousel, have you tested the carousel plugin in Chrome, on the off-chance it's not your bug?