TinyPortal

Development => Block Codes => Topic started by: crip on January 29, 2006, 08:35:20 PM

Title: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 29, 2006, 08:35:20 PM
I found this little script that can be used for a Fontpage block or Center Block, front or center only as it is a faily big snippet. It shows pictures and thumbs without opening a new window..it's all on one page..


Just put it in a Script/block and there you go.

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Jenny Blewitt (webmaster@webdesignsdirect.com) -->
<!-- Web Site:  http://www.webdesignsdirect.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

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

<center>
<table width=800 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>
<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>
<tr>
<td colspan=8 align=center><img name="mainpic" src="p1.jpg" width=800 height=600 border=0></td>
</tr>
<tr>
<td><a href="javascript:doPic('p9.jpg');"><img src="p9.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('p10.jpg');"><img src="p10.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('p11.jpg');"><img src="p11.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('p12.jpg');"><img src="p12.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('p13.jpg');"><img src="p13.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('p14.jpg');"><img src="p14.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('p15.jpg');"><img src="p15.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('p16.jpg');"><img src="p16.jpg" width=90 height=60 border=0></a></td>
</tr>
</table>
</center>


Guys, enjoy! 8) :P
Title: Re: FrontPage or Center Block
Post by: RoarinRow on January 30, 2006, 12:45:12 AM
Now that is cool.  What directory do you store the pics and how does it call it out?  Awesome snippet for sure. 
Title: Re: FrontPage or Center Block
Post by: crip on January 31, 2006, 11:30:06 AM
Put your pics in your ./root/pics where all your directories are. It just calls out the path you need from your ./pics/to/your/forum/pic1.jpg..thumbs and full image are the same file.

I have this script working on a Frontpage Block on my testing site so I know it works good.

Enjoy, Crrip~ ;D
Title: Re: FrontPage or Center Block
Post by: RoarinRow on January 31, 2006, 03:19:00 PM
Quote from: crip on January 31, 2006, 11:30:06 AM
Put your pics in your ./root/pics where all your directories are. It just calls out the path you need from your ./pics/to/your/forum/pic1.jpg..thumbs and full image are the same file.

I have this script working on a Frontpage Block on my testing site so I know it works good.

Enjoy, Crrip~ ;D


I'll give it a try thanks!
Title: Re: FrontPage or Center Block
Post by: Lesmond on January 31, 2006, 04:34:21 PM
I tried it on my test site but all I get is blank images that flash across the screen i.e the little red x's, you can see it here http://lesmond.homedns.org/forum/index.php (http://lesmond.homedns.org/forum/index.php) (only on line for a short while though)
Title: Re: FrontPage or Center Block
Post by: evilopinions on January 31, 2006, 05:47:37 PM
My question is from where did you get those pics from ? Speacially the 4th in the top row looks awesome.
Title: Re: FrontPage or Center Block
Post by: Lesmond on January 31, 2006, 05:58:44 PM
are you asking me or the OP?
Title: Re: FrontPage or Center Block
Post by: crip on January 31, 2006, 06:26:08 PM
Quote from: lesmond on January 31, 2006, 04:34:21 PM
I tried it on my test site but all I get is blank images that flash across the screen i.e the little red x's, you can see it here http://lesmond.homedns.org/forum/index.php (http://lesmond.homedns.org/forum/index.php) (only on line for a short while though)

You just don't have you paths to the pic correct..take a look at your image paths and you'll see.

Title: Re: FrontPage or Center Block
Post by: crip on January 31, 2006, 06:29:46 PM
Quote from: evilopinions on January 31, 2006, 05:47:37 PM
My question is from where did you get those pics from ? Speacially the 4th in the top row looks awesome.

