**css File**
#zDIV_slideShow a {color:#fff;background-color:#fff}
#zDIV_slideShow {display:none;position:absolute;left:0;top:0;width:100%;height:100%;background-position:50% 50%;background-repeat:no-repeat;text-align:center;margin:0;z-index:10IE Mac;}
**js File**
var TJK_gallery;
var TJK_anchor;
var TJK_itemNumber;
var TJK_stage;
var TJK_itemTitle;
var TJK_itemDescription;
var TJK_navPrev;
var TJK_navClose;
var TJK_navNext;
var TJK_zCounter;
var TJK_zImage;
function TJK_Gallery(zElement){
TJK_gallery=zElement;
TJK_anchor = document.getElementById(TJK_gallery).getElementsByTagName("a");
// building the whole thing from scratch starting with the slideshow
// zDIV_slideShow
var zDiv_wrapper = document.createElement('div');
document.getElementsByTagName("body")[0].appendChild(zDiv_wrapper);
zDiv_wrapper.id="zDIV_slideShow";
// zA_previous
var zA_1 = document.createElement('a');
var zImg_1 = document.createElement('img');
zDiv_wrapper.appendChild(zA_1);
zA_1.id = "zA_previous";
zA_1.title = "Previous Slide";
zA_1.href = "#null";
zA_1.appendChild(zImg_1);
zImg_1.src="img/previous.gif";
zImg_1.alt="Previous Slide";
// zA_close
var zA_2 = document.createElement('a');
var zImg_2 = document.createElement('img');
zDiv_wrapper.appendChild(zA_2);
zA_2.id = "zA_close";
zA_2.title = "Back to the Gallery";
zA_2.href = "#null";
zA_2.appendChild(zImg_2);
zImg_2.src="img/close.gif";
zImg_2.alt="Back to the Gallery";
// zA_next
var zA_3 = document.createElement('a');
var zImg_3 = document.createElement('img');
zDiv_wrapper.appendChild(zA_3);
zA_3.id = "zA_next";
zA_3.title = "Next Slide";
zA_3.href = "#null";
zA_3.appendChild(zImg_3);
zImg_3.src="img/next.gif";
zImg_3.alt="Next Slide";
// zA_title
var zA_4 = document.createElement('a');
zDiv_wrapper.appendChild(zA_4);
var zTitle = document.createTextNode("Title");
zA_4.id = "zA_title";
zA_4.appendChild(zTitle);
// zDIV_counter
var zDiv_counter = document.createElement('div');
var TJK_zCounter = document.createTextNode("Keeping track");
zDiv_wrapper.appendChild(zDiv_counter);
zDiv_counter.id="zDIV_counter";
zDiv_counter.appendChild(TJK_zCounter);
// zA_image
var zA_6 = document.createElement('a');
var zImg_6 = document.createElement('img');
zDiv_wrapper.appendChild(zA_6);
zA_6.id = "zA_image";
zA_6.appendChild(zImg_6);
zImg_6.id="zIMG";
// zA_description
var zA_5 = document.createElement('a');
var zDescription = document.createTextNode("Description");
zDiv_wrapper.appendChild(zA_5);
zA_5.id = "zA_description";
zA_5.href = "#";
zA_5.appendChild(zDescription);
for (var x=0,i=TJK_anchor.length;x<i;x++){
TJK_anchor[x].onclick = badabingbadaboum;
// we create fragment identifier to be used to navigate and keep track of the items and we kick start the whole thing
TJK_anchor[x].href = TJK_anchor[x].href+"#"+x;
// we create a container to receive the text links
var zSPAN = document.createElement('span');
TJK_anchor[x].appendChild(zSPAN);
var zTextLink = document.createTextNode(TJK_anchor[x].title);
zSPAN.appendChild(zTextLink);
}
}
function goPrevious() {
TJK_itemNumber = eval(document.getElementById("zA_title").hash.substring(1));
// hiding the button if we are on first slide
if(TJK_itemNumber==1)this.className="transparent";
TJK_navNext.className="nonOpaque";
if(TJK_itemNumber==0){return} // we are at the beginning
TJK_zImage.src = TJK_anchor[TJK_itemNumber-1].href;
TJK_zImage.alt = TJK_itemTitle.firstChild.data;
TJK_itemTitle.href = TJK_anchor[TJK_itemNumber-1].href;
TJK_itemTitle.firstChild.data = TJK_anchor[TJK_itemNumber-1].getElementsByTagName("img")[0].alt;
TJK_itemDescription.firstChild.data = TJK_anchor[TJK_itemNumber-1].title;
// special care for this one in case there is no long description set
if(TJK_anchor[TJK_itemNumber-1].getElementsByTagName("img")[0].longDesc){
TJK_itemDescription.href = TJK_anchor[TJK_itemNumber-1].getElementsByTagName("img")[0].longDesc;
// appendData() breaks IE5 Win
TJK_itemDescription.firstChild.data=TJK_anchor[TJK_itemNumber-1].title+" [more info...]";
TJK_itemDescription.title = "Follow this link for more Information";
TJK_itemDescription.className="noHand";
TJK_itemDescription.style.textDecoration ="underline";
}else{
TJK_itemDescription.className="withHand";
TJK_itemDescription.title="";
TJK_itemDescription.href="#";
TJK_itemDescription.style.textDecoration ="none";
}
// we update the value of the counter in the DIV
var current = eval(document.getElementById("zA_title").hash.substring(1)) + 1;
TJK_zCounter.firstChild.data = "Item #"+current+" out of "+TJK_anchor.length;
}
function goNext() {
TJK_itemNumber = eval(document.getElementById("zA_title").hash.substring(1));
// hiding the button if we are on the last slide
if(TJK_itemNumber==TJK_anchor.length-2)this.className="transparent";
TJK_navPrev.className="nonOpaque";
if(TJK_anchor.length == TJK_itemNumber+1){return} // we are at the end
TJK_zImage.src = TJK_anchor[TJK_itemNumber+1].href;
TJK_zImage.alt = TJK_itemTitle.firstChild.data;
TJK_itemTitle.href = TJK_anchor[TJK_itemNumber+1].href;
TJK_itemTitle.firstChild.data = TJK_anchor[TJK_itemNumber+1].getElementsByTagName("img")[0].alt;
TJK_itemDescription.firstChild.data = TJK_anchor[TJK_itemNumber+1].title;
// special care for this one in case there is no long description set
if(TJK_anchor[TJK_itemNumber+1].getElementsByTagName("img")[0].longDesc){
TJK_itemDescription.href = TJK_anchor[TJK_itemNumber+1].getElementsByTagName("img")[0].longDesc;
// appendData() breaks IE5 Win
TJK_itemDescription.firstChild.nodeValue=TJK_anchor[TJK_itemNumber+1].title+" [more info...]";
TJK_itemDescription.title = "Follow this link for more Information";
TJK_itemDescription.className
="noHand";
TJK_itemDescription.style.textDecoration ="underline";
}else{
TJK_itemDescription.className
="noHand";
TJK_itemDescription.title="";
TJK_itemDescription.href="#";
TJK_itemDescription.style.textDecoration ="none";
}
// we update the value of the counter in the DIV
var current = eval(document.getElementById("zA_title").hash.substring(1)) + 1;
TJK_zCounter.firstChild.data = "Item #"+current+" out of "+TJK_anchor.length;
}
// to make sure users don't follow the link in the title (it is there to be used as a match with the thumbnail that triggered the popup DIV)
function fakeIt() {return false}
// hiding the SlideShow
function hideTJK_stage() {
document.getElementById("zDIV_slideShow").style.height="0"; // IE5 Mac
document.getElementById("zDIV_slideShow").style.overflow="hidden"; // IE5 Mac
document.getElementById("zDIV_slideShow").style.display="none";
// we remove the opacity stuff
document.getElementById("wrapper").className="none";
// we set focus back to the thumbnail that triggered the "popup" DIV
var TJK_itemNumber = eval(document.getElementById("zA_title").hash.substring(1));
TJK_anchor[TJK_itemNumber].focus();
}
function badabingbadaboum() {
TJK_stage = document.getElementById("zDIV_slideShow");
TJK_itemTitle = document.getElementById("zA_title");
TJK_itemDescription = document.getElementById("zA_description");
TJK_navPrev = document.getElementById("zA_previous");
TJK_navClose = document.getElementById("zA_close");
TJK_navNext = document.getElementById("zA_next");
TJK_zCounter = document.getElementById("zDIV_counter");
TJK_zImage = document.getElementById("zA_image").getElementsByTagName("img")[0];
// we do some opacity stuff
document.getElementById("wrapper").className="transparent";
// IE5 Mac (phantom links)
// this.blur();
// this is to reset the fix for IE Mac (see statement in (hideTJK_stage())
TJK_stage.style.height="20%";
TJK_stage.style.display="block";
TJK_zImage.src = this.href.replace(this.hash,"");
TJK_zImage.alt = this.getElementsByTagName("img")[0].alt;
TJK_zImage.onclick = hideTJK_stage;
// "style.cursor" breaks IE5
TJK_zImage.className = "hand";
TJK_zImage.title = "Back to the Gallery";
// the href value we set for this anchor will be used to give focus back to the appropriate thumbnail
TJK_itemTitle.setAttribute("href",this.href);
// since we have a real href value in there we don't want the user to trigger the link
TJK_itemTitle.onclick=fakeIt;
// clicking on the close box will close the popup DIV
TJK_navClose.onclick=hideTJK_stage;
// setting the action for the prev/next links
TJK_navPrev.onclick=goPrevious;
TJK_navNext.onclick=goNext;
// now we can set focus for keyboard users
TJK_navPrev.focus();
// setting the height - mainly for IE - the second one is for IE5
TJK_stage.style.height = (document.documentElement.clientHeight > 0) ? document.documentElement.clientHeight+"px" : document.body.clientHeight+"px";
// setting the width for IE 5 so there is no gap near the scrollbar
if(document.documentElement.clientHeight == 0)TJK_stage.style.width=document.body.clientWidth+"px" ;
// setting the title and description
TJK_itemTitle.firstChild.data = this.getElementsByTagName("img")[0].alt;
TJK_itemDescription.firstChild.data = this.title;
// if there is a long description in there, we use it as href value of the short description and we give it a title to. If there is none we make sure we reset values previously set and we do not let the user follow the "empty" link
if(this.getElementsByTagName("img")[0].longDesc){
TJK_itemDescription.href = this.getElementsByTagName("img")[0].longDesc;
// appendData() breaks IE5 Win
TJK_itemDescription.firstChild.data=this.title+" [more info...]";
TJK_itemDescription.title = "Follow this link for more Information";
}else{
TJK_itemDescription.removeAttribute("href");
TJK_itemDescription.title = "";
}
// we set the starting values for the "counter"
var current = eval(TJK_itemTitle.hash.substring(1)) + 1;
TJK_zCounter.firstChild.nodeValue = "Slide #"+current+" out of "+TJK_anchor.length;
// hiding the button when everything "loads" depending on which slide we are on
// first we reset both buttons in case they have been turned off last time the user left the slideshow
TJK_navNext.className="nonOpaque";
TJK_navPrev.className="nonOpaque";
TJK_itemNumber = eval(document.getElementById("zA_title").hash.substring(1));
if(TJK_itemNumber==0){
TJK_navPrev.className="transparent";
TJK_navNext.className="nonOpaque";
}
if(TJK_itemNumber==document.getElementById(TJK_gallery).getElementsByTagName("a").length-1){
TJK_navNext.className="transparent";
TJK_navPrev.className="nonOpaque";
}
return false;
}
**in jsp**
<ul id="gallery" >
<li><a name="zGallery" href="img/NNG.jpg"><img src="img/noida.png" /></a></li>
<li><a href="img/002.jpg"><img src="img/gurgaon.png" /></a></li>
<li><a href="img/003.jpg"><img src="img/bhiwadi.png" /></a></li>
<li><a href="img/004.jpg"><img src="img/sohna.png" /></a></li>
<li><a href="img/005.jpg"><img src="img/YamunaExpressway.png" width="260" /></a></li>
</ul>
i am using a image as a link so when you click new image will open on top of current page. i want to control the size of image.I have high pixel image so it covers all my page even more. So what change or extra code i need to use to control the size of image.....
我正在使用图像作为链接,因此当您单击新图像时将在当前页面顶部打开。我想控制图像的大小。我有高像素图像,所以它覆盖了我的所有页面甚至更多。那么我需要用什么改变或额外的代码来控制图像的大小.....
2 个解决方案
#1
0
This is an example for you that I have a div(width:500, height: 300) will contain the image and the image(1000px x 500px) like this:
这是一个例子,我有一个div(宽度:500,高度:300)将包含图像和图像(1000px x 500px),如下所示:
<div style="width: 500px; height: 300px;" id="container">
<img src="yourUrl" id="image"/>
</div>
In javascript I'll do like this:
在javascript中,我会这样做:
document.getElementById('image').onload = function(){
if(this.naturalWidth > this.naturalHeight){
this.style.Width = document.getElementById('container').style.Width + " !important";
this.style.Height = "auto !important";
}
else{
this.style.Height = document.getElementById('container').style.Height + " !important";
this.style.Width = "auto !important";
}
}
#2
0
You can specify the height and width of an image based on pixels or percentage.
您可以根据像素或百分比指定图像的高度和宽度。
Eg: <img src="image.jpg" style="width: 50%; height: 50%"/>
例如:
#1
0
This is an example for you that I have a div(width:500, height: 300) will contain the image and the image(1000px x 500px) like this:
这是一个例子,我有一个div(宽度:500,高度:300)将包含图像和图像(1000px x 500px),如下所示:
<div style="width: 500px; height: 300px;" id="container">
<img src="yourUrl" id="image"/>
</div>
In javascript I'll do like this:
在javascript中,我会这样做:
document.getElementById('image').onload = function(){
if(this.naturalWidth > this.naturalHeight){
this.style.Width = document.getElementById('container').style.Width + " !important";
this.style.Height = "auto !important";
}
else{
this.style.Height = document.getElementById('container').style.Height + " !important";
this.style.Width = "auto !important";
}
}
#2
0
You can specify the height and width of an image based on pixels or percentage.
您可以根据像素或百分比指定图像的高度和宽度。
Eg: <img src="image.jpg" style="width: 50%; height: 50%"/>
例如: