Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-06-2008, 12:02 AM   PM User | #1
waxdoc
Regular Coder

 
Join Date: Jul 2008
Posts: 155
Thanks: 9
Thanked 13 Times in 13 Posts
waxdoc is an unknown quantity at this point
Flexible image slideshow script help

Love your FLEXIBLE IMAGE SLIDESHOW http://javascriptkit.com/script/scri...bleslide.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.
waxdoc is offline   Reply With Quote
Old 07-06-2008, 09:31 AM   PM User | #2
Mr J
Senior Coder

 
Join Date: Aug 2002
Location: UK
Posts: 2,789
Thanks: 2
Thanked 14 Times in 14 Posts
Mr J is on a distinguished road
For that script you could add the following to the rotateimages function


Code:
if(ultishowCopy[currentslide][3]){
ultcontainer+='<div>'+ultishowCopy[currentslide][3]+'</div>'
}
// here denotes where you might want to place it


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


Code:
//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']
__________________
The silent one.

The most dangerous thing in the world is an idea.
The most dangerous person in the world is the one with an idea.

Last edited by Mr J; 07-06-2008 at 09:34 AM..
Mr J is offline   Reply With Quote
Old 07-08-2008, 09:33 PM   PM User | #3
waxdoc
Regular Coder

 
Join Date: Jul 2008
Posts: 155
Thanks: 9
Thanked 13 Times in 13 Posts
waxdoc is an unknown quantity at this point
FLEXIBLE slideshow with TITLE

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-->
waxdoc is offline   Reply With Quote
Old 07-09-2008, 10:05 PM   PM User | #4
Mr J
Senior Coder

 
Join Date: Aug 2002
Location: UK
Posts: 2,789
Thanks: 2
Thanked 14 Times in 14 Posts
Mr J is on a distinguished road
In this line you have a dot instead of a comma

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

The most dangerous thing in the world is an idea.
The most dangerous person in the world is the one with an idea.
Mr J is offline   Reply With Quote
Old 07-10-2008, 12:25 AM   PM User | #5
waxdoc
Regular Coder

 
Join Date: Jul 2008
Posts: 155
Thanks: 9
Thanked 13 Times in 13 Posts
waxdoc is an unknown quantity at this point
oops!

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 is offline   Reply With Quote
Old 08-29-2008, 12:41 AM   PM User | #6
waxdoc
Regular Coder

 
Join Date: Jul 2008
Posts: 155
Thanks: 9
Thanked 13 Times in 13 Posts
waxdoc is an unknown quantity at this point
onMouseOver PAUSE

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.

Last edited by waxdoc; 08-29-2008 at 12:44 AM..
waxdoc is offline   Reply With Quote
Old 08-29-2008, 09:50 PM   PM User | #7
Mr J
Senior Coder

 
Join Date: Aug 2002
Location: UK
Posts: 2,789
Thanks: 2
Thanked 14 Times in 14 Posts
Mr J is on a distinguished road
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)
__________________
The silent one.

The most dangerous thing in the world is an idea.
The most dangerous person in the world is the one with an idea.
Mr J is offline   Reply With Quote
Old 08-29-2008, 10:37 PM   PM User | #8
waxdoc
Regular Coder

 
Join Date: Jul 2008
Posts: 155
Thanks: 9
Thanked 13 Times in 13 Posts
waxdoc is an unknown quantity at this point
thanks

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 is offline   Reply With Quote
Old 08-30-2008, 12:07 AM   PM User | #9
waxdoc
Regular Coder

 
Join Date: Jul 2008
Posts: 155
Thanks: 9
Thanked 13 Times in 13 Posts
waxdoc is an unknown quantity at this point
PAUSE did not work

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.

Code:
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 is offline   Reply With Quote
Old 08-30-2008, 02:02 AM   PM User | #10
waxdoc
Regular Coder

 
Join Date: Jul 2008
Posts: 155
Thanks: 9
Thanked 13 Times in 13 Posts
waxdoc is an unknown quantity at this point
also did not work

Neither did this work at http://auntnini.com/sketch/flexiblePause.html
Code:
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.
waxdoc is offline   Reply With Quote
Old 08-30-2008, 12:21 PM   PM User | #11
Mr J
Senior Coder

 
Join Date: Aug 2002
Location: UK
Posts: 2,789
Thanks: 2
Thanked 14 Times in 14 Posts
Mr J is on a distinguished road
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
__________________
The silent one.

The most dangerous thing in the world is an idea.
The most dangerous person in the world is the one with an idea.
Mr J is offline   Reply With Quote
Old 08-31-2008, 09:41 PM   PM User | #12
waxdoc
Regular Coder

 
Join Date: Jul 2008
Posts: 155
Thanks: 9
Thanked 13 Times in 13 Posts
waxdoc is an unknown quantity at this point
PAUSE works

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 is offline   Reply With Quote
Old 09-03-2008, 01:53 AM   PM User | #13
waxdoc
Regular Coder

 
Join Date: Jul 2008
Posts: 155
Thanks: 9
Thanked 13 Times in 13 Posts
waxdoc is an unknown quantity at this point
lost cycle

OOPS! One of the great features of the Flexible slideshow script is its limited cycles
Code:
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
waxdoc is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:48 AM.


Advertisement
Log in to turn off these ads.