/    Sign up×
Community /Pin to ProfileBookmark

thumbnail and image

Copy linkTweet thisAlerts:
Oct 05.2004

Hello,
I want to make a page with thumbnail and where the user will “click” the thumbnail to see the full picture in pop-up.
I found this code but it doesnt work, the only thing that work is the thumbnail image, not the pop up image.
Where in this code do i put the image that will come on the pop-up?
(the pop-up image size will changed depending of the picture.)

Thank you for your help.

<A HREF=”#” onMouseOver=”window.status=’Morning Glory’;return true” onMouseOut=”window.status=”;return true” onClick=”window.open(‘nmimage.php?z=np014.jpg&width=417&height=600&title=Morning Glory’,’14’,’width=417,height=600,directories=no,l
ocation=no,menubar=no,scrollbars=no,status=no,tool
bar=no,resizable=no,left=0,top=0,screenx=50,screen
y=50′);return false”><img src=”THUMBNAIL_IMAGE.JPG” width=”100″ height=”100″ border=”0″></a>

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@agent_x91Oct 05.2004 — Try this:

[CODE]
<script language="javascript">
<!--
var tmpWin;
var x=500;var y=500;

function popupimage(image_name)
{
tmpWin=window.open("pop.html","win");
tmpWin.write("<img width='"+x+"' height='"+y+"' src='"+image_name+"'>";

}


//-->
</script>
<img src="some_img.jpg" onClick="popupimage(this.src);">











[/CODE]


change the var x = 500; and var y = 500; to the desired x and y dimensions of the larger image.
Copy linkTweet thisAlerts:
@Warren86Oct 05.2004 — ShusiGirl:

Try the following. Circular thumbnail paging, with automatic popup of full size image in new, clean window, at the images' actual size, whatever that may be. The image file names must be consecutive numbers, beginning with 1.jpg, and NO leading zero.

And, checking the post, I see that this system has again changed javascript to java script. Be aware of that, and correct it. It must be javascript.

<HTML>

<Head>

<Script Language=JavaScript>

function openFullSize(Pix){

nullIMG.src = Pix;
wStr = nullIMG.width;
offsetW = wStr;
wStr = wStr+20;
wStr = "width="+wStr;
hStr = nullIMG.height;
offsetH = hStr;
hStr = hStr+20;
hStr = "height="+hStr;
lStr = (screen.width-50-offsetW)/2;
lStr = "left="+lStr;
tStr = (screen.availHeight-50-offsetH)/2;
tStr = "top="+tStr;
window.open(Pix,"FullSize","toolbar=0,status=0, "+tStr+","+lStr+","+wStr+","+hStr+" ");
}

function buildSupport(){

styleStr = "<Style> .placeHolder {Position:Absolute;Top:-2000;};</Style>";
divStr = "<Div class=placeHolder><IMG Src=Null ID=nullIMG></Div>"
document.write(styleStr);
document.write(divStr);
}

function getSize(){

W = screen.width;
tmpStr = "";
if (W <= 800){tmpStr = "120 |90"};
if (W > 800 && W < 1200){tmpStr = "155 |116"};
if (W > 1200){tmpStr = "195 |146"};
return tmpStr;
}

tSet = new Object;
tSet.nPix = "16";
tSet.path = "Images/"; // USE "" IF IMAGES IN SAME FOLDER!
tSet.size = getSize();
tSet.size = tSet.size.split("|");

var tImgSet = buildTSet();
var firstThumb = tImgSet[0];
var pg = 0;

function buildTSet(){

aStr = "<DIV ID=currThumb><a href=javascript:openFullSize('"
bStr = ")><img src='";
cStr = " width="+tSet.size[0]+"";
dStr = " height="+tSet.size[1]+"";
eStr = " alt='Click to enlarge'></a></DIV>"
tmpStr = new Array();

for (i=1; i <= tSet.nPix; i++){
tmpStr[i-1] = aStr +tSet.path+i+ ".jpg'" + bStr +tSet.path+i+ ".jpg'" +cStr + dStr +eStr}
return tmpStr;
}

function TurnPage(direction){

if (direction == 'next'){if (pg < tSet.nPix-1){pg++} else{pg =0}}
if (direction == 'prev'){if (pg > 0){pg--} else{pg = tSet.nPix-1}}

document.getElementById('currThumb').innerHTML = tImgSet[pg];
}

function displayThumb(){

buildSupport();
document.write(firstThumb);
}

</Script>

</Head>

<Body alink=blue vlink=blue>

<center>

<H3>Circular thumbnail paging</H3>

<br>

<Script>

displayThumb();

</Script>

<br>

<input type=button value='<' onClick="TurnPage('prev')">

<input type=button value='>' onClick="TurnPage('next')">

</center>

</Body>

</HTML>
Copy linkTweet thisAlerts:
@agent_x91Oct 05.2004 — or you could use my simpler, smaller script which doesn't require the image names to be any specific value.? ? ?
Copy linkTweet thisAlerts:
@virtualOct 07.2004 — Hi agent_x91,

What's the "pop.html" and "win" in "tmpWin=window.open("pop.html","win");" I tried your script with just changing the image's name, but it didn't work, when I clicked on the image, it says error on page. what else do I need to modify this script?

Thanks a lot
Copy linkTweet thisAlerts:
@chevtexasOct 07.2004 — Try this example for simplicity ...

<script language='JavaScript'>

function openPopupImage(image_name) {

popupWin = window.open(image_name,'remote',

'menubar,width=700,height=600,left=150,top=150')

}

</script>

<A HREF="javascript:openPopupImage('/images/painter.JPG')">

<img src="/images/painter.JPG" width="75" height="75" border="0"></a>
×

Success!

Help @sushigirl spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...