Попытка применить изображение постепенно исчезает при щелчке к каждому изображению в массиве в jquery - PullRequest
Новая
       18

Попытка применить изображение постепенно исчезает при щелчке к каждому изображению в массиве в jquery

0 голосов
/ 03 апреля 2012

Довольно новый для jquery здесь.Я пытаюсь заставить изображение исчезать, когда вы нажимаете на миниатюру.Это само по себе довольно просто.У меня проблема в том, что миниатюры содержатся в массиве, который, в свою очередь, берется из базы данных.

Функция, которую я собрал вместе, чтобы попытаться сделать это, выглядит следующим образом: 

function display (array) {
$.each(array, function(i, val){
    var imageID=val[0], 
        imageURL=val[7];

'<img id="'+ imageID +'" src="images/'+ imageURL +'" width="100" height="123" />';

    $('#container').append(
        '<div id="'+array[i][0]+'" style="position: absolute;  left:'+array[i][8]+'px; top: '+array[i][9]+'px;"><img src=images/'+array[i][6]+' id=nav width=85 height=85></div>'
    );

    $("#"+array[i]).click(function () { 
            $("#"+imageID).fadeIn('slow', function  ()  {
                // animation complete
            });
      });
   });
}

для справки, массив [i] [0] относится к идентификатору изображения (число в таблице базы данных), массив [i] [6] - расположение массива миниатюр [i] [7] isрасположение массива полноразмерных изображений [i] [8] и массива [i] [9] должно быть самоочевидным, это координаты на странице миниатюры.

Полагаю, кто-нибудь сЛюбое знание jquery сможет увидеть многочисленные недостатки на первый взгляд.Я повторяю, хотя я довольно новичок в этом, поэтому, пожалуйста, будьте осторожны со мной (!)

Я подозреваю, что проблема заключается в возможности идентифицировать изображение, которое должно быть блеклым - я не уверенесли 

    '<img id="'+ array[i][0] +'" src="'+ array[i][6] +'" alt="" width="100" height="123" />';

правильно.

Будем весьма благодарны за любые указатели в правильном направлении.

Заранее спасибо Stef

1 Ответ

0 голосов
/ 03 апреля 2012

Хорошо, если вы настаиваете на загрузке всего через jQuery, вот один из способов сделать это, но я бы вообще не советовал загружать ВСЕ через jQuery. 

var content_images = '';
var content_thumbs = '';
$.each(array, function(i, val){

    var imageID=val[0], imageURL=val[7];

    content_images += '<img id="'+ imageID +'" src="images/'+ imageURL +'" width="100";height="123" />';
    content_thumbs += '<div onclick="showImage('+imageID+')" style="position: absolute;  left:'+array[i][8]+'px; top: '+array[i][9]+'px;"><img src=images/'+array[i][6]+' id=nav width=85 height=85></div>';
});

function showImage(id) {
    $('#'+id).fadeIn(slow, function(){} );
}

$('#imageContent').html(content_images);
$('#thumbContent').html(content_thumbs);

Старайтесь не писать так много CSS и HTML в javascript. Сосредоточьтесь на JS, обеспечивающем логику отображения, но оставьте отображение в чистом HTML. Делает все проще для отладки Например, вместо встроенного CSS на миниатюрах, почему бы не дать им класс «большого пальца» и написать этот CSS в обычном CSS? Нет необходимости, чтобы JS записывал один и тот же контент каждый раз. Etc ...

...