Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Multimedia > Image Viewer
Mottie (SuperAdmin) 7/1/2008 7:45 AM EST : Image Viewer
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Image box | Image box with descriptions | Image box with slideshow | Image box with random slideshow | Image box - facebox | Image box - Albums

How to add an image slide show

GuildPortal admin site link to original post


See the Home tab for a working version

The original script is located at: http://www.hscripts.com/scripts/JavaScript/slide-show-software.php, but I made a few changes to the code:
  1. There is no longer a need to number your slides inside the script.
  2. The "Next" and "Prev" button will now wrap around.
  3. Clicking on the image will take you to the next image.
  4. Replaced the copyright notice with an image counter.
Add this code to any "Free Form Text/HTML" box. You can change the border and text style below (in orange). The image size in blue and the URLs to your images in green.
<!-- Original Script (c) http://www.hscripts.com -->
<table cellpadding="0" cellspacing="0"><tbody>
<tr>
 <td style="border: #444444 2px solid;"><img id="pic" onclick="slideshow()" border="0"></td>
</tr>
<tr>
 <td><table style="border: #444444 2px solid; font-size: 13px; font-family: verdana,arial;" width="100%">
  <tbody><tr>
    <td align="center"><a style="color: #ffffff; font-size:80%; cursor: pointer;" onclick="start()">Start</a></td>
    <td align="center"><a style="color: #ffffff; font-size:80%; cursor: pointer;" onclick="slideshow()">Next</a></td>
    <td align="center"><a style="color: #ffffff; font-size:80%; cursor: pointer;" onclick="prev()">Prev</a></td>
    <td align="center"><a style="color: #ffffff; font-size:80%; cursor: pointer;" onclick="end()">End</a></td>
    <td align="center"><div id="currentNumber"></div></td>
   </tr></tbody>
  </table></td>
</tr>
</tbody></table>
<script language="javascript">
var myimages = new Array();
var preload = new Array();
var picture = 0;
var slide;

// *****************************
// To add more images, add
// myimages.push ("URL HERE");
// *****************************

var width = 170;
var height = 170;

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie4.gif");
myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie3.jpg");
myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie2.jpg");
myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie1.jpg");
myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie0.jpg");

// *****************************
// DON'T change anything below
// *****************************
for(var j = 0; j < myimages.length; j++) {
 preload[j] = new Image();
 preload[j].src = myimages[j];
}
document. = setting();
function setting() {
 slide = document.getElementById('pic');
 slide.src = myimages[0];
 slide.setAttribute("width",width);
 slide.setAttribute("height",height);
 showing(0);
}
function slideshow(){
 picture++;
 if(picture == myimages.length) picture=0;
 slide.src = myimages[picture];
 showing(picture);
}
function prev(){
 picture--;
 if(picture < 0) picture=myimages.length-1;
 slide.src = myimages[picture];
 showing(picture);
}
function start(){
 slide.src = myimages[0];
 picture = 0;
 showing(picture);
}
function end(){
 slide.src = myimages[myimages.length-1];
 picture = myimages.length-1
 showing(picture);
}
function showing(cn) {
 var a = (cn+1) + "/" + (myimages.length);
 document.getElementById('currentNumber').innerHTML = a;
 return false;
}
</script>

[top]
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 7/1/2008 11:13 AM EST : Image Viewer v1.1
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Image box with descriptions

Yet another version of the image box...

Version 1.1

  • Changed the navigation text into more traditional looking navigation buttons, you can add images instead if you so desire, or put back in the start, next, prev and end text (just replace the text in red with <img src="IMAGE URL">)
  • Added a description below the navigation buttons, you must add a description with every image or the description will not match the image - if you don't want to add a description, leave the space blank, like this:
    mydescrp.push ("");


Code:
<!-- Original Script by http://www.hscripts.com -->
<table cellpadding="0" cellspacing="0" style="border: #ffcc00 2px solid; color: #ffffff; cursor: pointer;" align=center><tbody>
<tr>
 <td><img id="pic" onclick="slideshow()" border="0"></td>
</tr>
<tr>
 <td>
  <table style="border-top:#ffcc00 2px solid; border-bottom:#ffcc00 2px solid; font-size:80%; font-family: verdana,arial;" width="100%">
  <tbody><tr>
    <td align="center"><a onclick="start()">|&lt;</a></td>
    <td align="center"><a onclick="prev()">&lt;</a></td>
    <td align="center"><a onclick="slideshow()">&gt;</a></td>
    <td align="center"><a onclick="end()">&gt;|</a></td>
    <td align="center"><div id="currNumber"></div></td>
   </tr></tbody>
  </table>
 </td>
</tr>
<tr>
 <td align="center" id="currDescription" wrap></td>
