...

View Full Version : Flexible image slideshow script help



waxdoc
07-06-2008, 01:02 AM
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.

Mr J
07-06-2008, 10:31 AM
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']

waxdoc
07-08-2008, 10:33 PM
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-->

Mr J
07-09-2008, 11:05 PM
In this line you have a dot instead of a comma

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

waxdoc
07-10-2008, 01:25 AM
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.

waxdoc
08-29-2008, 01:41 AM
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.

Mr J
08-29-2008, 10:50 PM
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)

waxdoc
08-29-2008, 11:37 PM
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.

waxdoc
08-30-2008, 01:07 AM
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

waxdoc
08-30-2008, 03:02 AM
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.

Mr J
08-30-2008, 01:21 PM
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

waxdoc
08-31-2008, 10:41 PM
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.

waxdoc
09-03-2008, 02:53 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum