Gallery Viewer viewer script

F

Flynn

My understanding of javascript is very limited. Could some one help
me out. I found this code for an image gallery viewer. It works fine
on my site, but I'd like to modify it so that the mainpic image is
linkable to a popup window displaying the same image only larger. Can
this even be done? If so any ideas?

Thanks in advance.


<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
}
}
// End -->
</script>
</HEAD>



<BODY>

<center>
<table width=360 border=0 cellspacing=0 cellpadding=0>
<tr>
<td><a href="javascript:doPic('p1.jpg');"><img src="p1.jpg" width=90
height=60 border=0></a></td>
<td><a href="javascript:doPic('p2.jpg');"><img src="p2.jpg" width=90
height=60 border=0></a></td>
<td><a href="javascript:doPic('p3.jpg');"><img src="p3.jpg" width=90
height=60 border=0></a></td>
<td><a href="javascript:doPic('p4.jpg');"><img src="p4.jpg" width=90
height=60 border=0></a></td>
</tr>
<tr>
<td colspan=4 align=center><img name="mainpic" src="p1.jpg" width=360
height=240 border=0></td>
</tr>
<tr>
<td><a href="javascript:doPic('p5.jpg');"><img src="p5.jpg" width=90
height=60 border=0></a></td>
<td><a href="javascript:doPic('p6.jpg');"><img src="p6.jpg" width=90
height=60 border=0></a></td>
<td><a href="javascript:doPic('p7.jpg');"><img src="p7.jpg" width=90
height=60 border=0></a></td>
<td><a href="javascript:doPic('p8.jpg');"><img src="p8.jpg" width=90
height=60 border=0></a></td>
</tr>
</table>
</center>

</body>
 
R

Randy Webb

Flynn said:
My understanding of javascript is very limited. Could some one help
me out. I found this code for an image gallery viewer. It works fine
on my site, but I'd like to modify it so that the mainpic image is
linkable to a popup window displaying the same image only larger. Can
this even be done? If so any ideas?

Thanks in advance.
Click to expand...


Step 1: Ditch it. All of it. Its utter junk.

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
Click to expand...

type="text/javascript"
language attribute is deprecated in HTML4

<!-- Begin
Click to expand...

The above line is not needed either.
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);
Click to expand...

And if its Opera, Safari or any browser other than NS or MS?
http://www.jibbering.com/faq/#FAQ4_26

function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
}
}
Click to expand...

function doPic(imgName){
if (document.images)
{
document.images['mainpic'].src = imgName;
}
}


// End -->
</script>
</HEAD>



<BODY>

<center>
<table width=360 border=0 cellspacing=0 cellpadding=0>
<tr>
<td><a href="javascript:doPic('p1.jpg');"><img src="p1.jpg" width=90
height=60 border=0></a></td>
http://www.jibbering.com/faq/#FAQ4_24


<td><a href="javascript:doPic('p2.jpg');"><img src="p2.jpg" width=90
height=60 border=0></a></td>
<td><a href="javascript:doPic('p3.jpg');"><img src="p3.jpg" width=90
height=60 border=0></a></td>
<td><a href="javascript:doPic('p4.jpg');"><img src="p4.jpg" width=90
height=60 border=0></a></td>
</tr>
<tr>
<td colspan=4 align=center><img name="mainpic" src="p1.jpg" width=360
height=240 border=0></td>
</tr>
<tr>
<td><a href="javascript:doPic('p5.jpg');"><img src="p5.jpg" width=90
height=60 border=0></a></td>
<td><a href="javascript:doPic('p6.jpg');"><img src="p6.jpg" width=90
height=60 border=0></a></td>
<td><a href="javascript:doPic('p7.jpg');"><img src="p7.jpg" width=90
height=60 border=0></a></td>
<td><a href="javascript:doPic('p8.jpg');"><img src="p8.jpg" width=90
height=60 border=0></a></td>
</tr>
</table>
</center>

</body>
Click to expand...


<a href="URLtoBigImage.jpg" target="_blank"><img src="littleImage.jpg"
width=90 height=60 border=0></a>