</tr>
</tbody></table>
<script language="javascript">
var myimages = new Array();
var mydescrp = new Array();
var preload = new Array();
var picture = 0;
var slide;
// ************************************
// To add more images, add
// myimages.push ("URL HERE");
// mydescrp.push ("DESCRIPTION HERE");
// ************************************

var width = 170;
var height = 170;

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie4.gif");
mydescrp.push ("Fear the penguin");

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie3.jpg");
mydescrp.push ("Silly monkey, tricks are for kids!");

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie2.jpg");
mydescrp.push ("How you doin'?");

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie1.jpg");
mydescrp.push ("What kind of nuggets?");

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie0.jpg");
mydescrp.push ("Don't burst my bubble!");

// *****************************
// DON'T change anything below
// *****************************
for(var j = 0; j < myimages.length; j++) {
 preload[j] = new Image();
 preload[j].src = myimages[j];
}
document. = setting();
function setting() {
 slide = document.getElementById('pic');
 slide.src = myimages[0];
 slide.setAttribute("width",width);
 slide.setAttribute("height",height);
 document.getElementById('currDescription').width = width;
 showing(0);
}
function slideshow(){
 picture++;
 if(picture == myimages.length) picture=0;
 slide.src = myimages[picture];
 showing();
}
function prev(){
 picture--;
 if(picture < 0) picture=myimages.length-1;
 slide.src = myimages[picture];
 showing();
}
function start(){
 slide.src = myimages[0];
 picture = 0;
 showing();
}
function end(){
 slide.src = myimages[myimages.length-1];
 picture = myimages.length-1
 showing();
}
function showing() {
 var a = (picture+1) + "/" + (myimages.length);
 document.getElementById('currNumber').innerHTML = a;
 document.getElementById('currDescription').innerHTML = mydescrp[picture];
 return false;
}
</script>

[top]
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 8/1/2008 12:46 PM EST : Image Viewer v1.2
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Image box slideshow

Version 1.2

Added a slideshow to the viewer
  • Auto run slideshow and set time between images:
    • runSlideShow is set to true by default to auto run the slideshow. Set it to false (no quotes) if you don't want it enabled by default (in purple)
    • Image display time is in milliseconds. slideShowSpeed is set to a default of 3000, which is actually 3 seconds (in purple).
  • Start and stop the slide show at any time:
    • While the slideshow is playing, you will see a pause button (||), when paused you will see the play button (>).
Control Box & Description Box
  • You can now hide the control box (hideControls) or the image description box (hideDescription) by setting the value to false (no quotes). This text is in purple in the code below.
  • Cleaned up the code so that the image controls are now separate from the table (for easier editing). You can replace the text version of the controls (in red) with <img src="IMAGE URL"> for custom images.

  • The CSS for the boxes is now separate. You can adjust colors, fonts, font sizes or add background images if desired (in orange).
Images & Descriptions
  • Adjust the image height and width in blue. This will shrink or stretch the image to fit into the box.
  • Same as before. Add or remove the lines for your images. Add the URL in green and the description in dark green.

    myimages.push ("URL HERE");
    mydescrp.push ("DESCRIPTION HERE");



Code
<script language="javascript">
// ************************************
// sildeShowSpeed is time in milliseconds (ms)
// 3000 ms = 3 seconds
// ************************************
var slideShowSpeed = 3000;
var runSlideShow = true;
var hideControls = false;
var hideDescription = false;

var width = 170;
var height = 170;

// ************************************
// add images for each control button as follows
// firstImg = '<img src="IMAGE URL">';
// ************************************

var firstImg = '|&lt;';
var prevImg = '&lt;&lt;';
var playImg = '>';
var pauseImg = '||';
var nextImg = '&gt;&gt;';
var lastImg = '&gt;|';

// ************************************
var myimages = new Array();
var mydescrp = new Array();
var preload = new Array();
// ************************************
// To add more images, add
// myimages.push ("URL HERE");
// mydescrp.push ("DESCRIPTION HERE");
// ************************************

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie4.gif");
mydescrp.push ("Fear the penguin");

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie3.jpg");
mydescrp.push ("Silly monkey, tricks are for kids!");

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie2.jpg");
mydescrp.push ("How you doin'?");

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie1.jpg");
mydescrp.push ("What kind of nuggets?");

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie0.jpg");
mydescrp.push ("Don't burst my bubble!");


</script>
<style type="text/css">
#viewer {
 border: #0080ff 1px solid;
 color: #ffffff;
 font-size:80%;
 font-family: verdana,arial;
 padding: 0px;
}
#pic {
 cursor: pointer;
}
#controls {
 background: #222222 url();
 border-top: #0080ff 1px solid;
 color: #ffffff;
 font-size: 90%;
 font-family: arial;
 cursor: pointer;
}
#description {
 background: #222222 url();
 border-top: #0080ff 1px solid;
 color: #ffffff;
 font-size: 100%;
 font-family: verdana;
}
</style>
<!--
*****************************
 DON'T change anything below
