Can'；t更改jQuery缩略图图像库中的图像

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

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

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

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

单击每个缩略图时，会在第一个缩略图下方添加一个新图像（原始图像不会替换为新图像）。我尝试使用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'});

});

不幸的是，我无法生成js提琴，因为我不知道如何在数组中复制图像，以复制我试图在实际页面上执行的操作

.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;  
}