Nice ant they..
I use those for my wallpaper on my computer, they all came from Here (http://www.sexydesktop.co.uk/latest.htm)! it's updated daily with new walls. ;D

Later, crip~
Title: Re: FrontPage or Center Block
Post by: crip on January 31, 2006, 06:35:23 PM
Here is another look at the way I have it set.


<table width=800 border=0 cellspacing=0 cellpadding=0>
<tr>
<td><a href="javascript:doPic('/pix/1.jpg');"><img src="/pix/1.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('/pix/2.jpg');"><img src="/pix/2.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('/pix/3.jpg');"><img src="/pix/3.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('/pix/4.jpg');"><img src="/pix/4.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('/pix/5.jpg');"><img src="/pix/5.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('/pix/6.jpg');"><img src="/pix/6.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('/pix/7.jpg');"><img src="/pix/7.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('/pix/8.jpg');"><img src="/pix/8.jpg" width=90 height=60 border=0></a></td>
</tr>
<tr>
<td colspan=8 align=center><img name="mainpic" src="/pix/1.jpg" width=800 height=600 border=0></td>
</tr>
<tr>
<td><a href="javascript:doPic('/pix/9.jpg');"><img src="/pix/9.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('/pix/10.jpg');"><img src="/pix/10.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('/pix/11.jpg');"><img src="/pix/11.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('/pix/12.jpg');"><img src="/pix/12.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('/pix/13.jpg');"><img src="/pix/13.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('/pix/14.jpg');"><img src="/pix/14.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('/pix/15.jpg');"><img src="/pix/15.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('/pix/16.jpg');"><img src="/pix/16.jpg" width=90 height=60 border=0></a></td>
</tr>
</table>


I have all the images in root directory [pix]
Title: Re: FrontPage or Center Block
Post by: Xarcell on January 31, 2006, 06:40:10 PM
Nice find, but I think you should chaneg your subject line, so folks know it's a image viewer.
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 06:44:28 PM
It's Done! ;)
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: Xarcell on January 31, 2006, 06:45:45 PM
I think you may need to remove the /

img src="pix/5.jpg"

not

img src="/pix/5.jpg"

Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: G6Cad on January 31, 2006, 06:46:33 PM
Seems like somet things not working properly crip, i got this when i tryed to wiew your gallery..

Fatal error: Cannot instantiate non-existent class: cpm in /home/forum/Sources/Load.php(1608) : eval()'d code(45) : eval()'d code on line 2
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 06:51:56 PM
Quote from: Xarcell on January 31, 2006, 06:45:45 PM
I think you may need to remove the /

img src="pix/5.jpg"

not

img src="/pix/5.jpg"



I would, but thats just a demo..my other forum has the real-thing.
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: Lesmond on January 31, 2006, 06:52:47 PM
ok got it to work but I dont know why it says this under it [/url] ?
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 06:56:44 PM
Quote from: g6cad on January 31, 2006, 06:46:33 PM
Seems like somet things not working properly crip, i got this when i tryed to wiew your gallery..

Fatal error: Cannot instantiate non-existent class: cpm in /home/forum/Sources/Load.php(1608) : eval()'d code(45) : eval()'d code on line 2

g6cad,
Are you looking at the demo or my forum?..
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 06:58:12 PM
Quote from: lesmond on January 31, 2006, 06:52:47 PM
ok got it to work but I dont know why it says this under it [/url] ?

Just get rid of those.. [/url]  this Forum added those.
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 07:02:03 PM
Quote from: lesmond on January 31, 2006, 06:52:47 PM
ok got it to work but I dont know why it says this under it [/url] ?

Those look good lesmond. :)
if your using IE with imagebar enabled add these:

<meta http-equiv=imagetoolbar content=no>
<meta http-equiv=imagetoolbar content=false>


It's handy, but I find it sometimes annoying.
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: Lesmond on January 31, 2006, 07:20:35 PM
kool thanks, :) can I add more pictures or can it only be 16?

might have a go and try it on my main site next ::)
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 07:24:49 PM
Originally it was only 8 images, but it was kind of small, so I doubled it, I suppose more could be added by making the thumb appear smaller?

I guess it really depends on how big your viewing area is, 21 inch flat screen here, or - link it to open in a new window?
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: G6Cad on January 31, 2006, 07:32:47 PM
I was on your site that you have in your userbox, the globe under your avatar.
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 07:36:25 PM
Oh ok,
yeah, you get that error if you cllick the title instead of a image.. it's not the same script as this Demo, that is CMG. :-*
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: houston on January 31, 2006, 09:34:40 PM
My Thumb nail pics are not showing up.

this is the code that I am using

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Jenny Blewitt (webmaster@webdesignsdirect.com) -->
<!-- Web Site:  http://www.webdesignsdirect.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

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

<center>
<table width=400 border=0 cellspacing=0 cellpadding=0>
<tr>
<td><a href="javascript:doPic('pix/p1.jpg');"><img src="="pix/p1.jpg" width=32 width=32 border=0></td>
<td><a href="javascript:doPic('pix/p2.jpg');"><img src="="pix/p2.jpg" width=32 width=32 border=0></td>
<td><a href="javascript:doPic('pix/p3.jpg');"><img src="="pix/p3.jpg" width=32 width=32 border=0></td>
<td><a href="javascript:doPic('pix/p4.jpg');"><img src="="pix/p4.jpg" width=32 width=32 border=0></td>
<td><a href="javascript:doPic('pix/p5.jpg');"><img src="="pix/p5.jpg" width=32 width=32 border=0></td>
<td><a href="javascript:doPic('pix/p6.jpg');"><img src="="pix/p6.jpg" width=32 width=32 border=0></td>
<td><a href="javascript:doPic('pix/p7.jpg');"><img src="="pix/p7.jpg" width=32 width=32 border=0></td>
<td><a href="javascript:doPic('pix/p8.jpg');"><img src="="pix/p8.jpg" width=32 width=32 border=0></td>
</tr>
<tr>
<td colspan=8 align=center><img name="mainpic" src="p1.jpg" width=400 width=160 border=0></td>
</tr>
<tr>
<td><a href="javascript:doPic('pix/p9.jpg');"><img src="="pix/p9.jpg" width=32 width=32 border=0></td>
<td><a href="javascript:doPic('pix/p10.jpg');"><img src="="pix/p10.jpg" width=32 width=32 border=0></td>
<td><a href="javascript:doPic('pix/p11.jpg');"><img src="="pix/p11.jpg" width=32 width=32 border=0></td>
<td><a href="javascript:doPic('pix/p12.jpg');"><img src="="pix/p12.jpg" width=32 width=32 border=0></td>
<td><a href="javascript:doPic('pix/p13.jpg');"><img src="="pix/p13.jpg" width=32 width=32 border=0></td>
<td><a href="javascript:doPic('pix/p14.jpg');"><img src="="pix/p14.jpg" width=32 width=32 border=0></td>
<td><a href="javascript:doPic('pix/p15.jpg');"><img src="="pix/p15.jpg" width=32 width=32 border=0></td>
<td><a href="javascript:doPic('pix/p16.jpg');"><img src="="pix/p16.jpg" width=32 width=32 border=0></td>
</tr>
</table>
</center>


