Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    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.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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']
    Last edited by Mr J; 07-06-2008 at 09:34 AM.
    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.

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    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 Flexible image slideshow script help */

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

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    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.

  • #6
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    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.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    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.

  • #9
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    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

  • #10
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    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.

  • #11
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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.

  • #12
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    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.

  • #13
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •