JQuery - Wrong image link loads correct image

So.. When testing this at the home Apache+Php5 server it all went (you all guessed) smooth. If it went smoother, i'd smell something fishy. I did.

I uploaded the code to a freewebhost (hey.. you do what you need to.) to test if all went with the same awesomeness.

..it .. "did". as the image shown in #mainRight_PubSpot is not the one's supposed to be (it's the one after, like.. it's supposed to show img1 shows img2). Also, if you notice and read carefully the image it is loading ... doesnt exist. It's loading image/gal/N.jpg when the name of the files is fullN.jpg.

ps: i wanted to add some "$("#mainRight_PubSpot").css("background-image","url(image/loading.gif)");" but it doesn't seem to work.

this is how i get the images in folder

var obj = jQuery.parseJSON(data);   
//alert(obj)
    $.each(obj,function(index, value){
        //alert(this);
        var n = index+1;
        //alert(""+n+" "+index);
        var nimg = new Image();
            $(nimg).load(function() {
                $(this).hide();
                $("#mainLeft_imgHold").append("<imgt imgn="+n+"></imgt>")
                $("#mainLeft_imgHold").find('imgt:last').append(this);
                $('imgt').css("background","");
                $(this).fadeIn();
            }).attr({
                src:""+this,
                imgn:""+n,
                id:"imgThumb"
                });

Images name/src (aka this) = image/gal/fullN.jpg (n = 1, 2, 3, N) *note image/thumbN.jpg are exactly the same pics as /gal/fullN.jpg (even the numbers)

After doing that, i have one of those "live mouseover magic thingy" for obvious reasons

if (event.type == 'mouseover') {
                    $("#mainRight_PubSpot").css("background-image","url(image/loading.gif)");
                     var imgN = $(this).attr("imgn");
                     var img = new Image();
                     $(img).load(function(){
                     $(this).hide();
            开发者_StackOverflow         $("#mainRight_PubSpot").append(this);
                     $(this).fadeIn();
                     }
                     ).attr({
                         src:"image/thumb"+imgN+".jpg",
                         width:"249",
                         height:"175",
                         id:"thumBig"
                    });
                }

For testing porpuses, i'm giving the link to the thing if you need any other info. http://nfd.freehostia.com/folio/findex.html

Note: This works like it is supposed to at the home server. it even links the correct image with that non-existing link. (i know, wierd) But it's all messy in a live webserver

ALSO: that host is slow. like.. hella slow. (that, or i have a bug in the click thing. which does not reproduce at the home server) know anyother free-fasty?

---

Check your DOM in Firebug, in place of thumbs you have big images and in place of one big you have all thumbs, and on onlick handler you add div to the body which make no sense, and also on mouseover you add thumbs to #mainRight_PubSpot

onclick should look like this:

var thumb = $('#mainRight_PubSpot').append('<img class="big"/>').
  find('.big').load(function() {
   $(this).fadeIn();
});

$('imgt').live('click', function(i, item) {
   thumb.fadeOut().attr('src', 'image/thumb/img' + $(item).attr("imgn") + ".jpg");
});

And instead of imgt you should use div because imgt tag don't exist in HTML/XHTML.

RE ps: if you add css background now it should display loading image because big image is hidden when loading.

You don't use values from gallery.php, If you want to create a gallery from JSON you should return in gallery.php something like:

[["img/thumb01.jpg", "img/big01.jpg"] ... ]

and in javascript

$(document).ready(function () {
    $.get('gallery.php',
          function(data){
                 $.each($.parseJSON(data),function(index, value){
                    $('<a href="' + value[1] + '"/>').addClass('thumb').
                        append('<img src="' + value[0] + '"/>').
                        appendTo("#mainLeft_imgHold");
                    /* this could also look like this:
                    $('<a/>').attr('href', value[1]).addClass('thumb').
                        append('<img src="' + value[0] + '"/>').
                        appendTo("#mainLeft_imgHold");
                    */
                });
            });
});

$('.thumb').live('click', function() {
    thumb.attr('src', $(this).attr('href'));
    return false;
});