Click Thumbnail or Link, Make It Appear in Center of Page

[etower464i]

I was wondering when creating galleries, could you create a gallery of thumbnails within an area on your webpage, but once you clicked on an image in your gallery it showed up or "enlarged" on the same page.

kind of like when you go to certain websites and you click a link on the left
and the image displays in the center of the page without having to reload the entire page.

If anyone could help me with this, I would very much appreciate it* - this pretty much is the only problem I have with bluevoda, which is super tiny compared to the other software I've used. I would highly recommed bluevoda to anyone wishing to create websites.

[Sarah]

Hi, what you are describing requires frames. Go to the following thread where pable describes how this can be done in Blue Voda:

http://www.vodahost.com/vodatalk/showthread.php?t=714&highlight=frames

Sarah :)

[Maddog]

Try this

Place in head

<script language="javascript" type="text/javascript">
<!--
/************************************************** **
Author: Eric King
Url: http://redrival.com/eak/index.shtml
This script is free to use as long as this info is left in
Featured on Dynamic Drive script library (http://www.dynamicdrive.com)
************************************************** **/
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math .floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Mat h.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(scr een.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPositi on+',left='+LeftPosition+',scrollbars='+scroll+',l ocation=no,directories=no,status=no,menubar=no,too lbar=no,resizable=no';
win=window.open(mypage,myname,settings);}
// -->
</script>

Then Put this in a HTLM box, place the box where you want it

<a href="http://www.yoursite/image" onclick="NewWindow(this.href,'message','495','600' ,'no','center');return false" onfocus="this.blur()">Click Here too enlarge Image</a>

How this helps

PS you can change the size of new page etc, use PIX to set the size of your image on opening

[RiverGal]

I am sorry - could you help a very beginner and map out where to put that code?
I would be extemely appreciative.

Thank You.

[Maddog]

HI Rivergal

1st you need to download Pixresize

http://www.vodahost.com/help.htm

then make 2 copies of the image, one small and one large

save both and upload to your site using the FTP program

then copy and past the following into the "between the head" ( right click on your page, page HTML)

<script language="javascript" type="text/javascript">
<!--
/************************************************** **
Author: Eric King
Url: http://redrival.com/eak/index.shtml
This script is free to use as long as this info is left in
Featured on Dynamic Drive script library (http://www.dynamicdrive.com)
************************************************** **/
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math .floor(Math.rand om()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Mat h.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(scr een.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPositi on+',left='+LeftPosition+',scrollbars='+scroll+',l ocation=no,directories=no,status=no,menubar=no,too lbar=no,resizable=no';
win=window.open(mypage,myname,settings);}
// -->
</script>


then using HTML box ( left of the screen)

place the following

<a href="http://www.yoursitename/largeimage.jpeg" onclick="NewWindow(this.href,'message','800','500' ,'no','center');return false" onfocus="this.blur()"><img src=" http://www.yoursitename/smallimage.jpg" align="top" border=0 width=109 height=27 ></a>

you will need to change the size width/height to you small image


I publish a test site for you see how it works

http://www.easttilburyinfantschool.com/fenlands/test2/test1.html

Let me know if you need any more help either email me or replay here

Hope this is what you wanted

[specialtiesbarbados]

Hi Maddog,

What if one wants the larger image onmouseover (not clicking on thumbnail, just hovering over it) and on the same page, say, in an empty area on the right side of menu/thumbnails... then, when you move the mouse over the next thumbnail the previous larger image is replaced with new one ??

I have tried so many combinations, my head is spinning.

An other java *****t that has increased the rate of spin, I am going to post under IMAGE BOOKLET

Norbert

[Maddog]

Now your asking alot lol!, let me think about it a few days and I will get back to you.

[Maddog]

Hi Maddog,

What if one wants the larger image onmouseover (not clicking on thumbnail, just hovering over it) and on the same page, say, in an empty area on the right side of menu/thumbnails... then, when you move the mouse over the next thumbnail the previous larger image is replaced with new one ??

I have tried so many combinations, my head is spinning.

An other java *****t that has increased the rate of spin, I am going to post under IMAGE BOOKLET

Norbert

Norbert,

Is this what your after?

http://www.easttilburyinfantschool.com/fenlands/test2/rollovertest.php

if it is then drop me line and I will try and take your through it

[specialtiesbarbados]

Norbert,

Is this what your after?

http://www.easttilburyinfantschool.com/fenlands/test2/rollovertest.php

if it is then drop me line and I will try and take your through it

You are a genius! Precisely what I am looking for. Great photos too! You shot them?

Let me study the page source a little.

Will send you an email.

Thanks,
Norbert

[Maddog]

You are a genius! Precisely what I am looking for. Great photos too! You shot them?

Let me study the page source a little.

Will send you an email.

Thanks,
Norbert

Hi Norbert, email sent to you, any problems let me know. Wish I did take the pictures, they general ones with XP and I had for something else.

[specialtiesbarbados]

Hi Norbert, email sent to you, any problems let me know. Wish I did take the pictures, they general ones with XP and I had for something else.

Got your email, Simon, thanks.

Didn't have as much free time today as I thought I would have. I am just now starting to enter the info you sent. That's about 21:42 your time zone. Something not quite clear yet but I am going to fiddle around a bit. Will email URL re test.

[Maddog]

Norbert, I here on line if you need me.