XnView Software

Posted: **Thu Feb 28, 2008 8:58 am**

I am using Windows XP and XNView. I wish to create a web page with thumbnails using XN and then upload the page to my Server.

I have produced the following code thru XN:

"<DOCTYPE>
<html>
<head>
<meta>
<meta>
<meta>
<title>XnView Thumbnail</title>
</head>

<frameset>
<frame>
<frame>
</frameset>

</html>"

After uploading the page to my server all I get is a blank screen.

Can someone guide me in the right direction to get the page working properly.

Thanks for any input.

Posted: **Thu Feb 28, 2008 9:35 am**

Which template do you use?

Posted: **Thu Feb 28, 2008 10:26 pm**

Hi Pierre;
I have not used a template !!! Where would I find it?

ejay

Posted: **Fri Feb 29, 2008 7:45 am**

ejay wrote:Hi Pierre;
I have not used a template !!! Where would I find it?

ejay

To be able to create a web page, you choose a web template

Posted: **Sun Mar 02, 2008 3:08 am**

xnview wrote:
ejay wrote:Hi Pierre;
I have not used a template !!! Where would I find it?

ejay
To be able to create a web page, you choose a web template

Thank you again Pierre,
I have completed the template and uploaded the results to my webserver
but although I can see the various web descriptions (and "alt text") the images do not appear and neither does the "frame" around them appear.

What am I doing wrong still?
Could I get someone to review the actual html code and steer me in the right direction ??

Posted: **Sun Mar 02, 2008 6:05 am**

Could I get someone to review the actual html code and steer me in the right direction ??

You could post a link to your homepage, or...
upload your HTML page (RAR-/ZIP-compressed) to a free file sharing service like WikiFortio and give us that link, or...
send me a PM with a link to your homepage (if you prefer not to post it on the forum).

Posted: **Sun Mar 02, 2008 4:54 pm**

XnTriq wrote:
Could I get someone to review the actual html code and steer me in the right direction ??
You could post a link to your homepage, or...
upload your HTML page (RAR-/ZIP-compressed) to a free file sharing service like WikiFortio and give us that link, or...
send me a PM with a link to your homepage (if you prefer not to post it on the forum).

Thank you so much for your help.

I tried to PM you but my login details were being rejected.
The webpage link is: http://papakura.bravehost.com/thumb.html

You will quickly see that I am a complete novice at html but I am learning - SLOWLY

Posted: **Sun Mar 02, 2008 9:58 pm**

Anonymous wrote:
XnTriq wrote:
Could I get someone to review the actual html code and steer me in the right direction ??
You could post a link to your homepage, or...
upload your HTML page (RAR-/ZIP-compressed) to a free file sharing service like WikiFortio and give us that link, or...
send me a PM with a link to your homepage (if you prefer not to post it on the forum).
Thank you so much for your help.

I tried to PM you but my login details were being rejected.
The webpage link is: http://papakura.bravehost.com/thumb.html

You will quickly see that I am a complete novice at html but I am learning - SLOWLY

Sorry - I gave you the wrong URL. This is it:
http://papakura.bravehost.com/thumbs3.html

Posted: **Sun Mar 02, 2008 10:00 pm**

You will quickly see that I am a complete novice at html but I am learning - SLOWLY

Well, at one point we all were novices.

