Click to Enlarge Pictures in Publisher 2007

[Deano]

I've got a website with about 30 reduced size & resolution pictures across 8
pages. I'd like people to be able to click to enlarge each picture - ideally
with a seperate pop up box. I know I can insert a larger picture and add a
hyperlink to an additional page in my publication but this doesn't give me a
pop up window and it makes my webfolder into about 40 pages. Can anyone
advise please. Thanks

 

[DavidF]

There are several ways of writing a hyperlink to open in a new window...or
in other words, create a popup window. Reference: The ECMAScript code
approach:
http://office.microsoft.com/en-us/publisher/HA011587451033.aspx

I have used both, but if you choose to use the ECMAScript code approach
there is an error in the first code snippet.

In step 2 instead of using this:

<script language="JavaScript" type="text/javascript"> <!-- function
Show(Url, Name, Features) { window.open(Url, Name, Features); } // -->
</script>

use this:

<script language="JavaScript" type="text/javascript">function Show(Url,
Name, Features) { window.open(Url, Name, Features); }</script>

Just copy and paste the code snippet in a code fragment box and move it to a
corner of your publication some where it won't be in the way. It will not be
visible when you view your web page.

Now to use this approach the next step is you will need to create a folder
on your host at the same level in the directory as the index.htm file and
the index_files folder to contain your large size images. I would suggest
calling it "images". You will need to optimze and size your images in a
third party image editing program, and then upload your large size images to
that folder.

Now you can write a hyperlink that will open the large images in a new
window. The article describes the different attributes that you can put in
the link, but here is one to start with:


javascript:Show('http://www.yourdomain.com/images/yo...ollbars=yes,resizable=no,height=360,width=480')


Of course change out the domain name and the file name for your image, and
adjust the height and width to what ever size your large images are. Select
your thumnail image, right click, insert hyperlink and paste the code in the
address field. Ctrl + V is handy for this. Now if you uploaded your images
to the "images" folder on your host, you can do a web page preview, click
the thumbnail and a new window that is 360 X 480 will pop up with your large
image. The viewer can click the X to close. To customize the link, reference
back to the article where they discuss the different attributes.

DavidF

 

[Panos]

Dear Deano,

I have a nice Facebox style image viwer, you can see it here and if you like
i can send you the code:

ex. http://www.bratislava.gr/index_image_gallery.htm


Panos

 

[She_Mac]

Hi There,

I've just seen this thread and DavidF this viewer is exactly what I'm
looking for. Could you please send me through the code and any advice as to
how to apply it to my Publisher website. (I'm very new to this). Thanks so
much.

She.

 

[Panos]

Dear She,

I have taken the code from the dynamicdrive.com website, here is the link
that you can find all the details:
http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm

Its very simple to use it, it need just 3 steps:

1) copy the main code in the head of the page you want the effect to be
appeared
2) copy the files into your ftp ( the same folder as is your webpage files )
3) insert this code <p><a href="listenmusic.jpg" rel="facebox">Girl
listening to music</a></p>
where you want the visitor to click on and open the viewer.

Please note the you must have upload the image that you want to be the
effect in your ftp


If you need any more help please tell me

Panos

 

[Deano]

WOW Panos - that is really something else!! The quality and resolution on the
photos is magnificent too!

Thanks for posting the code - I'll check it out.

Wonderful website - can't wait to visit Bratislava

 

[Deano]

David, once again many thanks for your reply and your help. You helped me to
sort out a really niggling problem which I pondererd over for too long really.

As you can see on www.conifers.ukgo.com I've managed to sort it out! A
key problem I did have though was getting the hyperlink addresses right. In
the end I picked up the respective files using the following as an example:

javascript:Show('http:/pics/555.JPG','newwindow','toolbar=no,scrollbars=yes,resizable=yes,height=480,width=560')

I obviously named the folder 'pics' and put it at the same level as the
'index_files' folder as you suggested but I'm unsure why the link is http:/
and not http:// AND why I don't have to type in the domain name into the
address bar either?

Either way, at least it works. I'll look for the next upgrade now - let me
know if you have any suggestions. I do have to retake a few pics to improve
the quality also. Once again, thanks for your good help!

 

[DavidF]

You are welcome, and thanks for posting back.

You wrote a relative link to the image, which will work just fine. Once one
of the images loads in its own IE browser window, look at the address bar,
and you will see the absolute link to the image. Don Schmidt who helps out a
lot in this group like to write relative links, but I tend to confuse easily
<g>, so that is why I usually use absolute links.

Your site is looking good...what a beautiful building and setting.

DavidF