PDA

View Full Version : Picture Viewer

101
10-13-2002, 09:03 AM
I need a picture viewer for my site but have been finding it really hard to make.

I wish to include a picture on the left of the screen (preferably 450 by 450 on a 1024/768 resolution)

Then on the right side

Then 4 buttons which say first (This take you to the first picture) , last (This takes you to the last picture) , next (This takes you to the next picture)
and previous (This takes you to the previous picture).
Also there would be a textbox on the side and it changes with every picture and says things like who it was by and a comment.
And under nearth that a drop down box which lists all the images and you can click them and then that image would be shown.

Here are 3 scripts which include all the material but need to be interwinded:



<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>

<BR>

<img src="1.jpg" width="450" height="450" border="1" name="base" alt="Picture Viewer.">

<form name="Myform">

<Script Language="JavaScript">

image1 = new Image();
image1.src = "1.jpg";
image2 = new Image();
image2.src = "2.jpg";
image3 = new Image();
image3.src = "3.jpg";
red= new Array();
red[0]="Text1";
red[1]="Text2.";
red[2]="Text3.";
dom = (document.getElementById)? true:false
ns4 = (document.layers)? true:false
ie4 = (document.all && !dom)? true:false
if (ns4) document.write('<DIV style="LEFT: 650px; TOP: 20px; POSITION: absolute;"><textarea name="dropdownchanger" wrap="soft" rows="5" cols="20">' +red[0] + '</textarea><br></DIV>')
else document.write('<div id="dropdownchanger" style="width:200px; height:50px;"><p>' +red[0] + '</p></div>')

function change(){
document.base.src=eval(document.Myform.Myselect.options[document.Myform.Myselect.options.selectedIndex].value);
if (ns4) {document.Myform.dropdownchanger.value=red[document.Myform.Myselect.options.selectedIndex]}
if (ie4) {document.all['dropdownchanger'].innerHTML ='<p>' + red[document.Myform.Myselect.options.selectedIndex] + '</p>'}
else if (dom) {document.getElementById("dropdownchanger").innerHTML ='<p>' + red[document.Myform.Myselect.options.selectedIndex] + '</p>'}
}

</Script>

<DIV style="LEFT: 650px; TOP: 20px; POSITION: absolute;">

<h1><u>Picture Viewer</u></h1>
<BR>
<BR>
<select name="Myselect" onChange="change()" size="1">
<option value="image1.src" selected>Picture1</option>
<option value="image2.src">Picture 2</option>
<option value="image3.src">Picture 3</option>
</select>

</DIV>

</form>

</BODY>
</HTML>




<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>

<CENTER>

<Script Language="JavaScript">

var timer_id = 0;
var image_array = new Array (4);
var time_array = new Array (4);
image_array[0] = new Image();
image_array[0].src = 'Welcome.bmp';
time_array[0] = 4000;
image_array[1] = new Image();
image_array[1].src = '1.gif';
time_array[1] = 4000;
image_array[2] = new Image();
image_array[2].src = 'image3.jpg';
time_array[2] = 4000;
image_array[3] = new Image();
image_array[3].src = 'image4.jpg';
time_array[3] = 4000;
var current = 0;
var is_playing = 0;

function next () {
current = current + 1;
if ( current == 4 )
current = 0;
document.images.slideshow.src = image_array[current].src;
}

function previous () {
current = current - 1;
if ( current == -1 )
current = 3
document.images.slideshow.src = image_array[current].src;
}
function rewind () {
current = 0;
document.images.slideshow.src = image_array[current].src;
}
function forward () {
current = 3;
document.images.slideshow.src = image_array[current].src;
}

</Script>

<br>

<table border=1 width="100%"cellspacing=1 cellpadding=4 >
<tr>
<td align=center>
<b>Picture Viewer</b>
</td>
</tr>
<tr><td align="center" >
<img src="Welcome.bmp" name="slideshow" width="400" height="275">
</td></tr>
<tr><form>
<td align=center>
<table border=1>
<tr>
<td align="center"><input type=button onclick="rewind();" value="First" title="Go to first image" "button style=width:80px;height=25px;"></td>
<td align="center"><input type=button onclick="previous();" value="Previous" title="Show previous image" "button style=width:80px;height=25px;"></td>
<td align="center"><input type=button onclick="next();" value="Next" title="Show next image" "button style=width:80px;height=25px;"></td>
<td align="center"><input type=button onclick="forward();" value="Last" title="Go to last image" "button style=width:80px;height=25px;"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>

</CENTER>

</BODY>
</HTML>




<html>
<head>
<title>
</title>
</head>

<Script Language="JavaScript">

var thisImg = 0
var imgCt = 11
var name = "Picture Viewer.bmp"
var caption="Welcome To The Picture Viewer!"