Copy & paste the following “Code” into Notepad.
Add the CSS for the glossy horizontal menu between <style type="text/css"> and </style>.
Save your document as thumb.html.
Use an FTP client to upload the file to your web space (replace/overwrite http://papakura.bravehost.com/thumb.html).

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="GENERATOR" content="XnView">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-us">
<title>House for sale, Auckland New Zealand, private sale.</title>
<style type="text/css">

</style>
</head>
<body bgcolor="#99cccc">
<ul class="glossymenu">
<li><a href="http://papakura.bravehost.com/Tour"><b>Tour</b></a></li>
<li><a href="http://papakura.bravehost.com/"><b>Locations</b></a></li>
<li><a href="http://papakura.bravehost.com/"><b>Links</b></a></li>
<li><a href="http://papakura.bravehost.com/"><b>Slideshow</b></a></li>
<li class="current"><a href="http://papakura.bravehost.com/thumb.html"><b>Gallery</b></a></li>
</ul>
<br>
<br>
<table cellpadding="5" cellspacing="0">
<tr>
<td><a href="http://papakura.bravehost.com/images/dining.jpg" target="_blank"><img src="http://papakura.bravehost.com/images/t_dining.jpg" width="150" height="112" alt="dining.jpg"></a><div>dining</div></td>
<td><a href="http://papakura.bravehost.com/images/ensuite.jpg" target="_blank"><img src="http://papakura.bravehost.com/images/t_ensuite.jpg" width="150" height="112" alt="ensuite.jpg"></a><div>ensuite</div></td>
<td><a href="http://papakura.bravehost.com/images/ensuite2.jpg" target="_blank"><img src="http://papakura.bravehost.com/images/t_ensuite2.jpg" width="150" height="112" alt="ensuite2.jpg"></a><div>ensuite2</div></td>
<td><a href="http://papakura.bravehost.com/images/family1.jpg" target="_blank"><img src="http://papakura.bravehost.com/images/t_family1.jpg" width="150" height="112" alt="family1.jpg"></a><div>family1</div></td>
</tr>
<tr>
<td><a href="http://papakura.bravehost.com/images/master%20bedroom%201jpg" target="_blank"><img src="http://papakura.bravehost.com/images/t_master%20bedroom%201.jpg" width="150" height="112" alt="master bedroom 1.jpg"></a><div>master bedroom 1</div></td>
<td><a href="http://papakura.bravehost.com/images/master%20bedroom%202jpg" target="_blank"><img src="http://papakura.bravehost.com/images/t_master%20bedroom%202.jpg" width="112" height="150" alt="master bedroom 2.jpg"></a><div>master bedroom 2</div></td>
<td><a href="http://papakura.bravehost.com/images/patio%201.jpg" target="_blank"><img src="http://papakura.bravehost.com/images/t_patio%201.jpg" width="150" height="112" alt="patio 1.jpg"></a><div>patio 1</div></td>
<td><a href="http://papakura.bravehost.com/images/patio%202.jpg" target="_blank"><img src="http://papakura.bravehost.com/images/t_patio%202.jpg" width="112" height="150" alt="patio 2.jpg"></a><div>patio 2</div></td>
</tr>
<tr>
<td><a href="http://papakura.bravehost.com/images/patio%203.jpg" target="_blank"><img src="http://papakura.bravehost.com/images/t_patio%203.jpg" width="150" height="112" alt="patio 3.jpg"></a><div>patio 3</div></td>
<td><a href="http://papakura.bravehost.com/images/rear%20patio.jpg" target="_blank"><img src="http://papakura.bravehost.com/images/t_rear%20patio.jpg" width="150" height="112" alt="rear patio.jpg"></a><div>rear patio</div></td>
</tr>
</table>
<br>
</body>
</html>

Posted: **Sun Mar 02, 2008 11:15 pm**

Hi XnTriq,

Thank you for your understanding. My Web Host server is down at present so I will need to wait before I can upload and test.

I shall try and compare what you have kindly supplioed against my frustrated efforts to date. Hopefully I will gain some better understanding of things.
ejay.

Posted: **Mon Mar 03, 2008 3:25 am**

ejay wrote:Hi XnTriq,

Thank you for your understanding. My Web Host server is down at present so I will need to wait before I can upload and test.

I shall try and compare what you have kindly supplioed against my frustrated efforts to date. Hopefully I will gain some better understanding of things.
ejay.

I have now successfully uploaded the code to my webhost and it is just fine.
Just one other question...... Is there a method of allowing a viewer to click on an image and for a larger image to appear? and for buttons to show which allows a viewer to go forward or backwards on the thumbnails???

Posted: **Tue Mar 04, 2008 3:01 am**

Anonymous wrote:
ejay wrote:Hi XnTriq,

Thank you for your understanding. My Web Host server is down at present so I will need to wait before I can upload and test.

I shall try and compare what you have kindly supplioed against my frustrated efforts to date. Hopefully I will gain some better understanding of things.
ejay.
I have now successfully uploaded the code to my webhost and it is just fine.
Just one other question...... Is there a method of allowing a viewer to click on an image and for a larger image to appear? and for buttons to show which allows a viewer to go forward or backwards on the thumbnails???

Should I amend these links? :a href="original/dining.html" img src="thumb/t_dining.jpg" width="200" height="150" alt="dining.jpg" title="dining.jpg"</a>

Posted: **Tue Mar 04, 2008 6:25 pm**

Hello ejay,

to be able to help you more effectively I need to know a few things about your workflow:

Are you using Bravenet's online “Website Wizard” to build your homepage?
(In other words: Are you editing your pages inside your web browser?)
If so, have you considered integrating the gallery through their Photo Album service?

Posted: **Thu Mar 06, 2008 5:30 am**



Hi ejay,

for the fun of it I put together a template that matches your website's theme.

It consists of 8 files:

\WebTemplate\! papakura\thumb.html
\WebTemplate\! papakura\page.html
\WebTemplate\! papakura\menu.css
\WebTemplate\! papakura\media\menur_bg.gif
\WebTemplate\! papakura\media\menur_hover_left.gif
\WebTemplate\! papakura\media\menur_hover_right.gif
\WebTemplate\! papakura\media\previous.gif (optional)
\WebTemplate\! papakura\media\next.gif (optional)

How to install the template:

Create a new sub-directory called “! papakura” in the “WebTemplate” folder of your XnView installation.
Copy & paste the code for thumb.html and page.html into Notepad and save both files to the “! papakura” folder.
Copy & paste the CSS for the Glossy Horizontal Menu into notepad and save the file as menu.css to the “! papakura” folder.
Make sure you don't include the lines <style type="text/css"> and </style> at the beginning and the end of the code.
Create a new sub-directory called “media” in the “! papakura” folder.
Download the 3 images you'll need for the menu (menur_bg.gif + menur_hover_left.gif + menur_hover_right.gif) from the Dynamic Drive CSS Library into the “media” folder.
Optional: If you would like to have graphical buttons, you'll also need to copy 2 arrows (previous.gif + next.gif) into the “media” folder.
Inside XnView, browse to the folder where you keep the original copies of your photos and select the ones for your gallery.
Then go to the Web Page... command in the Create menu.
Enter the following settings into the fields of the Web page Create dialog:
- [ Zoom ]
Red field = Setting has to be exactly as depicted in the screenshot
Yellow field = Path has to be adjusted to reflect your installation
Green field = No special setting required
Click on the Create button.
Upload all files in the output directory (“%ProgramFiles%\XnView\Gallery\”) and it's sub-folders to your web server.

[color=green]thumb.html[/color] wrote:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="GENERATOR" content="XnView">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en-us">
<title>#TITLE#</title>
<link rel="stylesheet" type="text/css" href="menu.css">
<style type="text/css">
<!--
body, td {
font: 9pt Georgia, Arial, Helvetica, sans-serif;
}
// -->
</style>
</head>
<body marginwidth="0" leftmargin="0" text="black" bgcolor="#99cccc">
<center>
<ul class="glossymenu">
<li><a href="http://free.elixhosting.com/nzhouseforsale/index.html"><b>Home</b></a></li>
<li><a href="tour.html"><b>Tour</b></a></li>
<li><a href="locations.html"><b>Locations</b></a></li>
<li><a href="links.html"><b>Links</b></a></li>
<li><a href="slideshow.html"><b>Slideshow</b></a></li>
<li class="current"><a href="thumb.html"><b>Gallery</b></a></li>
</ul>
<br>
<br>
<table cellspacing="0" cellpadding="10" border="0">
#THUMB_TABLE_START#
<tr>
#THUMB_ROW_START#
<td align="center" valign="middle"><a href="#FRAME_PAGE#"><img src="#THUMB_LINK#" width="#THUMB_WIDTH#" height="#THUMB_HEIGHT#" alt="#FILENAME#"></a><p><a href="#FRAME_PAGE#">#THUMB_TEXT#</a></p></td>
#THUMB_ROW_END#
</tr>
#THUMB_END#
</table>
<br>
<br>
<p><small>#PAGE_GENERATED#.</small></p>
</center>
</body>
</html>

[color=green]page.html[/color] wrote:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="GENERATOR" content="XnView">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en-us">
<title>#PIC_TEXT#</title>
<link rel="stylesheet" type="text/css" href="../menu.css">
<style type="text/css">
<!--
body, td {
font: 9pt Georgia, Arial, Helvetica, sans-serif;
}
// -->
</style>
</head>
<body marginwidth="0" leftmargin="0" text="black" bgcolor="#99cccc">
<center>
<ul class="glossymenu">
<li><a href="http://free.elixhosting.com/nzhouseforsale/index.html"><b>Home</b></a></li>
<li><a href="../tour.html"><b>Tour</b></a></li>
<li><a href="../locations.html"><b>Locations</b></a></li>
<li><a href="../links.html"><b>Links</b></a></li>
<li><a href="../slideshow.html"><b>Slideshow</b></a></li>
<li class="current"><a href="../thumb.html"><b>Gallery</b></a></li>
</ul>
<br>
<br>
<table cellspacing="0" cellpadding="10" border="0">
<tr>
<td align="left" valign="middle"><a href="#PREV_PAGE#"><img src="../media/previous.gif" alt="#PREVIOUS_LABEL#" style="border: 0"></a></td>
<td align="center" valign="middle"><img src="#PIC_LINK#" width="#PIC_WIDTH#" height="#PIC_HEIGHT#" alt="#FILENAME#" alt="#FILENAME#"></td>
<td align="right" valign="middle"><a href="#NEXT_PAGE#"><img src="../media/next.gif" alt="#NEXT_LABEL#" style="border: 0"></a></td>
</tr>
</table>
<br>
<br>
<p><small>#PAGE_GENERATED#.</small></p>
</center>
</body>
</html>

XnView Software

Thumbnails on web page

Thumbnails on web page

Re: Thumbnails om web page

thumbnails

Re: thumbnails

Re: thumbnails

html coding

Re: html coding

Re: html coding