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 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slide show transitions effect

    Hi,
    I have this code which is ok for a slide show, but is there a way to modify it so that the transitions are gradual between photos? Or maybe a fade in/out effect? I *think* this code is free to use, but I'm not sure. I got it from: http://hotwired.lycos.com/webmonkey/...tw=programming , but I replaced the photos with my own.
    Here is the code:


    <script language="JavaScript">
    <!--
    var interval = 2000;
    var random_display = 0;
    var image_dir = ""
    var ImageNum = 0;
    imageArray = new Array();
    imageArray[ImageNum++] = new imageItem(image_dir + "john_1.jpg");
    imageArray[ImageNum++] = new imageItem(image_dir + "john_2.jpg");
    imageArray[ImageNum++] = new imageItem(image_dir + "john_5.jpg");

    var number_of_image = imageArray.length;
    function imageItem(image_location) {
    this.image_item = new Image();
    this.image_item.src = image_location;
    }
    function get_ImageItemLocation(imageObj) {
    return(imageObj.image_item.src)
    }
    function randNum(x, y) {
    var range = y - x + 1;
    return Math.floor(Math.random() * range) + x;
    }
    function getNextImage() {
    if (random_display) {
    ImageNum = randNum(0, number_of_image-1);
    }
    else {
    ImageNum = (ImageNum+1) % number_of_image;
    }
    var new_image = get_ImageItemLocation(imageArray[ImageNum]);
    return(new_image);
    }




    function rotateImage(place) {
    var new_image = getNextImage();
    document[place].src = new_image;
    var recur_call = "rotateImage('"+place+"')";

    timerID = setTimeout(recur_call, interval);
    }




    // -->
    </script>
    Thank you.

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Location
    Manchester, UK
    Posts
    533
    Thanks
    4
    Thanked 1 Time in 1 Post
    I'm not sure where to put the code - I'll have a look once I get back from work..... but you could use something like

    Code:
    strength = 100;
    fade_frames = 6;
    diff = strength / fade_frames;
    
    
    for (x=0;x<fade_frames;x++)
    {
       document[place].filter = "alpha(opacity=strength)";
       strength = strength - diff;
    }
    I think something like that'd work... basically you set the number of frames to fade by and work out the opacity...

    you'd also need to do it the other way around to fade IN the other image....
    I'll have a go at the code shortly...

  • #3
    New Coder
    Join Date
    Apr 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great...I look forward to that,
    Thanks

  • #4
    New Coder
    Join Date
    Apr 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oh...and ..do you know how to iknclude captions with each slide? It's so hard to find a good cross browser slide show....phew!
    Thank you.

  • #5
    New Coder
    Join Date
    Jun 2004
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fading Image Slide show.

    Below is a script form Dynamic Drive that works rather well in NS and IE the image swap will have a fade transition. In Opera or other browsers, the images are just swapped.

    <script language="JavaScript1.2">
    //Fade-in image slideshow- By Dynamic Drive
    //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
    //This credit MUST stay intact for use

    var slideshow_width='187px' //SET IMAGE WIDTH
    var slideshow_height='134px' //SET IMAGE HEIGHT
    var pause=4000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]="images/bannerimg/Image-1.jpg"
    fadeimages[1]="images/bannerimg/Image-2.jpg"
    fadeimages[2]="images/bannerimg/Image-3.jpg"

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

    var preloadedimages=new Array()
    for (p=0;p<fadeimages.length;p++){
    preloadedimages[p]=new Image()
    preloadedimages[p].src=fadeimages[p]
    }

    var ie4=document.all
    var dom=document.getElementById

    if (ie4||dom)
    document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:a lpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:a lpha(opacity=10);-moz-opacity:10"></div></div>')
    else
    document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

    var curpos=10
    var degree=10
    var curcanvas="canvas0"
    var curimageindex=0
    var nextimageindex=1


    function fadepic(){
    if (curpos<100){
    curpos+=10
    if (tempobj.filters)
    tempobj.filters.alpha.opacity=curpos
    else if (tempobj.style.MozOpacity)
    tempobj.style.MozOpacity=curpos/100
    }
    else{
    clearInterval(dropslide)
    nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
    tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
    nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
    setTimeout("rotateimage()",pause)
    }
    }

    function rotateimage(){
    if (ie4||dom){
    resetit(curcanvas)
    var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.style.zIndex++
    var temp='setInterval("fadepic()",50)'
    dropslide=eval(temp)
    curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
    }
    else
    document.images.defaultslide.src=fadeimages[curimageindex]
    curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
    }

    function resetit(what){
    curpos=10
    var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
    if (crossobj.filters)
    crossobj.filters.alpha.opacity=curpos
    else if (crossobj.style.MozOpacity)
    crossobj.style.MozOpacity=curpos/100
    }

    function startit(){
    var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
    rotateimage()
    }

    if (ie4||dom)
    window.onload=startit
    else
    setInterval("rotateimage()",pause)

    </script>

    Demo of Slide Show

    This code will rotate layers on clisk and fade transition in NS and IE

    function SetLayerDislplay(){
    // Check to see if the the browser is IE 0r Netscape 6+ i.e Gecko
    var isFilter = (((document.all) || (navigator.userAgent.indexOf('Gecko')!=-1))&&(navigator.userAgent.indexOf('Opera')==-1));
    if(!isFilter){
    if(navigator.userAgent.indexOf('Opera')!=-1){
    for(i=0;i<aLayers.length;i++){
    oLayer=document.all(aLayers[i])
    oLayer.style.display='none';
    }
    document.all(aLayers[0]).style.display='';
    }
    }else{
    RotateLayers(0);
    }
    }
    var isDom = document.getElementById
    var isIE = document.all
    var isNS6 = (navigator.userAgent.indexOf('Gecko')!=-1)
    var isNS4 = document.layers
    var cOpacity=10
    var cFadeOpacity=0
    var nTimerDelay = 20
    var oDisplayTimer
    var oFadeTimer
    var nDisplayedLayer=0
    var nNewDisplayedLayer
    function RotateLayers(Idx){
    if (nDisplayedLayer!=Idx){
    if (isDom&&navigator.userAgent.indexOf('Opera')==-1){
    document.getElementById(aLayers[Idx]).style.display='';
    FadeIn(Idx);
    }else{
    for(i=0;i<aLayers.length;i++){
    if(navigator.userAgent.indexOf('Opera')!=-1){
    oTarget=document.all(aLayers[i])
    oTarget.style.display=(Idx==i?'':'none');
    nDisplayedLayer=Idx
    }
    }
    }
    }
    }
    function FadeIn(Idx){
    oTarget=document.getElementById(aLayers[Idx])
    oTarget1=document.getElementById(aLayers[nDisplayedLayer])
    cOpacity+=10
    cFadeOpacity-=10
    if (cOpacity<=100){
    if (oTarget.filters){
    oTarget.filters.alpha.opacity=Number(cOpacity);
    oTarget1.filters.alpha.opacity=Number(cFadeOpacity);
    oTarget.style.zIndex=4
    oTarget1.style.zIndex=1
    oDisplayTimer=setTimeout('FadeIn('+Idx+')',nTimerDelay);
    }else if (oTarget.style.MozOpacity){
    oTarget.style.MozOpacity=cOpacity/100
    oTarget1.style.MozOpacity=cFadeOpacity/100
    oDisplayTimer=setTimeout('FadeIn('+Idx+')',nTimerDelay);
    }
    }else{
    clearInterval(oDisplayTimer)
    cOpacity=10
    cFadeOpacity=90
    nDisplayedLayer=Idx
    }
    }


    Place the onClick="RotateLayers(1);" call in the tag of the object you wish to use to scroll thru the layers



    MindCrafter
    www.mindcrafter.com


  •  

    Posting Permissions

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