function newSlide(direction){
if (document.images){
thisImg = thisImg + direction
if (thisImg < 0){ thisImg = 0}
if (thisImg == imgCt) {thisImg=0}

if (thisImg == 0) {
name = "Picture Viewer.bmp"
caption = "Welcome To The Picture Viewer!"
document.imgForm.imgtext.value = caption
}
if (thisImg == 1) {
name = "Consolenator.jpg"
caption = "... By ..."
document.imgForm.imgtext.value = caption
}
if (thisImg == 2) {
name = "X-box II.jpg"
caption = "... By ..."
document.imgForm.imgtext.value = caption
}
if (thisImg == 3) {
name = "X-Box mini.jpg"
caption = "... By ...."
document.imgForm.imgtext.value = caption
}
if (thisImg == 4) {
name = "Doom III.jpg"
caption = "... By ...."
document.imgForm.imgtext.value = caption
}
if (thisImg == 5) {
name = "... By ..."
caption = "Star Wars by Chirisu - Episode 2 saw I recently."
document.imgForm.imgtext.value = caption
}
if (thisImg == 6) {
name = "EEjapan.gif"
caption = "... By ...."
document.imgForm.imgtext.value = caption
}
if (thisImg == 7) {
name = "original.jpg"
caption = "... By ...t."
document.imgForm.imgtext.value = caption
}
if (thisImg == 8) {
name = "Pro Sk473r.jpg"
caption = "... By ...."
document.imgForm.imgtext.value = caption
}
if (thisImg == 9) {
name = "EEWN.jpg"
caption = "... By ..."
document.imgForm.imgtext.value = caption
}
if (thisImg == 10) {
name = "underestimate.jpg"
caption = "... By ..."
document.imgForm.imgtext.value = caption
}
document.slideshow.src = "anime/" + name
}
}

</script>

<body>

<img height="450" width="450" src="Picture Viewer.bmp" ALT="Welcome To The Picture Viewer"" NAME="slideshow" ALIGN="left" HSPACE="10">

<input type="button" value="<<" name="go" onclick="newSlide(-1)">
<input type="button" value=">>" name="go" onclick="newSlide(1)">
<input type="button" value="Picture of the day" name="go" onclick="best()">
<form name="imgForm">
<textarea name="imgtext" rows="9" cols="20" READONLY></textarea>
</form>

</body>
</html>
ConfusedOfLife
10-14-2002, 08:01 PM
Well, I really don't like to read all that code! But I wrote this for ya!
Naming convention : picture number one shoul be called "1.jpg", number 2 is "2.jpg" and .... It's really easier to do that, if you don't wana do this, then you should define another array for your images that each cell holds the name of your image.

