Image box with descriptions

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

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

Image box random slideshow

Version 1.3

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

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

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

Image box with Albums v1.5

• Added albums and select between them at the top of the image
  
• Modified the script to utilize jQuery

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

• 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%).