Hello,
I use the code below to display images. (
example here)
$defaultViewMode = "normal";
$tsMargin = 30;
$scrollEasing = 600;
$scrollEasingType = "easeOutCirc";
$thumbnailsContainerOpacity = 0.8;
$thumbnailsContainerMouseOutOpacity = 0;
$thumbnailsOpacity = 0.6;
$nextPrevBtnsInitState = "show";
$keyboardNavigation = "on";
$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 () {
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") {
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 {
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 {
$(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];
}
With the above code, can we get the id of the image that is on the screen?
When we click on previous or next!
thank you,
Bruno
What I have tried:
In this portion of code I can display a message with the path of the image.
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);
}
Here is an excerpt from the html code :
<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>
how to get the id of the
tag by having the path of this image?
than you,