I also assumed that each picture has a note and I defined my max length based on that ( actually I even didn't define it! )

Here is the code :



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style>
BODY
{
SCROLLBAR-BASE-COLOR: #1a1a1a;
SCROLLBAR-ARROW-COLOR: DarkGray;
}
table
{
border-style: solid;
border-color: #3A3A3A;
border-width: thick;
background-color: #5A5A5A;
margin-top: 1%;
text-align: center;
font-family: "Century Gothic";
font-size: xx-small;
color: #F9F9F9;
}

h2
{
font-family: 8514oem, "@Arial Unicode MS";
color: #F9F9F9;
}
p
{
font-family: "Courier New";
color: White;
}
.Button
{
background: #191919;
border: #383838;
border-style: groove;
font-family: Thickhead;
font-size: xx-small;
color: White;
}
input
{
background: #2D2D2D;
border-color: #b7b7b7;
border-width : 2;
font-family: Terminal;
color: #E1E1E1;
}
select
{
background-color : #2D2D2D;
color : #E1E1E1;
width : 330px;
}
</style>

<script>
// Which pic is currently in the screen!
oIndex = 1;
// This holds our notes about each picture!
Notes = [
"Picture 1, this is our note!",
"Picture 2, this is our note!",
"Picture 3, this is our note!",
"Picture 4, this is our note!",
"Picture 5, this is our note!",
"Picture 6, this is our note!",
"Picture 7, this is our note!",
"Picture 8, this is our note!",
"Picture 9, this is our note!",
"Picture 10, this is our note!",
"Picture 11, this is our note!",
"Picture 12, this is our note!",
"Picture 13, this is our note!",
"Picture 14, this is our note!",
"Picture 15, this is our note!",
"Picture 16, this is our note!",
"Picture 17, this is our note!",
"Picture 18, this is our note!",
"Picture 19, this is our note!",
"Picture 20, this is our note!"
]



function Init()
{
for (i=0; i<Notes.length; i++)
{
// We'll get the pictures' names by splitting the Notes array by the ","
// and taking the first part, i.e. the name of our picture.
var oOption = Notes[i].split(",")[0];
document.forms[0].oSel.options[i] = new Option(oOption,"");
}
}
function selChange()
{
oIndex = document.forms[0].oSel.selectedIndex +1;
document.forms[0].Notes.value = Notes[oIndex - 1];
document.Pics.src = oIndex + ".jpg";
}
function butChange(entry)
{
switch (entry)
{
case '+' :
if ( oIndex != Notes.length )
{
++oIndex;
document.Pics.src = oIndex + ".jpg";
document.forms[0].Notes.value = Notes[oIndex - 1];
document.forms[0].oSel.selectedIndex = oIndex - 1;
}
break;
case '-' :
if ( oIndex != 1 )
{
--oIndex;
document.Pics.src = oIndex + ".jpg";
document.forms[0].Notes.value = Notes[oIndex - 1];
document.forms[0].oSel.selectedIndex = oIndex - 1;
}
break;
case 'first' :
oIndex = 1;
document.Pics.src = oIndex + ".jpg";
document.forms[0].Notes.value = Notes[oIndex - 1];
document.forms[0].oSel.selectedIndex = oIndex - 1;
break;
case 'last' :
oIndex = Notes.length;
document.Pics.src = oIndex + ".jpg";
document.forms[0].Notes.value = Notes[oIndex - 1];
document.forms[0].oSel.selectedIndex = oIndex - 1;
break;
}

}
</script>

</head>

<body bgcolor="Black" onload="Init()">
<form>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img name="Pics" src="1.jpg" />
</td>
<td valign="top" style="border-left-color : #3A3A3A; border-left-width : 5px; border-left-style : solid">
<textarea name="Notes" style="background-color : #a5a5a5; color : white;" cols="30" rows="10">
Picture 1
</textarea>
</td>
</tr>
<tr>
<td style="border-top-color : #3A3A3A; border-top-width : 5px; border-top-style : solid">
<br />
<input class="Button" type="Button" value="First" onclick="butChange('first');">
<input class="Button" type="Button" value="Pre" onclick="butChange('-');">
<input class="Button" type="Button" value="Next" onclick="butChange('+');">
<input class="Button" type="Button" value="Last" onclick="butChange('last');">
<br />
&nbsp;
</td>
<td align="right" style="border-top-color : #3A3A3A; border-top-width : 5px; border-top-style : solid">
<select name="oSel" onchange="selChange()">
</td>
</tr>
</table>

</body>
</html>
beetle
10-14-2002, 09:09 PM
Hey 101, I don't want to totally scramble your brain, but here's a slideshow I wrote a while back. I think it's a bit more flexible than either I've seen here, and more efficient to boot. Plus, it doesn't rely on (ugly) form elements for the caption output. Let me know if you want help customizing it, or if there's anything you don't understand.<html>
<head>
<title>Slideshow test</title>
<script language="javascript">
var imgRoot = "images/slideshow/";
var curSlide = 0;
var ssData = [
['pic1.jpg','Caption 1'],
['pic2.jpg','Caption 2'],
['pic3.jpg','Caption 3'],
['pic4.jpg','Caption 4'],
['pic5.jpg','Caption 5'],
['pic6.jpg','Caption 6']
];

function goSlide(v) {
switch(v) {
case 'prev':
case 'back':
curSlide--; break;
case 'next':
case 'foward':
curSlide++; break;
case 'end':
case 'last':
curSlide = ssData.length-1; break;
case 'start':
case 'first':
curSlide = 0; break;
default:
curSlide = v - 1;
}
if (curSlide == -1)
curSlide = parseInt(ssData.length - 1);
if (curSlide == ssData.length)
curSlide = 0;
document.getElementById('slide').src = imgRoot + ssData[curSlide][0];
captionText.firstChild.nodeValue = ssData[curSlide][1];
statusText.firstChild.nodeValue = "Slide " + (curSlide + 1) + " of " + ssData.length;
}

function buildSelect(sID) {
var s = document.getElementById(sID);
for (var i=1; i<=ssData.length; i++) {
var o = document.createElement("OPTION");
var t = document.createTextNode(i);
o.appendChild(t);
s.appendChild(o);
}
}
</script>
</head>

<body onLoad="goSlide(1);buildSelect('jumper');">
<img src="" name="slide" id="slide" width="450" height="450">
<div id="captionText"></div>
<div id="statusText">Loading...</div>
<p>
<a href="javascript:goSlide('first')">&lt;&lt; First</a> |
<a href="javascript:goSlide('prev')">&lt; Prev</a> |
<a href="javascript:goSlide('foward')">Next &gt;</a> |
<a href="javascript:goSlide('last')">Last &gt;&gt;</a>
</p>
<select id="jumper" onChange="if (this.selectedIndex != 0) goSlide(this.selectedIndex)">
<option selected>Pick a slide</option>
</select>
</body>
</html>
101
10-14-2002, 09:18 PM
That Is Great Thanks Alot
You Own!
101
10-14-2002, 09:22 PM
I mean Both Of You Two Thanks Alot.
!!!
Now For Drawing The Pictures...
ConfusedOfLife
10-15-2002, 10:37 PM
You're welcome 101, I really enjoy helping ppl.
One more question, when cross-browser compatibility is the case, can we use <div>, nodeValue, createElement, appendChild and ...
beetle
10-15-2002, 11:24 PM
Depends on how far you want to take your compatiblity...

The code I wrote should work just fine in IE 5.0+
Any Gecko based browser (NS6+, Moz, others)
Opera. I haven't tested it, but I assume it worksIf the browsers listed here are good enough for 'cross browser compatiblity' for your site, then go for it. If you need to support IE4 or NS4.x, then this code will need to be changed

Note: IE4 and NS4.x users compromise a small and shrinking population on the web...