Image galleries

[Lisa A]

Does anyone know of a good image gallery I can use on several different
pages to view thumbnails of items displayed. The basic one with front page,
is not what I want to use. I need something fairly easy to install and set
up and can use on multiple pages.
thanks for anyones help.

 

[Trevor Lawrence]

Does anyone know of a good image gallery I can use on several different
pages to view thumbnails of items displayed. The basic one with front
page, is not what I want to use. I need something fairly easy to install
and set up and can use on multiple pages.
thanks for anyones help.

Try JAlbum http://jalbum.net/

For an example of how it displays, see
http://trevorl.mvps.org/ratec/album.html
Click on any link.

 

[Lisa A]

Thanks, it looks nice. Need to see how to install and if I can use it on
multi pages.

 

[Trevor Lawrence]

Thanks, it looks nice. Need to see how to install and if I can use it on
multi pages.

I am not sure what you mean by using it on multiple pages.

The way JAlbum works is that you set up a page similar to
http://trevorl.mvps.org/ratec/AEC buses/album/index.html from which you go
to any picture in that "album" (or run a slideshow).

What I have then done is set up a page of links
http://trevorl.mvps.org/ratec/album.html which go to any one of the 34 pages
I have set up. You can put one of these links on any page. The only problem
may be navigating back to where you started from. The "Up" button will go to
the default index page on the next level up (e.g.
http://trevorl.mvps.org/ratec/AEC buses/index.html), so I put an HTML file
here which returns to the starting page. Others may do it differently.

IIRC, all the instructions are in JAlbum itself

Please get back if you need any more help. Many people here use JAlbum, and
may have much more experience with it than I have

 

[Rob Giordano \(Crash\)]

Basically you will create your JAlbums to a folder outside of FP. When you
are happy with how they look and function you will Import the entire folder
into your FP website, then create a link from JAlbum album back to your
regular pages.



--
~~~~~~~~~~~~~~~~~~
Rob Giordano
Microsoft MVP Expression





| Thanks, it looks nice. Need to see how to install and if I can use it on
| multi pages.
|
| | > | >> Does anyone know of a good image gallery I can use on several different
| >> pages to view thumbnails of items displayed. The basic one with front
| >> page, is not what I want to use. I need something fairly easy to
install
| >> and set up and can use on multiple pages.
| >> thanks for anyones help.
| >
| > Try JAlbum http://jalbum.net/
| >
| > For an example of how it displays, see
| > http://trevorl.mvps.org/ratec/album.html
| > Click on any link.
| >
| > --
| > Trevor Lawrence
| > Canberra
| > Microsoft MVP - FrontPage
| > MVP Web Site http://trevorl.mvps.org
| >
| >
| >
|
|

 

[Joe Rohn]

HI Lisa,

Jalbum is very good...you will need Java installed on your computer to use
it and create albums. People that view the albums once you have them in your
site will not be required to have Java installed on their computers.
--
Joe
Microsoft MVP Expression Web

Expression and FrontPage Web Forums:
http://expression-frontpage.com/forums/

 

[Ian Haynes]

Jalbum is very good...you will need Java installed on your computer to use

it and create albums. People that view the albums once you have them in
your site will not be required to have Java installed on their computers.

If you don't want to use Java, see Web Album Generator.
http://www.ornj.net/webalbum/

It's free and very easy to use. You'd create the gallery from the program
and then add to your FP created web, in the same way as Jalbum.

 

[Lisa A]

I like these galleries. What I meant was the site has many pages that need
some sort of image gallery or viewer for each page. Here is the site:
http://www.gocafeconcepts.com/3dmascotmolds.htm, but what I have now is not
working for my client. They are seeing only part of the larger images.
I need something that will create the larger image on the same page or in a
small pop up window, not a new window.
thanks for all the good advice and new scripts that I didn't know about.
Lisa A

 

[Trevor Lawrence]

I like these galleries. What I meant was the site has many pages that need
some sort of image gallery or viewer for each page. Here is the site:
http://www.gocafeconcepts.com/3dmascotmolds.htm, but what I have now is
not working for my client. They are seeing only part of the larger
images.
I need something that will create the larger image on the same page or in
a small pop up window, not a new window.
thanks for all the good advice and new scripts that I didn't know about.
Lisa A

So are you saying that what you want on each page is a set of thumbnails and
that when any is clicked a larger image is displayed ?
(Similar to http://tandcl.homemail.com.au/gallery.html)

Jimco Spawn http://jimcosoftware.com/addins.aspx is good for this.

If you want the larger image to display on mouseover, this can be done with
some slight changes to the HTML code.

 

[Lisa A]

Yes, I need thumbnails on each page and would like to enlarge each thumbnail
as you mouseover. How is that possible with changes to html code.....?
That sounds too good to be true.
thanks for helping.
Lisa A

 

[Trevor Lawrence]

Yes, I need thumbnails on each page and would like to enlarge each
thumbnail as you mouseover. How is that possible with changes to html
code.....? That sounds too good to be true.
thanks for helping.

No worries.

It is quite easy, but does require the JavaScript from JImco's Spawn

Here is the HTML (example modified from my site)
<a href='' target="_self"
onmouseover="spawnJimcoPopup
( 'images/display/trevor.jpg'
, '_blank'
,
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'
, 400, 400, 'center', '0', 'pixel') ;return false;">

This code (together with the script below) will open the image in a new
window on mouseover. The window will have to be closed, although I can
rewrite to close it onmouseout (when the mouse is moved away) if you want
this.

The two numeric parameters (400, 400,) are the height and width of the
window. It is a good idea to set these close to the image size. Otherwise
there will be a lot of white space.

The next two parameters ('center', '0',) specify where the window is placed.
In this case, 'center' centres horizontally, '0' is zero pixels offset
vertically. For other offsets, use the number of pixels (e.g. '200' gives
200 pixels offset).

The last parameter specifies what units are used for the height and width -
'percent' uses percent of the screen size, anything else (e.g. 'pixel') uses
pixels

This is the script to be added into the <head> section (or it can be in an
external file - please get back if you need to know how to do this)
<script type="text/javascript">
function spawnJimcoPopup(url, name, options, h, w, x, y, scaleType)
{
var newWindow
if (scaleType == 'percent')
{ h = (h * screen.availHeight) / 100
w = (w * screen.availWidth) / 100 }
if (x == 'center')
x = (screen.availWidth - w) / 2
if (y == 'center')
y = (screen.availHeight - h) / 2
options += ',width=' + w + ',height=' + h
+ ',left=' + x + ',top=' + y
newWindow = window.open(url, name, options)
newWindow.focus()
}
</script>

 

[Lisa A]

Thank you! I think this will work absolutely for what I need.
I've have used the css external style sheet, but never for javascript, so if
you can tell me what to do there would be great. I just need to add the
script to the heading (will it work if I'm using css script on the page too
for my menu buttons? I don't want to get script errors)
Then I just insert the code for each thumbnail?
I'll see if I can get it to work meanwhile.
thanks again for your help.
Lisa A

 

[Lisa A]

I have added the script to the header and inserted my thumbnail, but now I'm
just stuck. Or do I add the code and insert the image name into the code
script?
I've uploaded my practice page here:
www.gocafeconcepts.com/3dmascotmolds5.htm I've put the larger image on the
site as well. It is 400 x 309
thanks again, and sorry for not grasping this yet.
Lisa A

 

[Trevor Lawrence]

I have added the script to the header and inserted my thumbnail, but now
I'm just stuck. Or do I add the code and insert the image name into the
code script?
I've uploaded my practice page here:
www.gocafeconcepts.com/3dmascotmolds5.htm I've put the larger image on
the site as well. It is 400 x 309
thanks again, and sorry for not grasping this yet.
Lisa A

Lisa,
Well, there appear to be a few things wrong and I may not see them all at
once, but I'll make a start

I see this code in the page. (In my editor this is lines 124 to 147):-
<td width="240">
<p align="center">
</a>
<img border="0" src="mascotmolds/mold1a.jpg" width="200"
height="155"><script type="text/javascript">
function spawnJimcoPopup(url, name, options, h, w, x, y, scaleType)
{
var newWindow
if (scaleType == 'percent')
{ h = (h * screen.availHeight) / 100
w = (w * screen.availWidth) / 100 }
if (x == 'center')
x = (screen.availWidth - w) / 2
if (y == 'center')
y = (screen.availHeight - h) / 2
options += ',width=' + w + ',height=' + h
+ ',left=' + x + ',top=' + y
newWindow = window.open(url, name, options)
newWindow.focus()
}
</script></td>

Replace this code with:-
<td width="240">
<p align="center">
<a href='' target="_self"
onmouseover="spawnJimcoPopup
( 'mascotmolds/mold1a.jpg'
, '_blank',
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'
, 400, 400, 'center', '0', 'pixel') ;return false;">
<img border="0" src="mascotmolds/mold1a.jpg" width="200" height="155">
</a>
</p></td>

So apart from the fact that I found a couple of misplaced tags (which
probably won't cause too much problem), the main thing is to replace every
<img> for which you want a mouseover with code such as
<a href='' target="_self"
onmouseover="spawnJimcoPopup
( 'mascotmolds/mold1a.jpg', '_blank',
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'
, 400, 400, 'center', '0', 'pixel') ;return false;">
<img border="0" src="mascotmolds/mold1a.jpg" width="200" height="155">
</a>

And do not place <script type="text/javascript">function
spawnJimcoPopup(url, name, options, h, w, x, y,
scaleType){.....etc..........</script> inside the <body> - only in the
<head> section.

Please check whether this works. I also wonder whether you want the image to
disappear onmouseout. If so, I can put together code to do this

 

[Lisa A]

I was up late last night for a reply but notice we are on different parts of
the world. I will work on this later today as I have to leave for a while.
I don't want the image to disappear while I mouse over. So this will work I
hope.
Do I need to insert each thumbnail individually or do I just insert that
code? I'm just not sure how to insert the code for each thumbnail in front
page.
I'll be back on later this evening to see.
thanks for your help. I really, do appreciate it.
Lisa A

 

[Trevor Lawrence]

I was up late last night for a reply but notice we are on different parts
of the world. I will work on this later today as I have to leave for a
while. I don't want the image to disappear while I mouse over. So this
will work I hope.
Do I need to insert each thumbnail individually or do I just insert that
code? I'm just not sure how to insert the code for each thumbnail in
front page.
I'll be back on later this evening to see.
thanks for your help. I really, do appreciate it.

Lisa
Are you in the US?

Here we are GMT+10. US Pacific Time is GMT-8; Eastern Time is GMT-5. With
daylight savings here, that is -18 hours in the West, -15 hours in the East.
So I guess it is now about 1530 Friday Pacific Time or 1830 Friday Eastern
Time

Anyway,
If you don't want the image to disappear, that makes life easier although if
you wanted an extra close button in the window that would need extra code. I
shouldn't think it is needed as the red square with white X does the job

I assume (since I saw extra code on the test page) that you know how to use
the FP editor using the Code view (called HTML view in earlier versions of
FP) - it is the tab at the bottom of the page.

For each smaller image you will find the code that says
<img border="0" src="mascotmolds/mold1a.jpg" width="200"
height="155">

All you need to do is to add this before it (changing image name and - if
required - window size and/or positon):
<a href='' target="_self"
onmouseover="spawnJimcoPopup
( 'mascotmolds/mold1a.jpg', '_blank',
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'
, 400, 400, 'center', '0', 'pixel') ;return false;">

Then add </a> after it

It is election day here, so I'll be out a bit - first to vote, then for a
lunch (the excuse is election day) then to do some shopping, but I should be
in later in the afternoon - maybe about 1600 AEDST so if you want to post, I
should see the reply then

 

[Lisa A]

Thanks for explaining all the time difference. That helps. Right now it is
almost 11 pm Fri. night.
Today was the biggest shopping day of the year. Our Black Friday. So I'm
just now getting back on the computer.
OK back to my webpage.... I don't think I've added the code correctly, but
I tried to follow your instructions.
Here is my page again:
http://www.gocafeconcepts.com/3dmascotmolds5.htm
My smaller image is mold1a and the larger image is mold1b size 350 x 270
I'll wait to hear back.
thanks again.
Lisa A

 

[Trevor Lawrence]

Thanks for explaining all the time difference. That helps. Right now it
is almost 11 pm Fri. night.

Yeah, well I got it wrong in that I forgot to add the daylight saving
difference . You message was timed at 2:50 pm so that is 8 hours difference
(less one day), i.e. -16, not -15

Today was the biggest shopping day of the year. Our Black Friday. So I'm
just now getting back on the computer.
OK back to my webpage.... I don't think I've added the code correctly,
but I tried to follow your instructions.
Here is my page again:
http://www.gocafeconcepts.com/3dmascotmolds5.htm
My smaller image is mold1a and the larger image is mold1b size 350 x 270
I'll wait to hear back.

I saw this in the table cell
<td width="240">
<p align="center">
</a>
<a href='' target="_self"
onmouseover="spawnJimcoPopup
( 'mascotmolds/mold1b.jpg', '_blank',
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'
, 350, 270, 'center', '0', 'pixel') ;return false;"></a>
<img border="0" src="mascotmolds/mold1a.jpg" width="200" height="155"></td>

It should read
<td width="240">
<p align="center">
<a href='' target="_self"
onmouseover="spawnJimcoPopup
( 'mascotmolds/mold1b.jpg', '_blank',
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'
, 350, 270, 'center', '0', 'pixel') ;return false;">
<img border="0" src="mascotmolds/mold1a.jpg" width="200" height="155"></a>
</p> </a></td>

The main problem seems to be that the </a> tag is mispositioned.

The <p> tag does also not appear to be closed so I added that (</p>) as
well, but this is not critical - most browsers will make allowance for
errors such as this. In fact, I saw several places where this occurs

I am posting this at 0115 hours your time (I think), so you may not get a
chance to see it until tomorrow. I may be able to test it on my PC since
there are only a few images. If so, I will post again. If not, I hope that
this change is all that is needed.

 

[Trevor Lawrence]

news:%[email protected]...

I may be able to test it on my PC since there are only a few images. If so,
I will post again.

Well, I tested it and this works fine
<td width="240">
<p align="center">
<a href='' target="_self"
onmouseover="spawnJimcoPopup
( 'http://www.gocafeconcepts.com/mascotmolds/mold1b.jpg', '_blank',
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'
, 300, 375, 'center', '0', 'pixel') ;return false;">
<img border="0" src="mascotmolds/mold1a.jpg" width="200" height="155">
</a></p>
</td>

I notice that the dimensions 300,375 work better than what was there, even
though the smaller image dimensions are 200*155. My guess is that the window
needs space for the address bar

 

[Lisa A]

Hi,
You are probably asleep right now, but hopefully you can read this soon.
I tried to make changes to match yours, but still not having any luck.
Here is my page again:
http://www.gocafeconcepts.com/3dmascotmolds5.htm

thanks,
Lisa A