***************************** -->
<table id="viewer" cellspacing=0 cellpadding=0 align=center><tbody>
<tr>
 <td><img id="pic" onclick="nxtImg()" border="0"></td>
</tr>
<tr>
 <td>
  <table id="controls" width="100%">
  <tbody><tr>
    <td align="center"><a id="sImg" onclick="start()"></a></td>
    <td align="center"><a id="pImg" onclick="prev()"></a></td>
    <td align="center"><a id="tShow" onclick="toggleShow()"></a></td>
    <td align="center"><a id="nImg" onclick="nxtImg()"></a></td>
    <td align="center"><a id="lImg" onclick="end()"></a></td>
    <td align="center"><div id="currNumber"></div></td>
   </tr></tbody>
  </table>
 </td>
</tr>
<tr>
 <td align="center" id="description" wrap></td>
</tr>
</tbody></table>
<script language="javascript">
var picture = 0;
var slide;

for(var j = 0; j < myimages.length; j++) {
 preload[j] = new Image();
 preload[j].src = myimages[j];
}
document. = setting();
function setting() {
 slide = document.getElementById('pic');
 slide.src = myimages[0];
 slide.setAttribute("width",width);
 slide.setAttribute("height",height);
 document.getElementById('sImg').innerHTML = firstImg;
 document.getElementById('pImg').innerHTML = prevImg;
 document.getElementById('nImg').innerHTML = nextImg;
 document.getElementById('lImg').innerHTML = lastImg;
 document.getElementById('description').width = width;
 if (hideControls) document.getElementById('controls').style.display = "none";
 if (hideDescription) document.getElementById('description').style.display = "none";
 showing();
 changeButton();
}
function nxtImg(){
 picture++;
 if(picture >= myimages.length) picture = 0;
 slide.src = myimages[picture];
 showing();
}
function prev(){
 picture--;
 if(picture < 0) picture=myimages.length-1;
 slide.src = myimages[picture];
 showing();
}
function start(){
 slide.src = myimages[0];
 picture = 0;
 showing();
}
function end(){
 slide.src = myimages[myimages.length-1];
 picture = myimages.length-1
 showing();
}
function showing() {
 if (!hideControls) {
  var a = (picture+1) + "/" + (myimages.length);
  document.getElementById('currNumber').innerHTML = a;
 }
 if (!hideDescription) {
  document.getElementById('description').innerHTML = mydescrp[picture];
 }
}
function runShow(booln) {
 if (!booln && runSlideShow) nxtImg();
 if (runSlideShow) setTimeout('runShow(false)', slideShowSpeed);
}
function toggleShow() {
 runSlideShow = !runSlideShow;
 changeButton();
}
function changeButton() {
 if (!hideControls) {
  var a = (runSlideShow) ? pauseImg : playImg;
  document.getElementById('tShow').innerHTML = a;
 }
 if (runSlideShow) runShow(true);
}
</script>

[top]
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 8/11/2008 5:56 PM EST : Image Viewer v1.3
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Image box random slideshow

Version 1.3

Added a random slideshow option
  • Added code to allow you to randomize a slide show.

    • randomImageSlideShow is set to true to select "random" image viewing. Set it to false to set to default to view sequential images.

    • Also added a toggle button in the control panel to turn the randomization on and off.

    • If you hate this button, simply add this to the CSS:

      #rImg { display:none; }

  • Changed the CSS to better control the control panel styling. It worked fine when it wasn't placed into a GuildPortal content box, but was over-ridden by the CSS once in was in place. It should work now.
Adding and customizing the script
  • I don't want to repeat the same instructions from above, but basically edit the colored text in the code below to customize the image viewer to suit your needs.



Code

<script language="javascript">
// ************************************
// sildeShowSpeed is time in milliseconds (ms)
// 3000 ms = 3 seconds
// ************************************
var slideShowSpeed = 3000;
var runSlideShow = true;
var randomImageSlideShow = true;
var hideControls = false;
var hideDescription = false;

var width = 170;
var height = 170;

// ************************************
// add images for each control button as follows
// firstImg = '<img src="IMAGE URL">';
// ************************************

var firstImg = '|&lt;';
var prevImg = '&lt;&lt;';
var playImg = '&gt;';
var pauseImg = '||';
var nextImg = '&gt;&gt;';
var lastImg = '&gt;|';
var rndImgOn = '+';
var rndImgOff = 'x';