And it does not load the large image until I click on the first thumbnail
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 09:39:53 PM
It's all in how you have it linked, thumb to image..both the same image
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 09:41:06 PM
It does work as you can clearly see on the demo. ;)
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 09:43:31 PM
Here is another Demo (http://lesmond.homedns.org/forum/index.php)!
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: houston on January 31, 2006, 09:46:41 PM
Quote from: crip on January 31, 2006, 09:39:53 PM
It's all in how you have it linked, thumb to image..both the same image

Not to sure what you mean by this?
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 09:56:03 PM
do you have a link to it?
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: houston on January 31, 2006, 10:04:38 PM
Quote from: crip on January 31, 2006, 09:56:03 PM
do you have a link to it?

http://www.eaglebaycamp.com/forum/index.php
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 10:10:38 PM
Quote from: houston on January 31, 2006, 09:34:40 PM
My Thumb nail pics are not showing up.

this is the code that I am using
<td colspan=8 align=center><img name="mainpic" src="p1.jpg" width=400 width=160 border=0></td>

And it does not load the large image until I click on the first thumbnail

<td colspan=8 align=center><img name="mainpic" src="p1.jpg" width=400 width=160 border=0></td>

should be:
Quote<td colspan=8 align=center><img name="mainpic" src="pix/p1.jpg" width=400 width=160 border=0></td>

to show main pic
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 10:14:06 PM
Fix your main-image and you should be ok.

http://www.eaglebaycamp.com/forum/pix/p1.jpg
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: houston on January 31, 2006, 10:23:31 PM
Quote from: crip on January 31, 2006, 10:10:38 PM
Quote from: houston on January 31, 2006, 09:34:40 PM
My Thumb nail pics are not showing up.

this is the code that I am using
<td colspan=8 align=center><img name="mainpic" src="p1.jpg" width=400 width=160 border=0></td>

And it does not load the large image until I click on the first thumbnail

<td colspan=8 align=center><img name="mainpic" src="p1.jpg" width=400 width=160 border=0></td>

should be:
Quote<td colspan=8 align=center><img name="mainpic" src="pix/p1.jpg" width=400 width=160 border=0></td>

to show main pic

Thanks. That got the main pic loading but the thumbs are still not showing up. At the moment I only have 2 pic in the directory could that be the problem? I will upload them all and see what happens.
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 10:29:57 PM
Thats your problem..add ALL images. ;)
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 10:36:08 PM
The link shows this to you #2 thumb: http://www.eaglebaycamp.com/forum/=

should be: http://www.eaglebaycamp.com/forum/pix/p2.jpg
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 10:43:01 PM
Take out the = and you'll be Ok.
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 10:44:41 PM
I guess he got it?
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: houston on January 31, 2006, 10:52:47 PM
Quote from: crip on January 31, 2006, 10:44:41 PM
I guess he got it?

Nope Still working on it.
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: houston on January 31, 2006, 10:58:06 PM
Quote from: crip on January 31, 2006, 10:43:01 PM
Take out the = and you'll be OK.

That did it. My mind has turn to mush today Maybe I should give it a break and come back tomorrow
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 11:01:18 PM
Best of luck,
I like your site. ;)

Later, crip
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: crip on January 31, 2006, 11:04:18 PM
Tomorrow?..why?..ant this so much fun. ;D

Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: Rabain on January 22, 2008, 01:16:37 PM
Hiyas,

I'm looking to tweak this code.  I only need to display one image and make it a hyperlink.  When I use the html box I end up with [/url] being displayed and all kinds of weirdness.

Is it possible to change this code so that the first time someone visits the forum the block will display the image but the second time they visit it just displays the link?  With perhaps another link directly to the image in case they want to view it again.
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: Crip on January 22, 2008, 01:54:59 PM
You need to put it in a Scriptbox or Scriptbox via + an Iframe into an Article
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: wilsy on January 22, 2008, 07:26:11 PM
Hi Crip, why are your previous posts showing you as a guest?

Regards,

Wilsy.
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: G6Cad on January 22, 2008, 07:29:39 PM
At one time long ago in here, Crip got angry ( and i mean really angry) and deleted his account.
When he calmed down he returned and we recreated his post count but as you know, the user cant be added back once they have deleted them selfs.
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: wilsy on January 22, 2008, 08:00:17 PM
Thanks G6!
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: Crip on January 22, 2008, 08:09:38 PM
Stuff happends ya know wilsy?
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: wilsy on January 22, 2008, 10:43:37 PM
Lol @ Crip - top man! ;)
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: rockskullz on January 23, 2008, 04:08:52 PM
anyone have a demo?
Title: Re: Image Viewer ~ FrontPage or Center Block
Post by: Crip on January 23, 2008, 05:27:59 PM
can make a demo asap.