Как найти идентификатор выбранного изображения, видимого на экране в javascript?

---

Привет,
Я использую приведенный ниже код для отображения изображений. (пример здесь)

 $defaultViewMode = "normal";
 $tsMargin = 30;
 $scrollEasing = 600;
 $scrollEasingType = "easeOutCirc";
 $thumbnailsContainerOpacity = 0.8;
 $thumbnailsContainerMouseOutOpacity = 0;
 $thumbnailsOpacity = 0.6;
 $nextPrevBtnsInitState = "show";
 $keyboardNavigation = "on";

 // cache
 $thumbnails_wrapper = $("#thumbnails_wrapper");
 $outer_container = $("#outer_container");
 $thumbScroller = $(".thumbScroller");
 $thumbScroller_container = $(".thumbScroller .container");
 $thumbScroller_content = $(".thumbScroller .content");
 $thumbScroller_thumb = $(".thumbScroller .thumb");
 $preloader = $("#preloader");
 $toolbar = $("#toolbar");
 $toolbar_a = $("#toolbar a");
 $bgimg = $("#bgimg");
 $img_title = $("#img_title");
 $nextImageBtn = $(".nextImageBtn");
 $prevImageBtn = $(".prevImageBtn");

 $(window).load(function () {
     $toolbar.data("imageViewMode", $defaultViewMode);
     if ($defaultViewMode == "full") {
         $toolbar_a.html("<img src='~/Photos/toolbar_n_icon.png' style='width: 50px; height: 50px' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Minimize");
     } else {
     $toolbar_a.html("<img src='~/Photos/toolbar_fs_icon.png' style='width: 50px; height: 50px' />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
     }
     ShowHideNextPrev($nextPrevBtnsInitState);

     $thumbScroller_container.css("marginLeft", $tsMargin + "px");
     sliderLeft = $thumbScroller_container.position().left;
     sliderWidth = $outer_container.width();
     $thumbScroller.css("width", sliderWidth);
     var totalContent = 0;
     fadeSpeed = 200;

     var $the_outer_container = document.getElementById("outer_container");
     var $placement = findPos($the_outer_container);

     $thumbScroller_content.each(function () {
         var $this = $(this);
         totalContent += $this.innerWidth();
         $thumbScroller_container.css("width", totalContent);
         $this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity);
     });

     $thumbScroller.mousemove(function (e) {
         if ($thumbScroller_container.width() > sliderWidth) {
             var mouseCoords = (e.pageX - $placement[1]);
             var mousePercentX = mouseCoords / sliderWidth;
             var destX = -((((totalContent + ($tsMargin * 2)) - (sliderWidth)) - sliderWidth) * (mousePercentX));
             var thePosA = mouseCoords - destX;
             var thePosB = destX - mouseCoords;
             if (mouseCoords > destX) {
                 $thumbScroller_container.stop().animate({ left: -thePosA }, $scrollEasing, $scrollEasingType);
             } else if (mouseCoords < destX) {
                 $thumbScroller_container.stop().animate({ left: thePosB }, $scrollEasing, $scrollEasingType);
             } else {
                 $thumbScroller_container.stop();
             }
         }
     });

     $thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity);
     $thumbnails_wrapper.hover(
         function () {
             var $this = $(this);
             $this.stop().fadeTo("slow", 1);
         },
         function () {
             var $this = $(this);
             $this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity);
         }
     );

     $thumbScroller_thumb.hover(
         function () {
             var $this = $(this);
             $this.stop().fadeTo(fadeSpeed, 1);
         },
         function () {
             var $this = $(this);
             $this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity);
         }
     );


     $(window).resize(function () {
         FullScreenBackground("#bgimg", $bgimg.data("newImageW"), $bgimg.data("newImageH"));
         $thumbScroller_container.stop().animate({ left: sliderLeft }, 400, "easeOutCirc");
         var newWidth = $outer_container.width();
         $thumbScroller.css("width", newWidth);
         sliderWidth = newWidth;
         $placement = findPos($the_outer_container);
     });

     var the1stImg = new Image();
     the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload);
     the1stImg.src = $bgimg.attr("src");
     $outer_container.data("nextImage", $(".content").first().next().find("a").attr("href"));
     $outer_container.data("prevImage", $(".content").last().find("a").attr("href"));
 });

 function BackgroundLoad($this, imageWidth, imageHeight, imgSrc) {
     $this.fadeOut("fast", function () {
         $this.attr("src", "").attr("src", imgSrc);
         FullScreenBackground($this, imageWidth, imageHeight);

         $preloader.fadeOut("fast", function () { $this.fadeIn("slow"); });
         var imageTitle = $img_title.data("imageTitle");
         if (imageTitle) {
             $this.attr("alt", imageTitle).attr("title", imageTitle);
             $img_title.fadeOut("fast", function () {
                 $img_title.html(imageTitle).fadeIn();
             });
         } else {
             $img_title.fadeOut("fast", function () {
                 $img_title.html($this.attr("title")).fadeIn();
             });
         }
     });
 }


 if ($toolbar.css("display") != "none") {
     $toolbar.fadeTo("fast", 0.4);
 }
 $toolbar.hover(
     function () {
         var $this = $(this);
         $this.stop().fadeTo("fast", 1);
     },
     function () { // passer la souris (mouse out)
         var $this = $(this);
         $this.stop().fadeTo("fast", 0.4);
     }
 );

 $("#outer_container a").click(function (event) {
     event.preventDefault();
     var $this = $(this);
     GetNextPrevImages($this);
     GetImageTitle($this);
     SwitchImage(this);
     ShowHideNextPrev("show");
 });