// ************************************
var myimages = new Array();
var mydescrp = new Array();
var preload = new Array();
// ************************************
// To add more images, add
// myimages.push ("URL HERE");
// mydescrp.push ("DESCRIPTION HERE");
// ************************************

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie4.gif");
mydescrp.push ("Fear the penguin");

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie3.jpg");
mydescrp.push ("Silly monkey, tricks are for kids!");

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie2.jpg");
mydescrp.push ("How you doin'?");

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie1.jpg");
mydescrp.push ("What kind of nuggets?");

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie0.jpg");
mydescrp.push ("Don't burst my bubble!");

</script>
<style type="text/css">
#viewer {
 border: #006000 2px solid;
 color: #ffffff;
 font-size: 80%;
 font-family: verdana,arial;
 padding: 0px;
}
#pic {
 cursor: pointer;
}
#controls {
 background: #222222 url();
 border-top: #006000 2px solid;
 color: #ffffff;
 cursor: pointer;
}
#sImg, #pImg, #tShow, #nImg, #lImg, #currNumber, #rImg {
 font-size: 90%;
 font-family: arial;
}
#description {
 background: #222222 url();
 border-top: #006000 2px solid;
 color: #ffffff;
 font-size: 110%;
 font-family: verdana;
 padding: 2px 0px 2px 0px;
}
</style>
<!--
*****************************
 DON'T change anything below
***************************** -->
<table id="viewer" cellspacing=0 cellpadding=0 align=center><tbody>
<tr>
 <td><img id="pic" onclick="nxtImg()" border="0"></td>
</tr>
<tr>
 <td>
  <table id="controls" border=0 width="100%">
  <tbody><tr>
    <td align="center"><a id="sImg" onclick="start()" title="First image"></a></td>
    <td align="center"><a id="pImg" onclick="prev()" title="Previous image"></a></td>
    <td align="center"><a id="tShow" onclick="toggleShow()" title="Start/Stop Slideshow"></a></td>
    <td align="center"><a id="nImg" onclick="nxtImg()" title="Next image"></a></td>
    <td align="center"><a id="lImg" onclick="end()" title="Last image"></a></td>
    <td align="center"><div id="currNumber"></div></td>
    <td align="center" width="2"><a id="rImg" onclick="rndImgToggle()" title="Toggle random image slide show"></a></td>
   </tr></tbody>
  </table>
 </td>
</tr>
<tr>
 <td align="center" id="description" wrap></td>
</tr>
</tbody></table>
<script language="javascript">
var picture = 0;
var slide;

for(var j = 0; j < myimages.length; j++) {
 preload[j] = new Image();
 preload[j].src = myimages[j];
}
document. = setting();
function setting() {
 slide = document.getElementById('pic');
 slide.src = myimages[0];
 slide.setAttribute("width",width);
 slide.setAttribute("height",height);
 document.getElementById('sImg').innerHTML = firstImg;
 document.getElementById('pImg').innerHTML = prevImg;
 document.getElementById('nImg').innerHTML = nextImg;
 document.getElementById('lImg').innerHTML = lastImg;
 document.getElementById('description').width = width;
 if (hideControls) document.getElementById('controls').style.display = "none";
 if (hideDescription) document.getElementById('description').style.display = "none";
 showing();
 changeButton();
 rndImgChange();
}
function nxtImg(){
 picture++;
 if(picture >= myimages.length) picture = 0;
 slide.src = myimages[picture];
 showing();
}
function prev(){
 picture--
 if(picture < 0) picture=myimages.length-1;
 slide.src = myimages[picture];
 showing();
}
function start(){
 slide.src = myimages[0];
 picture = 0;
 showing();
}
function end(){
 slide.src = myimages[myimages.length-1];
 picture = myimages.length-1
 showing();
}
function randomImg(){
 picture = Math.floor( Math.random() * myimages.length );
 slide.src = myimages[picture];
 showing();
}
function rndImgToggle(){
 randomImageSlideShow = !randomImageSlideShow;
 rndImgChange();
}
function rndImgChange(){
 if (!hideControls) {
  var b = (randomImageSlideShow) ? rndImgOn : rndImgOff;
  document.getElementById('rImg').innerHTML = b;
 }
}
function showing() {
 if (!hideControls) {
  var a = (picture+1) + "/" + (myimages.length);
  document.getElementById('currNumber').innerHTML = a;
 }
 if (!hideDescription) {
  document.getElementById('description').innerHTML = mydescrp[picture];
 }
}
function runShow(booln) {
 if (!booln && randomImageSlideShow && runSlideShow) randomImg();
 if (!booln && !randomImageSlideShow && runSlideShow) nxtImg();
 if (runSlideShow) setTimeout('runShow(false)', slideShowSpeed);
}
function toggleShow() {
 runSlideShow = !runSlideShow;
 changeButton();
}
function changeButton() {
 if (!hideControls) {
  var a = (runSlideShow) ? pauseImg : playImg;
  document.getElementById('tShow').innerHTML = a;
 }
 if (runSlideShow) runShow(true);
}
</script>

