Results 1 to 8 of 8

Thread: Ultimate Fade-In Slide Show "HORIZONTAL."

  1. #1
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-In Slide Show "HORIZONTAL."

    1) Script Title: Ultimate fade-slide show

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

    3) Describe problem:

    Script works great. My question:

    1. I want to have 5 slide shows with 3 alternating images for each (total images of 15) in a horizontal format. I'm using .css with .divs (not tables). When I add each one (in one .div) they stack vertically with the .div set to .px width large enough to allow the 5-shows to run next to each other.

    2. Another script "Mutiframe Slide Show" has how to specify vertical "<br>" or "" for horizontal See below. Can't find something similar in "Ultimate Fade In" script.

    //Specify code to insert between each slide (ie: "<br>" to insert a line break and create a vertical layout)
    //"" for none (or horizontal):
    var slideseparater="<br>"[/color]

    Thanks!
    Greg

  2. #2
    Join Date
    Jan 2007
    Posts
    82
    Thanks
    30
    Thanked 18 Times in 17 Posts

    Default

    Little unsure of what you are saying in the end there, but if I understand you correctly you want this:

    ___________________________
    SS1 SS2 SS3 SS4 SS5
    ___________________________

    But the way you coded the page, you get this:

    ____
    SS1
    SS2
    SS3
    SS4
    SS5
    ____

    If that's the case then the error is either in the way you call the multiple scripts, or in the format of the division you placed them in. I would create 5 separate divisions on my page with the attribute "float:left;", and set to a few pixels wider, and taller than my largest image.

    Then I would place each instance of a slideshow in a separate div with the same attributes listed above.

    it could all be done in one division however, just try adding "float:left;" in the .css and see if that corrects the problem.

  3. The Following 2 Users Say Thank You to tonyking For This Useful Post:

    damara (04-22-2008),gpechauer (04-17-2008)

  4. #3
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hi Tony,

    Thanks so much for the reply. I'm probably not using the script correctly. Do I put the "script" in each .div? Do I have to change the name for each array and if I do, what would be the code for each slide show? Each show is the same size (height and width).

    The last part I included is a different script that allows one to tell it to go horizontally or vertical. If I add "<br>" it creates a break and each one drops down on the next line. If I don't use the the "br" and just leave it blank between the quotes, it lines up each show to the right. This is just a different script that does the same, but no fade in the slide shows.

    Thanks!
    Greg

  5. #4
    Join Date
    Jan 2007
    Posts
    82
    Thanks
    30
    Thanked 18 Times in 17 Posts

    Default

    You configure each slideshow in the head section of your webpage within this script:
    Code:
    <script type="text/javascript">
          
    /***********************************************
    * Ultimate Fade-In Slideshow (v1.51):  Dynamic Drive (http://www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
     
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
    fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
    fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
     
    var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
    fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
    fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
     
    var fadebgcolor="white"
    
    ////NO need to edit beyond here/////////////
    In the above code theres 2 slideshows, fadeimages, and fadeimages2. You can add as many as you want following the same format, and each one is configured seprately.


    This is the code you would put in each div:
    Code:
    <script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
     </script>
    Now in the next division you would have to change it to:
    Code:
    <script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow2(fadeimages, 140, 225, 0, 3000, 1, "R")
     </script>
    Notice that fadeshow, has changed to fadeshow2. Whatever you configure in the head portion of this script, you may call in the body with this same script, and chang the number behind fadeshow accordingly to match.

    Hope this helps you, do you have a link to the page you're applying this script to? I could be a lot more help if you did.

  6. The Following User Says Thank You to tonyking For This Useful Post:

    damara (04-22-2008)

  7. #5
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Tony can you check this out?

    I lined up the five pics horizontally using the same code for each (see below). Of course, they are all of the same three pics. I tried to changing the second pic series, but all I get is an empty area. I put a blue background in a surround .div. Each "slide show" is in it's own div.


    Thanks!

    Greg


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="The history of Vassarette, over 100 years of fashionable, trend right intimates for the lingerie enthusiast." />
    <meta name="keywords" content="lingerie, bra, bras, cleavage, intimate, intimates, sexy, push-up, seductive, curves, feminine, edgy, crazy in love, luxurious, gorgeous, european inspired, sexier" />
    <title>Vassarette Where To Buy</title>
    <link href="css/vass_global.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 6]>
    <link href="css/vass_global_ie5.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <script type="text/javascript">


    var fadeImages = new Array();


    //SET IMAGE PATHS. Extend or contract array as needed
    fadeImages[0]=["images/thumbs_01.png", "http://www.fruit.com", "_blank"]; //plain image syntax
    fadeImages[1]=["images/thumbs_02.png", "http://www.fruit.com", "_blank"]; //image with link syntax
    fadeImages[2]=["images/thumbs_03.png", "http://www.javascriptkit.com", "_new"]; //image with link and target syntax


    var fadeImages2 = new Array();


    //SET IMAGE PATHS. Extend or contract array as needed
    fadeImages[3]=["images/thumbs_04.png", "http://www.fruit.com", "_blank"]; //plain image syntax
    fadeImages[4]=["images/thumbs_05.png", "http://www.fruit.com", "_blank"]; //image with link syntax
    fadeImages[5]=["images/thumbs_06.png", "http://www.javascriptkit.com", "_new"]; //image with link and target syntax
    var fadebgcolor="422918"


    ////NO need to edit beyond here/////////////

    var fadearray=new Array() //array to cache fadeshow instances
    var fadeclear=new Array() //array to cache corresponding clearinterval pointers

    var dom=(document.getElementById) //modern dom browsers
    var iebrowser=document.all

    function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
    this.pausecheck=pause
    this.mouseovercheck=0
    this.delay=delay
    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"
    if (typeof displayorder!="undefined")
    theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter)
    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][0]
    }

    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;filterrogidXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filterrogidXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.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()", this.delay)
    }
    }

    function fadepic(obj){
    if (obj.degree<100){
    obj.degree+=10
    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{
    clearInterval(fadeclear[obj.slideshowid])
    obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
    obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
    obj.populateslide(obj.tempobj, obj.nextimageindex)
    obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
    setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
    }
    }

    fadeshow.prototype.populateslide=function(picobj, picindex){
    var slideHTML=""
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
    slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML+='</a>'
    picobj.innerHTML=slideHTML
    }


    fadeshow.prototype.rotateimage=function(){
    if (this.pausecheck==1) //if pause onMouseover enabled, cache object
    var cacheobj=this
    if (this.mouseovercheck==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
    }

    fadeshow.prototype.resetit=function(){
    this.degree=10
    var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    if (crossobj.filters&&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
    }


    fadeshow.prototype.startit=function(){
    var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    this.populateslide(crossobj, this.curimageindex)
    if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
    var cacheobj=this
    var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
    crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
    crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
    }
    this.rotateimage()
    }

    </script>
    </head>
    <body>


    <div class="photo" id="photoWrap">
    <div class="photo">
    <script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(fadeImages, 150, 110, 0, 5000, 1, "R")

    </script>
    </div>
    <div class="photo"><script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(fadeImages2, 150, 110, 0, 3000, 1, "R")
    </script>
    </div>


    <div class="photo"><script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(fadeImages, 150, 110, 0, 6000, 1, "R")

    </script>
    </div>

    <div class="photo"><script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(fadeImages, 150, 110, 0, 8000, 1, "R")

    </script>
    </div>

    <div class="photo"><script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(fadeImages, 150, 110, 0, 1000, 1, "R")

    </script>
    </div>



    </div>
    </body>
    </html>

  8. #6
    Join Date
    Jan 2007
    Posts
    82
    Thanks
    30
    Thanked 18 Times in 17 Posts

    Default

    Just a heads up, any time you reference code in this forum, please use the code tags. You sent me a link via email, but it was not to the above page, so I am a little confused here, but here's what I see above:

    You have 2 seperate slideshows in the head of your document, but the second one is not configured correctly. Any time you want a new slideshow, you must start back at zero with the first image. Your second instance fadeimages2, does not do so. If you changed the following:
    Code:
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeImages[3]=["images/thumbs_04.png", "http://www.fruit.com", "_blank"]; //plain image syntax
    fadeImages[4]=["images/thumbs_05.png", "http://www.fruit.com", "_blank"]; //image with link syntax
    fadeImages[5]=["images/thumbs_06.png", "http://www.javascriptkit.com", "_new"]; //image with link and target syntax
    To this:
    Code:
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeImages[0]=["images/thumbs_04.png", "http://www.fruit.com", "_blank"]; //plain image syntax
    fadeImages[1]=["images/thumbs_05.png", "http://www.fruit.com", "_blank"]; //image with link syntax
    fadeImages[2]=["images/thumbs_06.png", "http://www.javascriptkit.com", "_new"]; //image with link and target syntax
    You would then have 2 correctly configured slideshows, with 3 images each. You could then call to them in your html body with the following script:
    Code:
    <script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
     </script>
    Which you have done, but you called the first one 5 times. I'm unsure if you wanted to do this, but in the future you found change

    fadeshow(fadeimages,...... to fadeshow2(fadeimages,.... to match the configured slideshow you want to appear.

  9. The Following User Says Thank You to tonyking For This Useful Post:

    damara (04-22-2008)

  10. #7
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Solved,thanks for your help!
    Greg

  11. #8
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    in the future, when posting computer code please use [code][/code] tags

Bookmarks

Posting Permissions

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