TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

May 28, 2023, 12:39:24 AM

Login with username, password and session length
Members
  • Total Members: 3,864
  • Latest: Joonoz
Stats
  • Total Posts: 194,353
  • Total Topics: 21,156
  • Online today: 142
  • Online ever: 3,540
  • (September 03, 2022, 01:38:54 AM)
Users Online
Users: 0
Guests: 81
Total: 81

Image Viewer ~ FrontPage or Center Block

Started by crip, January 29, 2006, 08:35:20 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

crip

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

RoarinRow

Now that is cool.  What directory do you store the pics and how does it call it out?  Awesome snippet for sure. 

SMF 2.0 RC3
TP 1.0 beta 5-1
Wordpress 3.0

crip

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

RoarinRow

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!

SMF 2.0 RC3
TP 1.0 beta 5-1
Wordpress 3.0

Lesmond

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 (only on line for a short while though)

evilopinions

My question is from where did you get those pics from ? Speacially the 4th in the top row looks awesome.

Lesmond


crip

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


crip

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! it's updated daily with new walls. ;D

Later, crip~

crip

#9
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]