слайдер изображений, чтобы детализировать продукт

Question

Мне нужно сделать слайдер изображений, чтобы детализировать продукт. Есть 2 таблицы. Первый основной стол «Продукты». И вторая таблица «ImageOptions». На рисунке ниже 3 блока (рисунок 1). В двух небольших блоках отображаются изображения из таблицы «ImageOptions» (IDProduct, Image). А внутри большого блока изображение продукта отображается из таблицы «Продукты» (IDOption, ImageVarName, ProductID). Так как с помощью ajax отобразить изображение от маленького блока к большому блоку при наведении на него курсора. Я попытался написать следующий код в WebService:

[WebMethod]
    public string getVarImage(string imageUrl)
    {
        using (dbEntities db = new dbEntities ())
        {
            int productID = db.Products.FirstOrDefault(x => x.Image = = imageUrl).IDProduct;
            return db. ImageOptions.Single(x => x.ProductID = = productID).ImageVarName;
        }
    }

Как (и что) передать imageUrl из Page.

Я пробовал это:

<script type="text/javascript">
          $(document).ready(function () {

              $('.imagevarr').mouseover(function () {
                  var imageUrl = imagevarr.imageUrl;
                  $.ajax({
                      type: "POST",
                      url: "WebServiceVar.asmx/getVarImage",
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      data: "{'imageUrl':'" + imageUrl + "'}",

                      success: function (data) {
                      }
                  });
              });
          });
       </script>

<asp:ImageButton ID="ImageButton1" class="imagevarr"…> (small block)

Изображение 1