$nextImageBtn.click(function (event) {
     event.preventDefault();
     SwitchImage($outer_container.data("nextImage"));
     var $this = $("#outer_container a[href='" + $outer_container.data("nextImage") + "']");
     GetNextPrevImages($this);
     GetImageTitle($this);
 });

 $prevImageBtn.click(function (event) {
     event.preventDefault();
     SwitchImage($outer_container.data("prevImage"));
     var $this = $("#outer_container a[href='" + $outer_container.data("prevImage") + "']");
     GetNextPrevImages($this);
     GetImageTitle($this);
 });

 if ($keyboardNavigation == "on") {
     $(document).keydown(function (ev) {
         if (ev.keyCode == 39) {
             SwitchImage($outer_container.data("nextImage"));
             var $this = $("#outer_container a[href='" + $outer_container.data("nextImage") + "']");
             GetNextPrevImages($this);
             GetImageTitle($this);
             return false;

         } else if (ev.keyCode == 37) {
             SwitchImage($outer_container.data("prevImage"));
             var $this = $("#outer_container a[href='" + $outer_container.data("prevImage") + "']");
             GetNextPrevImages($this);
             GetImageTitle($this);
             return false;
         }
     });
 }

 function ShowHideNextPrev(state) {
     if (state == "hide") {
         $nextImageBtn.fadeOut();
         $prevImageBtn.fadeOut();
     } else {
         $nextImageBtn.fadeIn();
         $prevImageBtn.fadeIn();
     }
 }


 function GetImageTitle(elem) {
     var title_attr = elem.children("img").attr("title");
     $img_title.data("imageTitle", title_attr);
 }


 function GetNextPrevImages(curr) {
     var nextImage = curr.parents(".content").next().find("a").attr("href");
     if (nextImage == null) {
         var nextImage = $(".content").first().find("a").attr("href");
     }
     $outer_container.data("nextImage", nextImage);
     var prevImage = curr.parents(".content").prev().find("a").attr("href");
     if (prevImage == null) {
         var prevImage = $(".content").last().find("a").attr("href");
     }
     $outer_container.data("prevImage", prevImage);
 }


 function SwitchImage(img) {
     $preloader.fadeIn("fast");
     var theNewImg = new Image();
     theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload);
     theNewImg.src = img;
 }

 function CreateDelegate(contextObject, delegateMethod) {
     return function () {
         return delegateMethod.apply(contextObject, arguments);
     }
 }


 function theNewImg_onload() {
     $bgimg.data("newImageW", this.width).data("newImageH", this.height);
     BackgroundLoad($bgimg, this.width, this.height, this.src);
 }


 function FullScreenBackground(theItem, imageWidth, imageHeight) {
     var winWidth = $(window).width();
     var winHeight = $(window).height();
     if ($toolbar.data("imageViewMode") != "original") { //scale
         var picHeight = imageHeight / imageWidth;
         var picWidth = imageWidth / imageHeight;
         if ($toolbar.data("imageViewMode") == "full") {
             if ((winHeight / winWidth) < picHeight) {
                 $(theItem).attr("width", winWidth);
                 $(theItem).attr("height", picHeight * winWidth);
             } else {
                 $(theItem).attr("height", winHeight);
                 $(theItem).attr("width", picWidth * winHeight);
             };
         } else { // mode d'image de taille normale
             if ((winHeight / winWidth) > picHeight) {
                 $(theItem).attr("width", winWidth);
                 $(theItem).attr("height", picHeight * winWidth);
             } else {
                 $(theItem).attr("height", winHeight);
                 $(theItem).attr("width", picWidth * winHeight);
             };
         }
         $(theItem).css("margin-left", (winWidth - $(theItem).width()) / 2);
         $(theItem).css("margin-top", (winHeight - $(theItem).height()) / 2);
     } else { // pas d'échelle
         $(theItem).attr("width", imageWidth);
         $(theItem).attr("height", imageHeight);
         $(theItem).css("margin-left", (winWidth - imageWidth) / 2);
         $(theItem).css("margin-top", (winHeight - imageHeight) / 2);
     }
 }


 function ImageViewMode(theMode) {
     $toolbar.data("imageViewMode", theMode);
     FullScreenBackground($bgimg, $bgimg.data("newImageW"), $bgimg.data("newImageH"));
     if (theMode == "full") {
         $toolbar_a.html("<img src='~/Photos/toolbar_n_icon.png' style='width: 50px; height: 50px' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Minimize");
     } else {
         $toolbar_a.html("<img src='~/Photos/toolbar_fs_icon.png' style='width: 50px; height: 50px' />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
     }
 }


 function findPos(obj) {
     var curleft = curtop = 0;
     if (obj.offsetParent) {
         curleft = obj.offsetLeft
         curtop = obj.offsetTop
         while (obj = obj.offsetParent) {
             curleft += obj.offsetLeft
             curtop += obj.offsetTop
         }
     }
     return [curtop, curleft];
 }

С помощью приведенного выше кода можно ли получить идентификатор изображения, которое находится на экране?
Когда мы нажимаем на предыдущий или следующий!

спасибо,

Бруно

Что я уже пробовал:

В этой части кода я могу отобразить сообщение с путем к изображению.

  function GetNextPrevImages(curr) {
      var nextImage = curr.parents(".content").next().find("a").attr("href");
      if (nextImage == null) {
          var nextImage = $(".content").first().find("a").attr("href");
      }
      $outer_container.data("nextImage", nextImage);
      var prevImage = curr.parents(".content").prev().find("a").attr("href");
      if (prevImage == null) {
          var prevImage = $(".content").last().find("a").attr("href");
      }
      $outer_container.data("prevImage", prevImage);

alert(" " + prevImage);

  }

Вот выдержка из html кода :

       <div class="container">

           <div class="content">
               <div>
                   <a id="Son_MP3_1" href="~/Photos/Pays/1.jpg">
                       <img src="~/Photos/Pays/1_thumb.jpg" title="@Html.Raw(titre1)" alt="@Html.Raw(titre1)" class="thumb" />
                   </a>
               </div>
           </div>
           <div class="content">
               <div>
                   <a id="Son_MP3_2" href="~/Photos/Pays/2.jpg">
                       <img src="~/Photos/Pays/2_thumb.jpg" title="@Html.Raw(titre2)" alt="@Html.Raw(titre2)" class="thumb" />
                   </a>
               </div>
           </div>
</div>

как получить идентификатор объекта тег, имея путь к этому изображению?

чем ты,

---