All the features of Image Gallery 1
Additional options
My example above shows all three methods of displaying the images, you can use any single method or any combination of the three.
To create the thumbnails simply code in the img tag with your thumbnail image, the function call nextPic(n) includes an ordinal number that relates to the relevant array index number.
<img src="pic01sm.jpg" onclick="nextPic(0)"> <img src="pic02sm.jpg" onclick="nextPic(1)">
To create the buttons
<input type="button" value="|<" onclick="goToEnd(0)" title="First"> <input type="button" value="Prev" onclick="manualDir(0)"> <input type="button" value="Next" onclick="manualDir(1)"> <input type="button" value=">|" onclick="goToEnd(1)" title="Last"> <input type="button" id="ss" value="Slideshow" onclick="dualButt()">
The display box for the text is dynamically created whenever there is text to be shown.
You can create a default css style rule to apply to all the text displays, this style rule must be called defaultstyle
Example:
.defaultstyle{
color:#008000;
background-color:#ddeedd;
border:2px solid #bbccbb;
}
To set up the gallery you need to enter your image and text into the array
If you are only showing an image the relevant index requires 2 entry
["bigpic.jpg","Alt Text"]
If you are showing an image and text the relevant index requires 3 entries
["bigpic.jpg","Alt Text","Image text"]
You can also create additional style rules and apply them to one or more text displays, overriding the default style rule.
With the exception of the default style your custom style rule names can be any of your choosing.
If you are going to apply a custom style rule the relevant index requires 4 entries
["bigpic.jpg","Alt Text","Image text","yourstylerulename"]
The overall width of the display is determined by the width of the current image, the height is determined by the height current image plus any text that is shown.
The size that the larger image is shown at can be adjusted with variable imageSize this is a percent value set at 100 by default.
The value of imageSize will be applied to all the larger images widths and heights
The border around the image can be changed with variable displayBorderWidth this border is also be applied to the text box when generated. The border colour is set at variable displayBorderColor.
With variable centerImage set to 1 the display is initially shown in the center of the window, if required you can use the variables offsetX and offsetY to offset the final position of the display.
To manually position the display change the variable centerImage to zero and use the left and top positions within the imgholder div
You can have the slideshow run when the page loads by setting the value of variable slideShowMode to 1
<HTML>
<HEAD>
<TITLE>Image Gallery 2</TITLE>
<script type="text/javascript">
<!--
//Jeff
//www.huntingground.freeserve.co.uk
images=[
['pic01.jpg','Alt Text','This text box is dynamically created to show any text that goes with the image.'],
['pic02.jpg','Alt Text','A default style can be set for this text box and its contents'],
['pic03.jpg','Alt Text','You can also over-ride the default style and create individual text box styles','textstyle2'],
['pic04.jpg','Alt Text','You can show the larger images in a different size to its default size','textstyle3'],
['pic05.jpg','Alt Text','You can show just the image, see next image'],
['pic06.jpg','Alt Text'],
['pic07.jpg','Alt Text','This version can be used as a slideshow'],
['pic08.jpg','Alt Text','Enjoy'] // no comma at the end of the last line
]
pause=3000 // for slideshow
dualFade=0 // 0 = fades in, 1 = fades out then in
slideShowMode=0 // 0=no, 1=yes
centerImage=1 // 0 = no, 1 = yes
imageSize=80 // % size the large image is shown at
displayBorderWidth=8
displayBorderColor="#ffffff"
offsetX=0
offsetY=0
lastN=""
count=0
fading=0
fadeStep = 2
fadeSpeed=10
minFadeValue=0
slideShowTimer=null
firstRun=true
preload=new Array()
for(var i=0;i<images.length;i++){
preload[i]=new Image()
preload[i].src=images[i][0]
}
function nextPic(n){
dualButt(0)
initFade(n)
}
function manualDir(n){
if(fading==1){return}
dualButt(0)
if(n==0){count--}
else{count++}
if(count==-1){count=images.length-1}
if(count==images.length){count=0}
initFade(count)
}
var buttonCount=0
function dualButt(m){
if(!document.getElementById("ss")){return}
clearTimeout(slideShowTimer)
buttonCount++
if(arguments.length==1){
buttonCount=2
}
if(buttonCount==1){
slideShowMode=1
runSlideShow()
document.getElementById("ss").value="Stop"
document.getElementById("ss").style.width="93px"
}
else{
slideShowMode=0
document.getElementById("ss").value="Slideshow"
buttonCount=0
}
}
function showImage(num){
displayEl=document.getElementById("imgholder")
displayPic=document.images["pic"]
imageWidth=preload[num].width/100*imageSize
imageHeight=preload[num].height/100*imageSize
displayPic.alt=images[num][1]
if(document.getElementById("displaytext")){
displayEl.removeChild(displayText)
}
displayEl.style.backgroundColor=displayBorderColor // reset for display
displayEl.style.width=(displayBorderWidth==0?imageWidth:imageWidth+(displayBorderWidth*2))+"px"
displayEl.style.height=(displayBorderWidth==0?imageHeight:imageHeight+(displayBorderWidth*2))+"px"
displayEl.style.display="block"
displayPic.src=preload[num].src
displayPic.style.width=imageWidth+"px"
displayPic.style.height=imageHeight+"px"
displayPic.style.margin=displayBorderWidth+"px"
if(images[num][2]){ // create text box if required
displayEl.style.height=""
displayText=document.createElement("DIV")
displayText.setAttribute("id","displaytext")
with(displayText.style){
marginLeft=displayBorderWidth+"px"
marginRight=displayBorderWidth+"px"
marginBottom=displayBorderWidth+"px"
}
displayText.innerHTML=images[num][2]
displayEl.appendChild(displayText)
if(images[num][3]){
document.getElementById("displaytext").className=images[num][3] // apply style
}
else{
document.getElementById("displaytext").className="defaultstyle"
}
}
if(centerImage==1){
displayEl.style.position="absolute"
centerLeft=(document.body.clientWidth/2) - (displayEl.offsetWidth/2) + offsetX
centerTop=(document.body.clientHeight/2)-(displayEl.offsetHeight/2) + document.body.scrollTop + offsetY
displayEl.style.left=centerLeft+"px"
displayEl.style.top=centerTop+"px"
}
if(firstRun&&slideShowMode==1){
runSlideShow()
}
firstRun=false
}
function runSlideShow(){
count=(count==images.length-1?0:count+1)
initFade(count)
}
function initFade(n){
count=n
if(lastN==n||fading==1){return}
if(dualFade==0){fadeValue=0}
else{fadeValue=100}
picNum=n
lastN=n
fadePic()
if(slideShowMode==1){
fadeTime=(dualFade==1?(((100/fadeStep)*fadeSpeed)*2):(((100/fadeStep)*fadeSpeed)))
slideShowTimer=setTimeout("runSlideShow()",pause+fadeTime)
}
}
function fadePic(){
fading=1
fadeValue -= fadeStep
fadeTimer=setTimeout("fadePic()",fadeSpeed)
if("filters" in document.body && "alpha" in document.body.filters){displayEl.filters.alpha.opacity=fadeValue}
else{displayEl.style.opacity=(fadeValue/100)-0.1}
if(fadeValue<minFadeValue){ // for fade out first
fadeValue=minFadeValue
fadeStep= -fadeStep
showImage(picNum)
}
if(fadeValue>=100){ // fade in
fadeValue=100
fadeStep= -fadeStep
fading=0
clearTimeout(fadeTimer)
}
}
function goToEnd(n){
if(n==0){
count=0
}
else{
count=images.length-1
lastN=null
}
showImage(count)
dualButt(0)
}
// add onload="showImage(0)" to the opening body tag
// -->
</script>
<style>
#imgholder{opacity:0.9}
.defaultstyle{color:#008000;background-color:#ddeedd;border:2px solid #bbccbb}
.textstyle2{color:#808000;background-color:#eeeedd;border:2px solid #ccccbb}
.textstyle3{color:#800000;background-color:#eedddd;border:2px solid #ccbbbb}
.textstyle4{color:#000000;background:#ddddee;border:1px solid #bbbbcc;}
.thumbs img{width:60px;height:40px}
</style>
<!--[if IE]>
<style type="text/css">
#imgholder{
filter:alpha(opacity=100)
}
</style>
<! [endif]-->
</HEAD>
<BODY onload="showImage(0)">
<h1>Image Gallery 2</h1>
<div id="imgholder" title="Click to stop" onclick="dualButt(0)"><img name="pic" id="pic" alt="" src="blank.gif" style="position:relative"></div>
<P> <div class="thumbs" style="width:135px;text-align:center"> <img src="pic01sm.jpg" onclick="nextPic(0)"> <img src="pic02sm.jpg" onclick="nextPic(1)"><br> <img src="pic03sm.jpg" onclick="nextPic(2)"> <img src="pic04sm.jpg" onclick="nextPic(3)"><br> <img src="pic05sm.jpg" onclick="nextPic(4)"> <img src="pic06sm.jpg" onclick="nextPic(5)"><br> <img src="pic07sm.jpg" onclick="nextPic(6)"> <img src="pic08sm.jpg" onclick="nextPic(7)"><br> <input type="button" id="ss" value="Slideshow" onclick="dualButt()"><br> <input type="button" value="|<" onclick="goToEnd(0)" title="First"> <input type="button" value="Prev" onclick="manualDir(0)"> <input type="button" value="Next" onclick="manualDir(1)"> <input type="button" value=">|" onclick="goToEnd(1)" title="Last"> </div> </BODY> </HTML>