Thumbnail gallery

  • Thread starter CM Virtual Assistant
  • Start date
C

CM Virtual Assistant

I am trying to create a photo gallery for one of my clients that has
thumbnails on the left side and a larger box on the right that when the
viewer mouses over the thumbnail a larger picture will generate in the large
box. I've been on dynamic drive and found the following script
(http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm) but that is
completely confusing to me because I'm not familary with script. I don't
even know where to begin to do this. Have tried and am totally lost.
Here's a link to the page I'm trying to create the gallery on. Is there a
way to do what I want with Behaviors in Frontpage?
http://www.fairytailsbyjacqueline.com/themegallery.htm
Any assistance would be GREATLY appreciated.
Corrie
 
T

Trevor L.

CM said:
I am trying to create a photo gallery for one of my clients that has
thumbnails on the left side and a larger box on the right that when
the viewer mouses over the thumbnail a larger picture will generate
in the large box. I've been on dynamic drive and found the following
script (http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm) but
that is completely confusing to me because I'm not familary with
script. I don't even know where to begin to do this. Have tried and
am totally lost. Here's a link to the page I'm trying to create the
gallery on. Is there a way to do what I want with Behaviors in
Frontpage? http://www.fairytailsbyjacqueline.com/themegallery.htm
Any assistance would be GREATLY appreciated.
Corrie
Click to expand...

Below is an example of a complete page (courtesy of Murray) that will do
what you want

To see it working, you need to add these files to the same folder as that in
which the page is located:
images/1.jpg
images/2.jpg
images/3.jpg
images/4.jpg
(or amend the image files called in each para)

Can you adapt it to your needs or do you need further help ?

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Slideshow Demo</title>
<script type="text/javascript">
function FP_setLayerText(id,txt)
{//v1.0
var el = FP_getObjectByID(id)
if(el.innerHTML)
el.innerHTML = txt
}
function FP_getObjectByID(id,o)
{// v1.0
var c, el, els, f, m, n
if(!o) o = document
if(o.getElementById)
el = o.getElementById(id)
else if(o.layers)
c = o.layers
else if(o.all)
el = o.all[id]
if(el)
return el
if(o.id==id || o.name==id)
return o
if(o.childNodes)
c = o.childNodes
if(c)
for(n = 0; n < c.length; n++)
{ el = FP_getObjectByID(id,c[n])
if(el)
return el }
f = o.forms
if(f)
for(n = 0; n < f.length; n++)
{ els = f[n].elements
for(m = 0; m < els.length; m++)
{ el = FP_getObjectByID(id,els[n])
if(el)
return el }
}
return null
}
</script>
</head>
<body>
<div id="layer1"
style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
Watch this space
</div>
<p><a href=""
onclick="FP_setLayerText('layer1',
'&lt;img src = &quot;images/1.jpg&quot;&gt;');return false;">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
<p><a href=""
onclick="FP_setLayerText('layer1',
'&lt;img src = &quot;images/2.jpg&quot;&gt;');return false;">
<img border="0" src="images/2.jpg" width="100" height="100">
</a></p>
<p><a href=""
onclick="FP_setLayerText('layer1',
'&lt;img src = &quot;images/3.jpg&quot;&gt;');return false;">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>
<p><a href=""
onclick="FP_setLayerText('layer1',
'&lt;img src = &quot;images/4.jpg&quot;&gt;');return false;">
<img border="0" src="images/4.jpg" width="100" height="100">
</a></p>
</body>
</html>
 
C

CM Virtual Assistant

Good morning. Thank you for responding to my question. Unfortunately for
you I have a few more. :)
Okay so all these images have to be in the same folder as the page. For
example public_html or public_html/images? Right?
How did Murray create this? Using behaviors...or Flash...????
Can I just replace each image with my own? Or do I have to change more than
that to have it work with my pictures?

I'm trying to read through the code to understand what he did and therefore
understand what I need to change. But all of my web experience is self
taught and understanding all of the code is new. To ask another question do
you know of anyone that teaches (or tutors) FP online? Or how about some
very beginner friendly tutorials? I would REALLY love to enhance my skills
when it comes to web design and understanding / working with code and script.
Thanks again for your help!
Corrie

Trevor L. said:
Below is an example of a complete page (courtesy of Murray) that will do
what you want

To see it working, you need to add these files to the same folder as that in
which the page is located:
images/1.jpg
images/2.jpg
images/3.jpg
images/4.jpg
(or amend the image files called in each para)

Can you adapt it to your needs or do you need further help ?

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Slideshow Demo</title>
<script type="text/javascript">
function FP_setLayerText(id,txt)
{//v1.0
var el = FP_getObjectByID(id)
if(el.innerHTML)
el.innerHTML = txt
}
function FP_getObjectByID(id,o)
{// v1.0
var c, el, els, f, m, n
if(!o) o = document
if(o.getElementById)
el = o.getElementById(id)
else if(o.layers)
c = o.layers
else if(o.all)
el = o.all[id]
if(el)
return el
if(o.id==id || o.name==id)
return o
if(o.childNodes)
c = o.childNodes
if(c)
for(n = 0; n < c.length; n++)
{ el = FP_getObjectByID(id,c[n])
if(el)
return el }
f = o.forms
if(f)
for(n = 0; n < f.length; n++)
{ els = f[n].elements
for(m = 0; m < els.length; m++)
{ el = FP_getObjectByID(id,els[n])
if(el)
return el }
}
return null
}
</script>
</head>
<body>
<div id="layer1"
style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
Watch this space
</div>
<p><a href=""
onclick="FP_setLayerText('layer1',
'<img src = "images/1.jpg">');return false;">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
<p><a href=""
onclick="FP_setLayerText('layer1',
'<img src = "images/2.jpg">');return false;">
<img border="0" src="images/2.jpg" width="100" height="100">
</a></p>
<p><a href=""
onclick="FP_setLayerText('layer1',
'<img src = "images/3.jpg">');return false;">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>
<p><a href=""
onclick="FP_setLayerText('layer1',
'<img src = "images/4.jpg">');return false;">
<img border="0" src="images/4.jpg" width="100" height="100">
</a></p>
</body>
</html>

