Flexible image slideshow script help

Love your FLEXIBLE IMAGE SLIDESHOW http://javascriptkit.com/script/script2/flexibleslide.shtml and have gratefully used it for sampler http://jacquimorgan.tripod.com demo site and http://www.auntnini.com/sketch/increment.html .

On the latter, also have a script from http://www.alistapart.com/articles/imagegallery/ that changes images and titles.

I’m trying to figure out how to incorporate image titles (that will change with images) in JaveScriptKit’s wonderful FLEXIBLE IMAGE SLIDESHOW. A genius’s help would be welcome.

For that script you could add the following to the rotateimages function


if(ultishowCopy[currentslide][3]){
ultcontainer+='<div>'+ultishowCopy[currentslide][3]+'</div>'
}

// here denotes where you might want to place it


function rotateimages() {
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'

// here before link & image

if (ultishowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultishowCopy[currentslide][1]+'" target="'+ultishowCopy[currentslide][2]+'">'

// here in link before image

ultcontainer+='<img src="'+ultishowCopy[currentslide][0]+'" border="0">'

// here in link after image

if (ultishowCopy[currentslide][1]!="")
ultcontainer+='</a>'

// here after link & image

ultcontainer+='</center>'

You will also have to add a fourth entry to your arrays for the text


//ultishow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target","TEXT"]

ultishow[0]=['summer06/carolineJune.jpg', '', '','text 1']
ultishow[1]=['summer06/carolineWhite.jpg', 'index.htm','', 'more text']
ultishow[2]=['summer06/elnaBlueDress.jpg', 'newRolls.html', '','text is nice']
ultishow[3]=['summer06/elanablackDress.jpg', '', '','Yoohoo']

Thanks heaps. But the rotation does not work with my modification (below). Instead of <DIV>, tried <div id-"space"> or <div><h2>, etc. with no results. I'm doing something wrong, but it is not "obvious" to me. My non-working attempt is at http://jacquimorgan.tripod.com/index3.html. The original working version is http://jacquimorgan.tripod.com/index.html

=================================
<div id="space">
<img src="17_yearWoman.jpg" />
<script type="text/javascript">
/* Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ This notice must stay intact for use */

var ultishow=new Array()

//ultishow[x]=["path to image", "OPTIONAL image link", "OPTIONAL target", "caption/Title"]
ultishow[0]=['hist/ManGoat.jpg', 'hist/index.html', '_blank', 'American Artist cover art']
ultishow[1]=['hist/04_AmericanArtist.jpg', 'hist/index.html', ''. 'American Artist magazine cover']
ultishow[2]=['hist/elecCircusHand.jpg', 'hist/index.html', '', 'Electric Circus poster art']
ultishow[3]=['hist/FrontCover.jpg', 'hist/index.html', '', 'Electric Circus poster']
ultishow[4]=['paintly/45foodGlobalPubx.jpg', 'paintly/index.html', '', '']
ultishow[5]=['scenes/54edieBauer.jpg', 'paintly/index.html', '', '']
ultishow[6]=['still/43SantaAnaVineyard.jpg', 'paintly/index.html', '', '']
ultishow[7]=['floral/rearCover.jpg', 'paintly/index.html', '', '']
ultishow[8]=['child/c_02.jpg', 'http://www.jacquimorgan.com', '', '']
ultishow[9]=['life/101_life.jpg', 'life/index.html', '', '']

//configure below 3 variables to set the dimension/background color of slideshow
var slidewidth="500px" //set to width of LARGEST image in slideshow
var slideheight="500px" //set to height of LARGEST iamge in slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="yes" //randomize order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'
//configure below variable to determine delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultishow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultishow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultishowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultishowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultishow)
else
ultishowCopy=ultishow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'

if(ultishowCopy[currentslide][3]){
ultcontainer+='<div>'+ultishowCopy[currentslide][3]+'</div>'
}/*see July08 forum http://www.codingforums.com/showthread.php?t=143543 */

if (ultishowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultishowCopy[currentslide][1]+'" target="'+ultishowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultishowCopy[currentslide][0]+'" border="0">'
if (ultishowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'

if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultishow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

</script>

</div><!--close id SPACE-->

In this line you have a dot instead of a comma

ultishow[1]=['hist/04_AmericanArtist.jpg', 'hist/index.html', ''. 'American Artist magazine cover']

My eyesight is not that great. But your assistance is GREAT! Thank you so much Mr.J "the silent one"; you are wonderful. It works now (I'll just be using index.html at http://jacquimorgan.tripod.com) that the typo is fixed.

Your code for adding captions was a huge success at http://jacquimorgan.tripod.com. Thank you again. But now the client wants a PAUSE onMouseOver.

Tried following the code used at http://lineforhire.tripod.com/slideshow/ddScroll.htm -- in which
var slidespeed=3; var copyspeed=slidespeed; ...
onMouseOver="copyspeed=0" onMouseOut="copyspeed=slidespeed"

But I could not figure out where/how to apply that logic to the Flexible script (in which var slidedelay=3000; etc).

Any help would be greatly appreciated.

Give the following a try using the previous script

Add as a global

timer=null

change this line

ultcontainer+='<img src="'+ultishowCopy[currentslide][0]+'" border="0">'

to

ultcontainer+='<img src="'+ultishowCopy[currentslide][0]+'" border="0" onmouseover="clearTimeout(timer)" onmouseout="rotateimages()">'

and change this line

setTimeout("rotateimages()",slidedelay)

to

timer=setTimeout("rotateimages()",slidedelay)

Thanks Mr.J. I'll give your code a try at http://jacquimorgan.tripod.com and http://www.auntnini.com/sketch/increment.html .

Your http://www.huntingground.net looks interesting. I need all the help can get.

This did not work at http://www.auntnini.com/sketch/increment.html . I'll have to double check it, but it seems to be the alterations suggested.

Back to the drawing board.

var ultishow=new Array()

//ultishow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target", "description/title"]

ultishow[0]=['carolineJune.jpg', '', '', 'Caroline June']
ultishow[1]=['carolineWhite.jpg', 'index.htm', '', 'Caroline White Dress']
ultishow[2]=['elnaBlueDress.jpg', 'newRolls.html', '', 'Elana Blue Dress']
ultishow[3]=['elanablackDress.jpg', '', '', 'Elana Black Dress']

//configure below 3 variables to set dimension/background color of slideshow

var slidewidth="400px" //set to width of LARGEST image in your slideshow
var slideheight="600px" //set to height of LARGEST iamge in your slideshow
var slidecycles="6" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="yes" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var timer = null
var slidedelay=3000

//Do not edit past this line

var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes") {
for (i=0;i<ultishow.length;i++) {
var cacheimage=new Image()
cacheimage.src=ultishow[i][0]
}
}

var currentslide=0

function randomize(targetarray) {
ultishowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length) {
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!") {
ultishowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}
if (randomorder=="yes")
randomize(ultishow)
else
ultishowCopy=ultishow

function rotateimages() {
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'

if (ultishowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultishowCopy[currentslide][1]+'" target="'+ultishowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultishowCopy[currentslide][0]+'" border="0" onmouseover="clearTimeOut(timer)" onmouseout="rotateimage()">'//PAUSE
if (ultishowCopy[currentslide][1]!="")
ultcontainer+='</a>'


if(ultishowCopy[currentslide][3]){
ultcontainer+='<h3>'+ultishowCopy[currentslide][3]+'</h3>'
}/*see July08 forum http://www.codingforums.com/showthread.php?t=143543 */

ultcontainer+='</center>'

if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultishow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
timer=setTimeout("rotateimages()",slidedelay)//timer PAUSE
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider() {
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

Neither did this work at http://auntnini.com/sketch/flexiblePause.html

var copyspeed = slidedelay
var slidedelay=3000
…
if (ultishowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultishowCopy[currentslide][1]+'" target="'+ultishowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultishowCopy[currentslide][0]+'" border="0"
onmouseover="copyspeed=0" onmouseout="copyspeed=slidedelay">'//PAUSE
if (ultishowCopy[currentslide][1]!="")
ultcontainer+='</a>'



Still LOVE that Flexible slide show script.

When you added the line


onmouseover="clearTimeOut(timer)" onmouseout="rotateimage()">

you've capitalised the o in clearTimeout and missed the s of rotateimages()

should be

onmouseover="clearTimeout(timer)" onmouseout="rotateimages()">

Correct these 2 typos and give it another try

YEAH! When typos fixed as you pointed out, Mr.J, the onMouseOver PAUSE works at http://jacquimorgan.tripod.com/index.htm and http://www.auntnini.com/sketch/increment.html

Forgive my typos. Wondering why setTimeout()/clearTimeout() was used instead of setInterval() (as in DD conveyor script) had distracted me.

Thanks heaps, Mr.J.

OOPS! One of the great features of the Flexible slideshow script is its limited cycles

var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000


Now it just keeps repeating forever at http://jacquimorgan.tripod.com./index.htm