[top]
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 11/3/2008 8:11 AM EST : Image Viewer v1.4
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Image box random slideshow

Version 1.4

Click on image to view in facebox
  • In previous versions, when you clicked on the image, it would advance to the next image. But in this version, it opens a full sized image in facebox
  • Combined the thumbnail, image and description into one variable for each image.
  • Please look at the instructions on how to customize this box in previous posts.


Code
<script language="javascript">
// ************************************
// sildeShowSpeed is time in milliseconds (ms)
// 3000 ms = 3 seconds
// ************************************
var slideShowSpeed = 3000;
var runSlideShow = true;
var randomImageSlideShow = true;
var hideControls = false;
var hideDescription = false;

var width = 170;
var height = 170;

// ************************************
// add images for each control button as follows
// firstImg = '<img src="IMAGE URL">';
// ************************************

var firstImg = '|&lt;';
var prevImg = '&lt;&lt;';
var playImg = '&gt;';
var pauseImg = '||';
var nextImg = '&gt;&gt;';
var lastImg = '&gt;|';
var rndImgOn = '+';
var rndImgOff = 'x';

// ************************************
var myimages = new Array();
var preload = new Array();
// ************************************
// To add more images, add
// myimages.push ([
//  "THUMBNAIL IMAGE URL",
//  "IMAGE URL",
//  "DESCRIPTION TEXT"
// ]);
// ************************************

myimages.push ([
 "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie4.gif",
 "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/TuxSmiths.png",
 "Fear the penguin"
]);

myimages.push ([
 "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie3.jpg",
 "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/evil-monkey.jpg",
 "Silly monkey, tricks are for kids!"
]);

myimages.push ([
 "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie2.jpg",
 "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/cool2.jpg",
 "How you doin'?"
]);

myimages.push ([
 "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie1.jpg",
 "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/donutsarebetter.jpg",
 "What kind of nuggets?"
]);

myimages.push ([
 "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie0.jpg",
 "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bubble2.jpg",
 "Don't burst my bubble!"
]);

</script>
<style type="text/css">
#viewer {
 border: #444444 2px solid;
 color: #ffffff;
 font-size:80%;
 font-family: verdana,arial;
 padding: 0px;
}
#pic {
 cursor: pointer;
}
#controls {
 background: #222222 url();
 border-top: #444444 2px solid;
 color: #ffffff;
 cursor: pointer;
}
#sImg, #pImg, #tShow, #nImg, #lImg, #currNumber, #rImg {
 font-size: 90%;
 font-family: arial;
}
#description {
 background: #222222 url();
 border-top: #444444 2px solid;
 color: #ffffff;
 font-size:110%;
 font-family: verdana;
 padding: 2px 0px 2px 0px;
}
</style>
<!--
*****************************
 DON'T change anything below
***************************** -->
<table id="viewer" cellspacing=0 cellpadding=0 align=center><tbody>
<tr>
 <td><img id="pic" onclick="openImg()" border="0"></td>
</tr>
<tr>
 <td>
  <table id="controls" border=0 width="100%">
  <tbody><tr>
    <td align="center"><a id="sImg" onclick="start()" title="First image"></a></td>
    <td align="center"><a id="pImg" onclick="prev()" title="Previous image"></a></td>
    <td align="center"><a id="tShow" onclick="toggleShow()" title="Start/Stop Slideshow"></a></td>
    <td align="center"><a id="nImg" onclick="nxtImg()" title="Next image"></a></td>
    <td align="center"><a id="lImg" onclick="end()" title="Last image"></a></td>
    <td align="center"><div id="currNumber"></div></td>
    <td align="center" id="rImgBx" width="2"><a id="rImg" onclick="rndImgToggle()" title="Toggle random image slide show"></a></td>
   </tr></tbody>
  </table>
 </td>
</tr>
<tr>
 <td align="center" id="description" wrap></td>
</tr>
</tbody></table>
<script language="javascript">
var picture = 0;
var slide;

