无法更改jQuery缩略图库中的图像

Question

我正在尝试创建一个简单的jQuery图库，每次点击一个小的50x50缩略图时都会显示更大的图像（550 x 300）。

我正在使用优化来修改预先存在的页面上的元素（因此我有一些传统Web开发的限制）并从数组中的JSON对象中提取图像URL。 （这部分工作正常）。

我可以使用我的代码显示缩略图但遇到两个主要问题：

1. 无法获取要在文档加载时显示的第一个图像： 尝试通过输入：$（document）.ready（function）并将图像标记附加到相关div，在数组中的位置[0]中选择，但没有显示任何内容来解决此问题。 （下面的完整代码）

2. 当我点击每个缩略图时，会在第一个缩略图下方添加一个新图像（原始图像不会被新图像替换）。我尝试使用replaceWith方法来解决这个问题，但它没有效果，而是得到了这个结果：



这是我正在使用的所有jQuery：

// Select image data as JSON array
var elementData = $('.carousel [data-images]').data('images');
elementData = elementData.replace(/\'/g, '"').replace(/¬/g, '\'');
var imageArray = $.parseJSON(elementData);
var bigImagesLoaded = false;

// Create full "carousel" area enclosing main image + thumb image classes
$('.tab-panel').prepend('<div class="de-carousel"></div>');

// Display first image at position [0]
 $('.de-carousel').append("<img class='de-main-img' src='"+imageArray[0].url+"&width=550&height=300&scale=both&mode=crop'/>");

// Add placeholder main image to carousel area 
// $('.de-carousel').prepend("<img class='de-main-img'src='http://placehold.it/550x300'/>");

// for loop creating thumb-img class and images inside
for (var i = 0; i < imageArray.length; i += 1){
  $('.de-carousel').prepend("<img class='de-thumb-img' value='"+i+"' src='"+imageArray[i].url+"&width=50&height=50&scale=both&mode=crop'/>");
}

$('.de-thumb-img').click(function(){

// Load and add real main image to carousel area 
if(bigImagesLoaded === false){
for (var i = 0; i < imageArray.length; i += 1){
  $('.de-carousel').prepend("<img class='de-main-img' value='"+i+"' src='"+imageArray[i].url+"&width=550&height=300&scale=both&mode=crop'/>");

}
  bigImagesLoaded = true;

}
  $('.de-main-img').css({'display': 'block'});
  var imgNumber = $(this).attr('value');
  deImageDisplayed = parseInt(imgNumber);
   $('.de-main-img').replaceWith('.de-main-img:eq('+deImageDisplayed+')').css({'display':'block'});




});


//Remove old carousel
$('.carousel').css({'display':'none'});

});

我的CSS：

.de-carousel{
    margin-left: auto;
    margin-right: auto;     
}

.de-main-img {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  display: none;
  width: 550px;
  height: 300px;

}

.de-thumb-img{
  margin-left: 1.0%;
  margin-right: 1.0%;
  margin-bottom: 5px; 
  float: inherit;
  cursor: pointer;
  display: inline-block;  
}

遗憾的是，我无法生成js小提琴，因为我无法弄清楚如何在数组中重现图像以复制我在实际页面上尝试做的事情。