JQuery - неправильная ссылка на изображение загружает правильное изображение

Question

Итак. При тестировании на домашнем сервере Apache + Php5 все прошло (как вы уже догадались) гладко.Если бы все прошло гладко, я бы почувствовал что-то подозрительное.Я сделал.

Я загрузил код на freewebhost (эй .. ты делаешь то, что нужно.), Чтобы проверить, все ли с одинаковой удивительностью.

.. это .. "сделал".так как изображение, показанное в #mainRight_PubSpot, не то, которое должно быть (это то, что после, как ... он должен показать, что img1 показывает img2).Кроме того, если вы заметили и внимательно прочитали изображение, которое оно загружает ... не существует.Он загружает image / gal / N.jpg, когда имя файла полноN.jpg.

ps: я хотел добавить "$ (" # mainRight_PubSpot "). Css (" background-image ","URL (изображение / loading.gif)");»но это не похоже на работу.

вот как я получаю изображения в папке

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

Имя изображения / src (он же) = image / gal / fullN.jpg (n = 1, 2, 3, N) * note image / thumbN.jpg - это точно такие же картинки, что и /gal/fullN.jpg (даже цифры)

После этого у меня есть один из них "«живая мышь, волшебная штука» по понятным причинам

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();
                     $("#mainRight_PubSpot").append(this);
                     $(this).fadeIn();
                     }
                     ).attr({
                         src:"image/thumb"+imgN+".jpg",
                         width:"249",
                         height:"175",
                         id:"thumBig"
                    });
                }

Для тестирования porpuses я даю ссылку на эту вещь, если вам нужна какая-либо другая информация.http://nfd.freehostia.com/folio/findex.html

Примечание. Это работает так, как предполагается на домашнем сервере.он даже связывает правильное изображение с этой несуществующей ссылкой.(я знаю, странно) Но на живом веб-сервере все это грязно

ТАКЖЕ: этот хост работает медленно.как .. привет медленно.(это, или у меня есть ошибка в щелчке. которая не воспроизводится на домашнем сервере) знаете что-нибудь еще free-fasty?

Answer 1

Проверьте свой DOM в Firebug , вместо больших пальцев у вас есть большие изображения, а вместо одного большого у вас есть все большие пальцы, и на обработчике onlick вы добавляете div к телу, который не имеет смысла, и также при наведении мыши при добавлении больших пальцев к #mainRight_PubSpot

onclick должно выглядеть так:

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

И вместо imgt вы должны использовать div, потому что тег imgt не существует в HTML / XHTML.

RE ps: если вы добавите CSS-фон, он должен отображать загрузочное изображение, потому что большое изображение скрыто при загрузке.

Вы не используете значения из gallery.php. Если вы хотите создать галерею из JSON, вы должны вернуть в gallery.php что-то вроде:

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

и в 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;
});