for(var j = 0; j < myimages.length; j++) {
 preload[j] = new Image();
 preload[j].src = myimages[j][0];
}
document.onload = setting();
function setting() {
 slide = document.getElementById('pic');
 slide.src = myimages[0][0];
 slide.setAttribute("width",width);
 slide.setAttribute("height",height);
 document.getElementById('sImg').innerHTML = firstImg;
 document.getElementById('pImg').innerHTML = prevImg;
 document.getElementById('nImg').innerHTML = nextImg;
 document.getElementById('lImg').innerHTML = lastImg;
 document.getElementById('description').width = width;
 if (hideControls) document.getElementById('controls').style.display = "none";
 if (hideDescription) document.getElementById('description').style.display = "none";
 showing();
 changeButton();
 rndImgChange();
}
function nxtImg(){
 picture++;
 if(picture >= myimages.length) picture = 0;
 slide.src = myimages[picture][0];
 showing();
}
function prev(){
 picture--
 if(picture < 0) picture=myimages.length-1;
 slide.src = myimages[picture][0];
 showing();
}
function start(){
 slide.src = myimages[0][0];
 picture = 0;
 showing();
}
function end(){
 slide.src = myimages[myimages.length-1][0];
 picture = myimages.length-1
 showing();
}
function randomImg(){
 picture = Math.floor( Math.random() * myimages.length );
 slide.src = myimages[picture][0];
 showing();
}
function rndImgToggle(){
 randomImageSlideShow = !randomImageSlideShow;
 rndImgChange();
}
function rndImgChange(){
 if (!hideControls) {
  var b = (randomImageSlideShow) ? rndImgOn : rndImgOff;
  document.getElementById('rImg').innerHTML = b;
 }
}
function showing() {
 if (!hideControls) {
  var a = (picture+1) + "/" + (myimages.length);
  document.getElementById('currNumber').innerHTML = a;
 }
 if (!hideDescription) {
  document.getElementById('description').innerHTML = myimages[picture][2];
 }
}
function openImg() {
 runSlideShow = true;
 toggleShow();
 jQuery.facebox({ image: myimages[picture][1] })
}
function runShow(booln) {
 if (!booln && randomImageSlideShow && runSlideShow) randomImg();
 if (!booln && !randomImageSlideShow && runSlideShow) nxtImg();
 if (runSlideShow) setTimeout('runShow(false)', slideShowSpeed);
}
function toggleShow() {
 runSlideShow = !runSlideShow;
 changeButton();
}
function changeButton() {
 if (!hideControls) {
  var a = (runSlideShow) ? pauseImg : playImg;
  document.getElementById('tShow').innerHTML = a;
 }
 if (runSlideShow) runShow(true);
}
</script>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 5/19/2009 2:32 AM EST : Image Viewer v1.5
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Image box with Albums v1.5



Changes in this version
  • Added albums and select between them at the top of the image
  • Modified the script to utilize jQuery
Code
<script language="javascript">
// ************************************
// sildeShowSpeed is time in milliseconds (ms)
// 3000 ms = 3 seconds
// ************************************
var slideShowSpeed = 3000;
var runSlideShow = false;
var randomImageSlideShow = false;
var hideControls = false;
var hideDescription = false;

var album = 1; // starting album
var picture = 1; // starting picture

var width = 170;
var height = 170;

// ************************************
// add images for each control button as follows
// firstImg = '<img src="IMAGE URL">';
// ************************************

var firstImg = '|&lt;';
var prevImg = '&lt;&lt;';
var playImg = '&gt;';
var pauseImg = '||';
var nextImg = '&gt;&gt;';
var lastImg = '&gt;|';
var rndImgOn = '+';
var rndImgOff = 'x';

// ************************************
// To add another album, add: var albumx = new Array(["ALBUM NAME"]); then add the new album to the myAlbums array
// To add more images, add: albumx.push (["THUMBNAIL URL","IMAGE URL","DESCRIPTION TEXT"]);
// Thumbnail will be resized to fit the viewer and the image will open in a facebox window
// ************************************
myAlbumsRoot = "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/";

var album1 = new Array(["Avatars"]);
album1.push (["myavie4.gif","TuxSmiths.png","Fear the penguin"]);
album1.push (["myavie3.jpg","evil-monkey.jpg","Silly monkey, tricks are for kids!"]);
album1.push (["myavie2.jpg","cool2.jpg","How you doin'?"]);
album1.push (["myavie1.jpg","donutsarebetter.jpg","What kind of nuggets?"]);
album1.push (["myavie0.jpg","bubble2.jpg","Don't burst my bubble!"]);

var album2 = new Array(["LOL Cats"]);
album2.push (["th_cat-approve.jpg","cat-approve.jpg","He approves!"]);
album2.push (["th_cat-danger.jpg","cat-danger.jpg","Guardian Cat"]);
album2.push (["th_cat-disabled.jpg","cat-disabled.jpg","Run while you can!"]);
album2.push (["th_cat-missile.jpg","cat-missile.jpg","OOOoo Shiny!! o.O"]);
album2.push (["th_cat-pirate.jpg","cat-pirate.jpg","Ha Ha what plank? *splash*"]);
album2.push (["th_cat-pirate2.jpg","cat-pirate2.jpg","Yarrrrrr!!!"]);
album2.push (["th_cat-shriner.jpg","cat-shriner.jpg","Does Jihad cat have a cool hat too?"]);