--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
 
T

Trevor L.

CM said:
Good morning. Thank you for responding to my question.
Unfortunately for you I have a few more. :)
Okay so all these images have to be in the same folder as the page.
For example public_html or public_html/images? Right?
Click to expand...

Well, what is important is the reference is correct.

In my example I use <img src = "images/1.jpg">, etc.
So if the code was in, say, public_html/index.html, then the images should
be
public_html/images/1.jpg
public_html/images/2.jpg
etc.

But if the code said <img src = "1.jpg">, then they would need to be in:
public_html/1.jpg
public_html/2.jpg
etc.
How did Murray create this? Using behaviors...or Flash...????
Click to expand...

No, he wrote the code by hand. You can see it in Code view (But I would need
to find the reference)
Can I just replace each image with my own? Or do I have to change
more than that to have it work with my pictures?
Click to expand...

You can use this code as is. Just replace each occurrence of (for example)
src = "images/1.jpg" with your image.
If you want more than 4, just copy the last para (between <p and </p>) and
change it.

Are you familiar with using Code or HTML view? After clicking this tab, you
enter a text editor and just cut and paste the code as in any text editor.
After saving it, this is the HTML code that is executed.
I'm trying to read through the code to understand what he did and
therefore understand what I need to change.
Click to expand...

With this example, there is very little to change, but yes I know the need
to understand what is happenning.
But all of my web experience is self taught and understanding all of the
code is new.
Click to expand...

Yes, same here. I am now 3 years into it and so many out there have much
more knowledge than I.
To ask another question do you know of anyone that teaches (or
tutors) FP online?
Click to expand...

I donlt know about online tutoring but sometimes discussion of a specific
problem on the newsgrouop becomes somewhat like that.
Or how about some very beginner friendly tutorials?
I would REALLY love to enhance my skills when it comes to
web design and understanding / working with code and script. Thanks
again for your help!
Click to expand...

Well, there are probably quite a few out there on the web. But the one that
I use is http://www.w3schools.com/ It is not quite tutorial based, but it
has just about everything you need.

And remember, this group will usually answer your queries. Some posters are
more or less friendly to beginners. But just ignore the ones who are
unhelpful.
 
C

CM Virtual Assistant

THANK YOU SO MUCH! I really appreciate you taking the time to walk me
through this!
Corrie McGaughey
Virtual Assistant
www.cmadminsolutions.net


Trevor L. said:
CM said:
Good morning. Thank you for responding to my question.
Unfortunately for you I have a few more. :)
Okay so all these images have to be in the same folder as the page.
For example public_html or public_html/images? Right?
Click to expand...

Well, what is important is the reference is correct.

In my example I use <img src = "images/1.jpg">, etc.
So if the code was in, say, public_html/index.html, then the images should
be
public_html/images/1.jpg
public_html/images/2.jpg
etc.

But if the code said <img src = "1.jpg">, then they would need to be in:
public_html/1.jpg
public_html/2.jpg
etc.
How did Murray create this? Using behaviors...or Flash...????
Click to expand...

No, he wrote the code by hand. You can see it in Code view (But I would need
to find the reference)
Can I just replace each image with my own? Or do I have to change
more than that to have it work with my pictures?
Click to expand...

You can use this code as is. Just replace each occurrence of (for example)
src = "images/1.jpg" with your image.
If you want more than 4, just copy the last para (between <p and </p>) and
change it.

Are you familiar with using Code or HTML view? After clicking this tab, you
enter a text editor and just cut and paste the code as in any text editor.
After saving it, this is the HTML code that is executed.
I'm trying to read through the code to understand what he did and
therefore understand what I need to change.
Click to expand...

With this example, there is very little to change, but yes I know the need
to understand what is happenning.
But all of my web experience is self taught and understanding all of the
code is new.
Click to expand...

Yes, same here. I am now 3 years into it and so many out there have much
more knowledge than I.
To ask another question do you know of anyone that teaches (or
tutors) FP online?
Click to expand...

I donlt know about online tutoring but sometimes discussion of a specific
problem on the newsgrouop becomes somewhat like that.
Or how about some very beginner friendly tutorials?
I would REALLY love to enhance my skills when it comes to
web design and understanding / working with code and script. Thanks
again for your help!
Click to expand...

Well, there are probably quite a few out there on the web. But the one that
I use is http://www.w3schools.com/ It is not quite tutorial based, but it
has just about everything you need.

And remember, this group will usually answer your queries. Some posters are
more or less friendly to beginners. But just ignore the ones who are
unhelpful.

--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Layers - problem viewing website 5
Photo Gallery problem 3
photo gallery malfunction in FP 2003 2
Lightbox and FrontPage Photo Gallery 6
getting gallery thumbnail image to open in middle of browser 1
Script Error when creating photo gallery via web component 1
Hyperlinks in photo gallery 1
frontpage 2003 gallery problem 7

Top