Now, when its clicked, it will simply open the larger image in a new
window. No Javascript needed at all. Just plain HTML :)
 
J

John Flynn

I'm not sure if I made myself clear as to what I'm looking for. It's
kind of hard to explain. I like the way this script is working because
it alows you to click on a thumbnail and it places the larger image in
the center. This code makes it easy in that there aren't a ton of pages
to code. From what I gather it's just passing a variable to change the
center image. What I'm wondering is if someone wanted to see the
picture bigger than what's being displayed in the center - is there a
way to edit the code to make that center image linkable to yet another
larger image. That center image would somehow have to know what picture
is currently being displayed to determin the correct link. Can this even
be done?

Heres a link to view a sample of how the script is currently working:
http://javascript.internet.com/miscellaneous/gallery-viewer.html
 
R

Randy Webb

John said:
I'm not sure if I made myself clear as to what I'm looking for. It's
kind of hard to explain. I like the way this script is working because
it alows you to click on a thumbnail and it places the larger image in
the center. This code makes it easy in that there aren't a ton of pages
to code. From what I gather it's just passing a variable to change the
center image. What I'm wondering is if someone wanted to see the
picture bigger than what's being displayed in the center - is there a
way to edit the code to make that center image linkable to yet another
larger image. That center image would somehow have to know what picture
is currently being displayed to determin the correct link. Can this even
be done?
Click to expand...

Yes. You change the document.links['linkName'].href property.
Heres a link to view a sample of how the script is currently working:
http://javascript.internet.com/miscellaneous/gallery-viewer.html
Click to expand...

That script is utter, useless junk. See my last post with regards to it
and its inherent problems.

Please, in the future, quote what you are replying to.

I think I understand now.

User clicks on thumbnail, changes bigger image on the page.
User clicks on bigger image on the page, it opens an even larger one in
a new window.

<script type="text/javascript">
function changeImage(newImg,biggerImg){
if(document.images)
{
document.images['bigpic'].src = newImg;
}
if (document.links){
document.links[1].href = biggerImg;
}
}
</script>


With this HTML:

<a href="bigImage.jpg"
onclick="changeImage('bigImage.jpg','biggerImage.jpg');return
false">Change The Image</a>

<a href="noJS.html" name="linkName" ><img src="original.jpg" id="bigpic"
border="0" width="30" height="30" alt="Some Image"></a>

And none of that hocus-pocus-what-browser-is-it garbage.
 
J

John Flynn

Randy hanks for your help. It's working great, but I'd like to know if
there is a way I can get the new window of the image to be like a popup
window - shutting off menu bars and all that jazz so its just the image.
I'm pretty much a novice at javascript and programing in general so I'm
not exactly sure how to go about it. I tried adding the following to
your script but it wasn't working. Any suggestions would be most
appreciated.

new_win = window.open(biggerImg,'',
'width=640,height=400,left=10,top=10');



Randy said:
I'm not sure if I made myself clear as to what I'm looking for. It's
kind of hard to explain. I like the way this script is working because
it alows you to click on a thumbnail and it places the larger image in
the center. This code makes it easy in that there aren't a ton of pages
to code. From what I gather it's just passing a variable to change the
center image. What I'm wondering is if someone wanted to see the
picture bigger than what's being displayed in the center - is there a
way to edit the code to make that center image linkable to yet another
larger image. That center image would somehow have to know what picture
is currently being displayed to determin the correct link. Can this even
be done?
Click to expand...

Yes. You change the document.links['linkName'].href property.
Heres a link to view a sample of how the script is currently working:
http://javascript.internet.com/miscellaneous/gallery-viewer.html
Click to expand...

That script is utter, useless junk. See my last post with regards to it
and its inherent problems.

Please, in the future, quote what you are replying to.

I think I understand now.

User clicks on thumbnail, changes bigger image on the page.
User clicks on bigger image on the page, it opens an even larger one in
a new window.

<script type="text/javascript">
function changeImage(newImg,biggerImg){
if(document.images)
{
document.images['bigpic'].src = newImg;
}
if (document.links){
document.links[1].href = biggerImg;
}
}
</script>


With this HTML:

<a href="bigImage.jpg"
onclick="changeImage('bigImage.jpg','biggerImage.jpg');return
false">Change The Image</a>

<a href="noJS.html" name="linkName" ><img src="original.jpg" id="bigpic"
border="0" width="30" height="30" alt="Some Image"></a>

And none of that hocus-pocus-what-browser-is-it garbage.
 
R

Randy Webb

John said:
Randy hanks for your help. It's working great, but I'd like to know if
there is a way I can get the new window of the image to be like a popup
window - shutting off menu bars and all that jazz so its just the image.
I'm pretty much a novice at javascript and programing in general so I'm
not exactly sure how to go about it. I tried adding the following to
your script but it wasn't working. Any suggestions would be most
appreciated.

new_win = window.open(biggerImg,'',
'width=640,height=400,left=10,top=10');
Click to expand...
Change the above code to something like this:

<a href="noJS.html" name="linkName"
onclick="openNewWindow(this.href);return false">
<img src="original.jpg" id="bigpic"
border="0" width="30" height="30" alt="Some Image"></a>

with this function:
function openNewWindow(URLtoOpen){
new_win =
window.open(URLtoOpen,'','width=640,height=400,left=10,top=10');
}
 
J

John Flynn

Randy, thanks again for your help. You rock! I plan on replacing all
that junky code like you suggested. Say is there any books or websites
you'd recommend for someone trying to learn javascript.


Randy's message:
Change the above code to something like this:

<a href="noJS.html" name="linkName"
onclick="openNewWindow(this.href);return false">
<img src="original.jpg" id="bigpic"
border="0" width="30" height="30" alt="Some image"></a>

with this function:
function openNewWindow(URLtoOpen){
new_win =
window.open(URLtoOpen,'','width=640,height=400,left=10,top=10');
}
 
R

Randy Webb

John said:
Randy, thanks again for your help. You rock! I plan on replacing all
that junky code like you suggested. Say is there any books or websites
you'd recommend for someone trying to learn javascript.
Click to expand...

You could start with the group FAQ, linked below. Read the parts about
top-posting as well.
 
J

John Flynn

I have one other concern I'd like to bring up. I can't seem to get this
new code to work properly with any vesion of Netscape - I've tried 4.7,
6.2, and 7. Explorer seems to work fine. Am I missing something?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function changeImage(newImg,biggerImg){
if(document.images)
{
document.images['bigpic'].src = newImg;
}
if (document.links){
document.links[1].href = biggerImg;
}
}

function openNewWindow(URLtoOpen){
new_win =
window.open(URLtoOpen,'','width=640,height=400,left=10,top=10');
}

</script>
</head>
<body>
<a href=""
onclick="changeImage('images/coasta-mesa.gif','images/int-phrase.jpg');r
eturn false"><img src="images/coasta-mesa.gif" id="bigpic" border="0"
width="30" height="30" alt="Some image"></a>

<a href="" name="linkName" onclick="openNewWindow(this.href);return
false"><img src="images/ontario.gif" name="bigpic" border="0"
width="300" height="300" alt="Some image"></a>
</body>
</html>


Randy's message:
Change the above code to something like this:

<a href="noJS.html" name="linkName"
onclick="openNewWindow(this.href);return false">
<img src="original.jpg" id="bigpic"
border="0" width="30" height="30" alt="Some image"></a>

with this function:
function openNewWindow(URLtoOpen){
new_win =
window.open(URLtoOpen,'','width=640,height=400,left=10,top=10');
}
 

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

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Help with Visual Lightbox: Scripts 2
Sort by number of characters 1
SendGrid email issue in responsive Gmail 1
Gallery - mosiac/grid layout with filtering and information page popup 1
Filter table rows based on multiple checkboxes value 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Put image over the top of another image on hover 3

Members online

Total: 30 (members: 1, guests: 29)
Robots: 354

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,071
Latest member
MetabolicSolutionsKeto

Latest Threads

Top