var album3 = new Array(["Members"]);
album3.push (["th_cat-smrt.jpg","cat-smrt.jpg","I am so smart, S M R T!"]);
album3.push (["evil-monkey.jpg","evil-monkey.jpg","Evil Monkey!"]);

var myAlbums = new Array(album1, album2, album3);
</script>
<style type="text/css">
#viewer {
 border: #444444 2px solid;
 color: #ffffff;
 font-size:80%;
 font-family: verdana,arial;
 padding: 0px;
}
#pic {
 cursor: pointer;
}
#controls {
 background: #222222 url();
 border-top: #444444 2px solid;
 color: #ffffff;
 cursor: pointer;
}
#albumbx {
 background: #222222 url();
 border-bottom: #444444 2px solid;
 color: #ffffff;
 cursor: pointer;
}
#sImg, #pImg, #tShow, #nImg, #lImg, #currNumber, #rImg, #pAlb, #nAlb {
 font-size:90%;
 font-family: arial;
}
#description {
 background: #222222 url();
 border-top: #444444 2px solid;
 color: #ffffff;
 font-size:110%;
 font-family: verdana;
 padding: 2px 0px 2px 0px;
}
#rImg { display:block; }
</style>
<!--
*****************************
 DON'T change anything below
***************************** -->
<table id="viewer" cellspacing=0 cellpadding=0 border=0 align=center><tbody>
<tr>
 <td align="center" id="albumbx">
  <a id="pAlb" onclick="prevAlb()" title="Previous Album"></a>
  <span id="tAlb"></span>
  <a id="nAlb" onclick="nxtAlb()" title="Next Album"></a></td>
</tr>
<tr>
 <td colspan=3><img id="pic" onclick="openImg()" border="0"></td>
</tr>
<tr>
 <td colspan=3>
  <table id="controls" border=0 width="100%">
  <tbody><tr>
    <td align="center"><a id="sImg" onclick="start()" title="First image"></a></td>
    <td align="center"><a id="pImg" onclick="prev()" title="Previous image"></a></td>
    <td align="center"><a id="tShow" onclick="toggleShow()" title="Start/Stop Slideshow"></a></td>
    <td align="center"><a id="nImg" onclick="nxtImg()" title="Next image"></a></td>
    <td align="center"><a id="lImg" onclick="end()" title="Last image"></a></td>
    <td align="center"><div id="currNumber"></div></td>
    <td align="center" id="rImgBx" width=album:2><a id="rImg" onclick="rndImgToggle()" title="Toggle random image slide show"></a></td>
   </tr></tbody>
  </table>
 </td>
</tr>
<tr>
 <td align="center" id="description" wrap></td>
