Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Gallery Viewer viewer script

Reply
Thread Tools

Gallery Viewer viewer script

 
 
Flynn
Guest
Posts: n/a
 
      02-22-2004
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>
 
Reply With Quote
 
 
 
 
Randy Webb
Guest
Posts: n/a
 
      02-22-2004
Flynn wrote:

> 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.



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


> <HEAD>
>
> <SCRIPT LANGUAGE="JavaScript">


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


> <!-- Begin


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);


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;
> }
> }


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>



<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

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/

 
Reply With Quote
 
 
 
 
John Flynn
Guest
Posts: n/a
 
      02-22-2004
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/misce...ry-viewer.html

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
 
Reply With Quote
 
Randy Webb
Guest
Posts: n/a
 
      02-22-2004
John Flynn wrote:

> 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?


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/misce...ry-viewer.html


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.j pg');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.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/

 
Reply With Quote
 
John Flynn
Guest
Posts: n/a
 
      02-23-2004
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 Webb wrote:

> 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?


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/misce...ry-viewer.html


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.j pg');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.


*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
 
Reply With Quote
 
Randy Webb
Guest
Posts: n/a
 
      02-23-2004
John Flynn wrote:
> 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');
>
>


<--snip-->

>


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

>

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,lef t=10,top=10');
}


--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/

 
Reply With Quote
 
John Flynn
Guest
Posts: n/a
 
      02-23-2004
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:

>> <a href="noJS.html" name="linkName" ><img src="original.jpg"

id="bigpic"
>> border="0" width="30" height="30" alt="Some image"></a>

>

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,lef t=10,top=10');
}



*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
 
Reply With Quote
 
Randy Webb
Guest
Posts: n/a
 
      02-23-2004
John Flynn wrote:
> 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.


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

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/

 
Reply With Quote
 
John Flynn
Guest
Posts: n/a
 
      02-23-2004
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,lef t=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:

>> <a href="noJS.html" name="linkName" ><img src="original.jpg"

id="bigpic"
>> border="0" width="30" height="30" alt="Some image"></a>

>

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,lef t=10,top=10');
}



*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
What is an AVI Chunk Viewer? - AVI Chunk Viewer.jpg (0/1) mazdra76@yahooo.com Computer Support 1 03-17-2006 02:52 AM
Inzomia image viewer 3.06 - Free image viewer Fredrik Digital Photography 0 03-09-2006 09:08 PM
making WINDOWS PICTURE AND FAX VIEWER default viewer? aaronep@pacbell.net Digital Photography 1 09-16-2005 09:20 AM
Web picture gallery script for free web-album.org Digital Photography 0 06-27-2005 09:20 PM
text viewer for blackberry or java sources of text viewer jacksgoogle Java 0 05-11-2005 08:29 AM



Advertisments