Results 1 to 4 of 4

Thread: MultiFrame Image Slideshow script

  1. #1
    Join Date
    Jan 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default MultiFrame Image Slideshow script

    I was wondering if it is possible to modify this MultiFrame Image Slideshow script http://www.dynamicdrive.com/dynamici...frameslide.htm so that the different images will appear on different parts of the page, rather than just in a horizontal or vertical row. I would like to create a splash page that is made up of several images coming in to make up the entire background.

    Thanks in advance for any help!

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Hmmm I don't think this is the best script to accomplish this, especially since one of your creteria is that the images eventually make up the entire background. You'll need quite a few new calculations to do this. Unfortunately I'm not aware of any script on DD presently that can be easily modified to do what you're looking for.

  3. #3
    Join Date
    Jan 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for saving me a lot of headbanging against the wall! I'll explore some other options...

  4. #4
    Join Date
    Dec 2007
    Location
    Cape Town, South Africa
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello, I need some help too with this Multiframe slideshow script. I have applied it to my webpage but for some reason i want the slides to appear HORIZONTALLY and not vertically.

    Can someone assist how I can get the slides to appear horizontally. At the moment I am revealing 4 slides at a time with the fade effect but its vertically at moment.

    Here is my code:
    <script type="text/javascript">

    /***********************************************
    * MultiFrame Image Slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    var seqslides=new Array()
    //Set Path to Image plus optional URL ("" for no URL):
    seqslides[0]=["media/logos/acer.gif",""]
    seqslides[1]=["media/logos/apple.gif",""]
    seqslides[2]=["media/logos/bmw.gif",""]
    seqslides[3]=["media/logos/bp.gif",""]
    seqslides[4]=["media/logos/bwin.gif",""]
    seqslides[5]=["media/logos/ca.gif",""]
    seqslides[6]=["media/logos/chevron.gif",""]
    seqslides[7]=["media/logos/dell.gif",""]
    seqslides[8]=["media/logos/EY.gif",""]
    seqslides[9]=["media/logos/ford.gif",""]
    seqslides[10]=["media/logos/hp.gif",""]
    seqslides[11]=["media/logos/HSBC.gif",""]
    seqslides[12]=["media/logos/intel.gif",""]
    seqslides[13]=["media/logos/kpmg.gif",""]
    seqslides[14]=["media/logos/LG.gif",""]
    seqslides[15]=["media/logos/logitech.gif",""]
    seqslides[16]=["media/logos/MASERATOI.gif",""]
    seqslides[17]=["media/logos/mecer.gif",""]
    seqslides[18]=["media/logos/ml.gif",""]
    seqslides[19]=["media/logos/nintendo.gif",""]
    seqslides[20]=["media/logos/NYTimes.gif",""]
    seqslides[21]=["media/logos/RENTOKILL.gif",""]
    seqslides[22]=["media/logos/SAHARA.gif",""]
    seqslides[23]=["media/logos/SHELL.gif",""]
    seqslides[24]=["media/logos/SONY.gif",""]
    seqslides[25]=["media/logos/telkom.gif",""]
    seqslides[26]=["media/logos/TESCO.gif",""]
    seqslides[27]=["media/logos/TOYOTA.gif",""]
    seqslides[28]=["media/logos/vodacom.gif",""]
    seqslides[29]=["media/logos/vw.gif",""]

    //Set pause between each image display (2000=2 second):
    var slidedelay=2000

    //Set how many images to show at once (must be less than total # of images above):
    var slidestoreveal=4

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

    //Set optional link target to be added to all images with a link:
    var optlinktarget="secwindow"

    //Set image border width:
    var imgborderwidth=0

    //Set opacity value of each image when it's "dimmed", and when it's not, respectively (1=100% opaque/normal).
    //Change 0.2 to 0 to completely hide image when it's dimmed:
    var opacityvalues=[0.2,1]

    ///No need to edit beyond here///////////

    function processimgcode(theimg){
    var imghtml=""
    if (theimg[1]!="")
    imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
    imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'">'
    if (theimg[1]!="")
    imghtml+='</a>'
    return imghtml
    }

    var curslide=30 //var to track current slide (total: slidestoreveal)
    var curimgindex=0 //var to track current image (total: seqslides.length)
    var isfirstcycle=1 //boolean to indicate whether this is the first cycle

    if (document.getElementById){
    for (i=0;i<slidestoreveal;i++)
    document.write('<span id="seqslide'+i+'" class="seqslidestyle">'+processimgcode(seqslides[i])+'</span>'+slideseparater)
    curimgindex=slidestoreveal
    illuminateslide(0,opacityvalues[1])
    }

    function illuminateslide(slideindex, amt){
    var slideobj=document.getElementById("seqslide"+slideindex).getElementsByTagName("IMG")[0]
    if (slideobj.filters)
    slideobj.filters.alpha.opacity=amt*100
    else if (slideobj.style.MozOpacity)
    slideobj.style.MozOpacity=amt
    }

    function displayit(){
    if (curslide<slidestoreveal){
    if (!isfirstcycle)
    changeimage(curslide)
    illuminateslide(curslide, opacityvalues[1])
    curslide++
    }
    else{
    isfirstcycle=0
    for (i=0;i<slidestoreveal;i++)
    illuminateslide(i, opacityvalues[0])
    changeimage(0)
    illuminateslide(0, opacityvalues[1])
    curslide=1
    }
    }

    function changeimage(slideindex){
    document.getElementById("seqslide"+slideindex).innerHTML=processimgcode(seqslides[curimgindex])
    curimgindex++
    if (curimgindex>=seqslides.length)
    curimgindex=0
    }

    if (document.getElementById)
    setInterval("displayit()",slidedelay)


    </script>

    Assistance really appreciated.

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
  •