</tr>
</tbody></table>
<script language="javascript">
var c = myAlbums[album-1];
$(document).ready(function(){vwrsetup()})
function vwrsetup() {
 $('#pAlb').html(prevImg);
 $('#tAlb').html(c[0][0]);
 $('#nAlb').html(nextImg);
 $('#pic').attr("src",myAlbumsRoot+c[picture][0]).attr("width",width).attr("height",height);
 $('#sImg').html(firstImg);
 $('#pImg').html(prevImg);
 $('#nImg').html(nextImg);
 $('#lImg').html(lastImg);
 $('#description').attr("width",width);
 if (hideControls) $('#controls').css("display","none");
 if (hideDescription) $('#description').css("display","none");
 showing();
 changeButton();
 rndImgChange();
}
function prevAlb(){
 album--
 if(album < 1) album = myAlbums.length;
 c = myAlbums[album-1];
 picture = 1;
 $('#tAlb').html(c[0][0]);
 $('#pic').attr("src",myAlbumsRoot+c[picture][0]);
 showing();
}
function nxtAlb(){
 album++;
 if(album > myAlbums.length) album = 1;
 c = myAlbums[album-1];
 picture = 1;
 $('#tAlb').html(c[0][0]);
 $('#pic').attr("src",myAlbumsRoot+c[picture][0]);
 showing();
}
function prev(){
 picture--
 if(picture < 1) picture=c.length-1;
 $('#pic').attr("src",myAlbumsRoot+c[picture][0]);
 showing();
}
function nxtImg(){
 picture++;
 if(picture >= c.length) picture = 1;
 $('#pic').attr("src",myAlbumsRoot+c[picture][0]);
 showing();
}
function start(){
 $('#pic').attr("src",myAlbumsRoot+c[1][0]);
 picture = 1;
 showing();
}
function end(){
 $('#pic').attr("src",myAlbumsRoot+c[c.length-1][0]);
 picture = c.length-1;
 showing();
}
function randomImg(){
 picture = Math.floor( Math.random() * (c.length-1) ) + 1;
 $('#pic').attr("src",myAlbumsRoot+c[picture][0]);
 showing();
}
function rndImgToggle(){
 randomImageSlideShow = !randomImageSlideShow;
 rndImgChange();
}
function rndImgChange(){
 if (!hideControls) {
  var b = (randomImageSlideShow) ? rndImgOn : rndImgOff;
  $('#rImg').html(b);
 }
}
function showing() {
 if (!hideControls) {
  var a = (picture) + "/" + (c.length-1);
  $('#currNumber').html(a);
 }
 if (!hideDescription) {
  $('#description').html(c[picture][2]);
 }
}
function openImg() {
 runSlideShow = true;
 toggleShow();
 jQuery.facebox({ image: myAlbumsRoot+c[picture][1] })
}
function runShow(booln) {
 if (!booln && randomImageSlideShow && runSlideShow) randomImg();
 if (!booln && !randomImageSlideShow && runSlideShow) nxtImg();
 if (runSlideShow) setTimeout('runShow(false)', slideShowSpeed);
}
function toggleShow() {
 runSlideShow = !runSlideShow;
 changeButton();
}
function changeButton() {
 if (!hideControls) {
  var a = (runSlideShow) ? pauseImg : playImg;
  $('#tShow').html(a);
 }
 if (runSlideShow) runShow(true);
}
</script>
Customizing
  • Slideshow

    • Adjust the time between images by changing the variable below. The time is in milliseconds, so 3000 ms = 3 seconds.

      var slideShowSpeed = 3000;

    • Automatically start the slideshow by setting the variable below to true:

      var runSlideShow = false;

    • Have the slideshow pick the next image randomly by setting the variable below to true. You can toggle this by clicking on the right most control (+) = random on, (x) = random off:

      var randomImageSlideShow = false;

  • Controls

    • You can hide the image controls by setting the variable below to true. The control panel is the box directly below the image that allows you to go to the first, previous, play/pause, next and last image. It also includes the image counter and the random image toggle.

      var hideControls = false;

    • You can replace the controls with custom images or anything else by modifying the variables below. Note: HTML escape codes are used here "<" = "&lt;" and ">" = "&gt;"

      var firstImg = '|&lt;';
      var prevImg = '&lt;&lt;';
      var playImg = '&gt;';
      var pauseImg = '||';
      var nextImg = '&gt;&gt;';
      var lastImg = '&gt;|';
      var rndImgOn = '+';
      var rndImgOff = 'x';

      To replace this text with an image, just add the tag inside the single quotes:

      var firstImg = '<img src="IMAGE URL">';

  • Description

    • You can hide the image description by setting the variable below to true. If you set it to true, you can leave out the description part of the albumx variable in the script.

      var hideDescription = false;

  • Albums & Images

    • Starting Album & Picture - You can set the starting album and picture by setting the below variables. The count starts at one, so do not use zero here.

      var album = 1; // starting album
      var picture = 1; // starting picture

    • Image Size - Adjust the image viewer size (pixels) by modifying the variables below. All thumbnail images will be forced to this size even if they are much smaller or much larger

      var width = 170;
      var height = 170;

    • Album Root - A variable named myAlbumsRoot was added to allow you to make the album variables more readable. If you are copying and pasting the direct link from photobucket, then this may be more trouble than it is worth - in this case just set the variable to nothing (double quotes). Otherwise, you can see that all of my test images are contained in one photobucket folder

      myAlbumsRoot = "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/";

      Example: cat-smrt.jpg has the full URL of http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/cat-smrt.jpg

    • Adding a new album - To add a new album, copy the line below and replace the "ALBUM NAME" in light blue with the name of the album (of course)  - then rename the "albumx" to whatever you want to name the album... I've numbered mine sequentially starting from one.

      var albumx = new Array(["ALBUM NAME"]);

      then add this new album name to the "myAlbums" array:

      var myAlbums = new Array(album1, album2, album3, albumx);

    • Adding images to an album - To add images to an album, copy the example below then edit it appropriately... make sure you are adding it to the album you want the image to be in (albumx in this example). Include the THUMBNAIL URL (in bright green) - For photobucket, you can just take your IMAGE URL (in teal) and add "th_" to the front of the image name (e.g. cat-smrt.jpg will have a thumbnail named th_cat-smrt.jpg). Lastly, add the caption/description of your image (in green) but don't include any quotes.

      albumx.push (["THUMBNAIL URL","IMAGE URL","DESCRIPTION TEXT"]);

  • Styling the Image box

    • Change the border colors (#444444), background colors (#222222) or text color (#ffffff) to whatever you want. The border is also set to 2px wide.

    • You can include a background image by adding the URL inside the url()

      background: #222222 url(BACKGROUND IMAGE URL HERE);

    • Change the font size of the control box text (80%) or the description text (110%).
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%