grassmeyer
06-15-2007, 11:48 PM
1) Script Title: Combined Thumbnail Viewer III (Ultimate Fade-In Slideshow v1.5 and Thumbnail Viewer II) & CMotion
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm
3) Describe problem:
I need help making the large image random on page load.
Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/gallerystyle.css" />
<script type="text/javascript" src="motiongallery3.js">
/***********************************************
* CMotion Image Gallery- Copyright Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
/***********************************************
* Thumbnail Viewer III modified from
* Ultimate Fade-In Slideshow (v1.5) and Thumbnail Viewer II:
* both Copyright Dynamic Drive (http://www.dynamicdrive.com)
* modified by jscheuer1 in http://www.dynamicdrive.com/forums
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var dynimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
//"Thumnail for Gallery", "Large Image", "optional_link", "optional_target"
//link and target are for large image
dynimages[0]=["photos/console_th.jpg", "photos/console.jpg", "", ""] //plain image syntax
dynimages[1]=["photos/lights_th.jpg", "photos/lights.jpg", "", ""] //plain image syntax
dynimages[2]=["photos/rv_th.jpg", "photos/rv.jpg", "", ""] //plain image syntax
dynimages[3]=["photos/police_th.jpg", "photos/police.jpg", "", ""] //plain image syntax
var fadebgcolor="white"
////NO need to edit beyond here/////////////
var flag=1
var fadearray=new Array() //array to cache displayarea instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
function displayarea(theimages, fadewidth, fadeheight, borderwidth){
this.pausecheck=0
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][1]
}
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", 100)
}
}
function fadepic(obj){
if (obj.degree<100){
if (obj.tempobj.filters&&obj.tempobj.filters[0]&&typeof obj.tempobj.ofilter=='undefined') obj.tempobj.ofilter=obj.tempobj.style.filter
obj.degree+=5
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
if (obj.tempobj.filters&&obj.tempobj.filters[0]&&typeof obj.tempobj.ofilter!=='undefined') obj.tempobj.style.filter=null
clearInterval(fadeclear[obj.slideshowid])
obj.pausecheck=flag=1
}
}
displayarea.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][2]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][2]+'" target="'+this.theimages[picindex][3]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][2]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
displayarea.prototype.rotateimage=function(){
var cacheobj=this
if (this.pausecheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
displayarea.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters){
if (typeof crossobj.ofilter!=='undefined')
crossobj.style.filter=crossobj.ofilter
if(crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
displayarea.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
var cacheobj=this
this.rotateimage()
}
var wait
function switchFade(iNum, slideId){
var slideIdNum
if (typeof slideId=='number')
slideIdNum=slideId
else
for (var i_tem = 0; i_tem < fadearray.length; i_tem++)
if (fadearray[i_tem].theimages==slideId)
slideIdNum=i_tem
if (flag){
clearInterval(wait)
flag=0
clearInterval(fadeclear[slideIdNum])
fadearray[slideIdNum].pausecheck=0
fadearray[slideIdNum].nextimageindex=iNum
fadearray[slideIdNum].nextcanvas=(fadearray[slideIdNum].curcanvas==fadearray[slideIdNum].canvasbase+"_0")? fadearray[slideIdNum].canvasbase+"_0" : fadearray[slideIdNum].canvasbase+"_1"
fadearray[slideIdNum].tempobj=iebrowser? iebrowser[fadearray[slideIdNum].nextcanvas] : document.getElementById(fadearray[slideIdNum].nextcanvas)
fadearray[slideIdNum].populateslide(fadearray[slideIdNum].tempobj, fadearray[slideIdNum].nextimageindex)
setTimeout("fadearray["+slideIdNum+"].rotateimage()", 100)
}
else{
clearInterval(wait)
wait=setInterval("switchFade("+iNum+", "+slideIdNum+");", 100)
}
}
</script>
</head>
<body link="#d291d3" vlink="#d291d3" alink="#d291d3" style="margin:0px; padding:0px;">
<script type="text/javascript">
//new displayarea(IMAGES_ARRAY_NAME, images_width, images_height, borderwidth)
new displayarea(dynimages, 448, 299, 0)
</script>
<div style="overflow:hidden; height:98px; background-image:url(photos/images/arrows_03.gif); background-repeat:no-repeat; background-position:0px 35px;"><div id="motioncontainer" style="position:relative; width:432px; height:98px; overflow:hidden; left: 10px; top: 5px;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
<script type="text/javascript">
document.write('<nobr id="trueContainer">')
for (var i_tem = 0; i_tem < dynimages.length; i_tem++)
document.write('<a href="javascript:switchFade('+[i_tem]+', dynimages)"><img src="'+dynimages[i_tem][0]+'" border="1"></a>')
document.write('</nobr>')
</script>
</div>
</div>
</div>
</body>
</html>
You can see it working here:
http://www.kdbco.com/gallery/
Everything functions like how I want it except I can't figure out how to make the large image that loads when the page is loaded or refreshed be random.
Any help will be appreciated, DD rocks!!
Jen
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm
3) Describe problem:
I need help making the large image random on page load.
Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/gallerystyle.css" />
<script type="text/javascript" src="motiongallery3.js">
/***********************************************
* CMotion Image Gallery- Copyright Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
/***********************************************
* Thumbnail Viewer III modified from
* Ultimate Fade-In Slideshow (v1.5) and Thumbnail Viewer II:
* both Copyright Dynamic Drive (http://www.dynamicdrive.com)
* modified by jscheuer1 in http://www.dynamicdrive.com/forums
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var dynimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
//"Thumnail for Gallery", "Large Image", "optional_link", "optional_target"
//link and target are for large image
dynimages[0]=["photos/console_th.jpg", "photos/console.jpg", "", ""] //plain image syntax
dynimages[1]=["photos/lights_th.jpg", "photos/lights.jpg", "", ""] //plain image syntax
dynimages[2]=["photos/rv_th.jpg", "photos/rv.jpg", "", ""] //plain image syntax
dynimages[3]=["photos/police_th.jpg", "photos/police.jpg", "", ""] //plain image syntax
var fadebgcolor="white"
////NO need to edit beyond here/////////////
var flag=1
var fadearray=new Array() //array to cache displayarea instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
function displayarea(theimages, fadewidth, fadeheight, borderwidth){
this.pausecheck=0
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][1]
}
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", 100)
}
}
function fadepic(obj){
if (obj.degree<100){
if (obj.tempobj.filters&&obj.tempobj.filters[0]&&typeof obj.tempobj.ofilter=='undefined') obj.tempobj.ofilter=obj.tempobj.style.filter
obj.degree+=5
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
if (obj.tempobj.filters&&obj.tempobj.filters[0]&&typeof obj.tempobj.ofilter!=='undefined') obj.tempobj.style.filter=null
clearInterval(fadeclear[obj.slideshowid])
obj.pausecheck=flag=1
}
}
displayarea.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][2]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][2]+'" target="'+this.theimages[picindex][3]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][2]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
displayarea.prototype.rotateimage=function(){
var cacheobj=this
if (this.pausecheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
displayarea.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters){
if (typeof crossobj.ofilter!=='undefined')
crossobj.style.filter=crossobj.ofilter
if(crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
displayarea.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
var cacheobj=this
this.rotateimage()
}
var wait
function switchFade(iNum, slideId){
var slideIdNum
if (typeof slideId=='number')
slideIdNum=slideId
else
for (var i_tem = 0; i_tem < fadearray.length; i_tem++)
if (fadearray[i_tem].theimages==slideId)
slideIdNum=i_tem
if (flag){
clearInterval(wait)
flag=0
clearInterval(fadeclear[slideIdNum])
fadearray[slideIdNum].pausecheck=0
fadearray[slideIdNum].nextimageindex=iNum
fadearray[slideIdNum].nextcanvas=(fadearray[slideIdNum].curcanvas==fadearray[slideIdNum].canvasbase+"_0")? fadearray[slideIdNum].canvasbase+"_0" : fadearray[slideIdNum].canvasbase+"_1"
fadearray[slideIdNum].tempobj=iebrowser? iebrowser[fadearray[slideIdNum].nextcanvas] : document.getElementById(fadearray[slideIdNum].nextcanvas)
fadearray[slideIdNum].populateslide(fadearray[slideIdNum].tempobj, fadearray[slideIdNum].nextimageindex)
setTimeout("fadearray["+slideIdNum+"].rotateimage()", 100)
}
else{
clearInterval(wait)
wait=setInterval("switchFade("+iNum+", "+slideIdNum+");", 100)
}
}
</script>
</head>
<body link="#d291d3" vlink="#d291d3" alink="#d291d3" style="margin:0px; padding:0px;">
<script type="text/javascript">
//new displayarea(IMAGES_ARRAY_NAME, images_width, images_height, borderwidth)
new displayarea(dynimages, 448, 299, 0)
</script>
<div style="overflow:hidden; height:98px; background-image:url(photos/images/arrows_03.gif); background-repeat:no-repeat; background-position:0px 35px;"><div id="motioncontainer" style="position:relative; width:432px; height:98px; overflow:hidden; left: 10px; top: 5px;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
<script type="text/javascript">
document.write('<nobr id="trueContainer">')
for (var i_tem = 0; i_tem < dynimages.length; i_tem++)
document.write('<a href="javascript:switchFade('+[i_tem]+', dynimages)"><img src="'+dynimages[i_tem][0]+'" border="1"></a>')
document.write('</nobr>')
</script>
</div>
</div>
</div>
</body>
</html>
You can see it working here:
http://www.kdbco.com/gallery/
Everything functions like how I want it except I can't figure out how to make the large image that loads when the page is loaded or refreshed be random.
Any help will be appreciated, DD rocks!!
Jen