fondu javascript

Bonjour,
je ne sais pas trop où poser ma question alors je la poste ici.


voila mon problème, j'ai récupérer un code en javascript pour réaliser une bannière qui fait défiler des images pour poster en haut d'un site. J'aimerais y ajouter un effet de transparence dans la transition de deux images mais je ne comprend pas très bien le code qui est beaucoup trop complexe pour moi, je vous le poste :

//Featured Content Glider: By http://www.dynamicdrive.com

//Created: Dec 22nd, 07'

//Updated (Jan 29th, 08): Added four possible slide directions: "updown", "downup", "leftright", or "rightleft"

//Updated (Feb 1st, 08): Changed glide behavior to reverse direction when previous button is clicked

//Updated (Feb 12th, 08): Added ability to retrieve gliding contents from an external file using Ajax ("remotecontent" variable added to configuration)






var featuredcontentglider={

    csszindex: 100,

    ajaxloadingmsg: '<b>Fetching Content. Please wait...</b>',

    glide:function(config, showpage, isprev){

        var selected=parseInt(showpage)

        if (selected>=config.$contentdivs.length){ //if no content exists at this index position

            alert("No content exists at page "+(selected+1)+"! Loading 1st page instead.")

            selected=0

        }


        var $target=config.$contentdivs.eq(selected)

        //Test for toggler not being initialized yet, or user clicks on the currently selected page):

        if (config.$togglerdiv.attr('lastselected')==null || parseInt(config.$togglerdiv.attr('lastselected'))!=selected){

            var $selectedlink=config.$toc.eq(selected)

            config.$next.attr('loadpage', (selected<config.$contentdivs.length-1)? selected+1+'pg' : 0+'pg')

            config.$prev.attr('loadpage', (selected==0)? config.$contentdivs.length-1+'pg' : selected-1+'pg')

            var startpoint=(isprev=="previous")? -config.startpoint : config.startpoint

            $target.css(config.leftortop, startpoint).css("zIndex", this.csszindex++) //hide content so it's just out of view before animating it

            var endpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view

            $target.animate(endpoint, config.speed)

            config.$toc.removeClass('selected')

            $selectedlink.addClass('selected')

            config.$togglerdiv.attr('lastselected', selected+'pg')

        }

    },



    getremotecontent:function(config){

        config.$glider.html(this.ajaxloadingmsg)

        $.ajax({

            url: config.remotecontent,

            error:function(ajaxrequest){

                config.$glider.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)

            },
           


            success:function(content){

                config.$glider.html(content)

                featuredcontentglider.setuptoggler(config)

            }

        })

    },



    aligncontents:function(config){

        config.$contentdivs=$("#"+config.gliderid+" ."+config.contentclass)

        config.$contentdivs.css(config.leftortop, config.startpoint).css({height: config.$glider.height(), visibility: 'visible'}) //position content divs so they're out of view:

    },



    setuptoggler:function(config){

        this.aligncontents(config)

        config.$togglerdiv.hide()

        config.$toc.each(function(index){

                $(this).attr('pagenumber', index+'pg')

                if (index > (config.$contentdivs.length-1))

                    $(this).css({display: 'none'}) //hide redundant "toc" links

        })

        var $nextandprev=$("#"+config.togglerid+" .next, #"+config.togglerid+" .prev")

        $nextandprev.click(function(event){ //Assign click behavior to 'next' and 'prev' links

            featuredcontentglider.glide(config, this.getAttribute('loadpage'), this.getAttribute('buttontype'))

            event.preventDefault() //cancel default link action

        })

        config.$toc.click(function(event){ //Assign click behavior to 'toc' links

            featuredcontentglider.glide(config, this.getAttribute('pagenumber'))

            event.preventDefault()

        })

        config.$togglerdiv.fadeIn(1000, function(){

            featuredcontentglider.glide(config, config.selected)

            if (config.autorotate==true){ //auto rotate contents?

                config.stepcount=0 //set steps taken

                config.totalsteps=config.$contentdivs.length*config.autorotateconfig[1] //Total steps limit: num of contents x num of user specified cycles)

                featuredcontentglider.autorotate(config)

            }

        })

        config.$togglerdiv.click(function(){

            featuredcontentglider.cancelautorotate(config.togglerid)

        })

    },



    autorotate:function(config){

        var rotatespeed=config.speed+config.autorotateconfig[0]

        window[config.togglerid+"timer"]=setInterval(function(){

            if (config.totalsteps>0 && config.stepcount>=config.totalsteps){

                clearInterval(window[config.togglerid+"timer"])

            }

            else{

                config.$next.click()

                config.stepcount++

            }

        }, rotatespeed)

    },


    cancelautorotate:function(togglerid){

        if (window[togglerid+"timer"])

            clearInterval(window[togglerid+"timer"])

    },
   
   




    getCookie:function(Name){

        var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair

        if (document.cookie.match(re)) //if cookie found

            return document.cookie.match(re)[0].split("=")[1] //return its value

        return null

    },



    setCookie:function(name, value){

        document.cookie = name+"="+value

    },



    init:function(config){

        $(document).ready(function(){

            config.$glider=$("#"+config.gliderid)

            config.$togglerdiv=$("#"+config.togglerid)

            config.$toc=config.$togglerdiv.find('.toc')

            config.$next=config.$togglerdiv.find('.next')

            config.$prev=config.$togglerdiv.find('.prev')

            config.$prev.attr('buttontype', 'previous')

            var selected=(config.persiststate)? featuredcontentglider.getCookie(config.gliderid) : config.selected

            config.selected=(isNaN(parseInt(selected))) ? config.selected : selected //test for cookie value containing null (1st page load) or "undefined" string   

            config.leftortop=(/up/i.test(config.direction))? "top" : "left" //set which CSS property to manipulate based on "direction"

            config.heightorwidth=(/up/i.test(config.direction))? config.$glider.height() : config.$glider.width() //Get glider height or width based on "direction"

            config.startpoint=(/^(left|up)/i.test(config.direction))? -config.heightorwidth : config.heightorwidth //set initial position of contents based on "direction"

            if (typeof config.remotecontent!="undefined" && config.remotecontent.length>0)

                featuredcontentglider.getremotecontent(config)

            else

                featuredcontentglider.setuptoggler(config)

            $(window).bind('unload', function(){ //clean up and persist

                config.$togglerdiv.unbind('click')

                config.$toc.unbind('click')

                config.$next.unbind('click')

                config.$prev.unbind('click')

                if (config.persiststate)

                    featuredcontentglider.setCookie(config.gliderid, config.$togglerdiv.attr('lastselected'))

                config=null

               

            })

        })

    }
   


}

Suite a ce code, je rajoute ceci dans ma page php pour le faire fonctionner:


<!-------------------début banniére deroulante------------------------------->
<div id="banmov">

<script type="text/javascript">







featuredcontentglider.init({

    gliderid: "ban", //ID of main glider container

    contentclass: "glide", //Shared CSS class name of each glider content
   
   
    togglerid: "select", //ID of toggler container

    remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable

    selected: 0, //Default selected content index (0=1st)

    persiststate: false, //Remember last content shown within browser session (true/false)?

    speed: 1, //Glide animation duration (in milliseconds)

    //direction: "rightleft", //set direction of glide: "updown", "downup", "leftright", or "rightleft"

    autorotate: true, //Auto rotate contents (true/false)?

    autorotateconfig: [2000, 100] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]

})

   

       

</script>



<div id="ban" class="contentwrapper">


<div class="glide">

<a href="Copie de accueil.php"><img  src="banniere/image_ban01.jpg" style="float: left; padding: 0px; border: 0px;" /></a>


</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban02.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban03.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>



<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban04.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>



<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban05.jpg" style="float: left; padding: 0px; border: 0px;"/></a>

</div>



<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban06.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>



<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban07.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban08.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban09.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div  class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban10.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban11.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban12.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban13.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban14.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban15.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban16.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a  href="Copie de accueil.php"><img src="banniere/image_ban17.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban18.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban19.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>








<div id="select" class="toggler">

<a href="#" class=""></a>

<a href="#" class="toc"></a> <a href="#" class="toc"></a> <a href="#" class="toc"></a>

<a href="#" class="next"></a>

</div>



</div>

   



            <div>

                <SCRIPT LANGUAGE="JavaScript">

                showImage();

                </script>



            </div>
</div>


<!-------------------------fin banniere déroulante----------------------------->



Pour ceux que sa intéresse voici la page php en entier


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">



<html>

<head>



<title> numérisation, digitalisation 3D et lasergrammétrie</title>

<!-- Metatag permetant le referencement sur les moteurs de recherches -->

    <meta name="description" content="Accueil. spécialiste en numérisation, digitalisation 3D et relevé laser.  "/>

    <meta name="keywords" content=", modelisation architecture, données SIG, numérisation cadastre, digitalisation 3D, lasergrammetrie, plan tqc, numerisation, vectorisation"/>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <meta http-equiv="content-language" content="fr"/>

    <meta name="reply-to" content="carto@site.net">

    <meta name="copyright" content="2008">

    <meta name="author" content="Ingenierie"/>

    <meta name="category" content="engineering"/>

   

    <link rel="SHORTCUT ICON" href="img/favicon.ico">

    <script language="javascript" type="text/javascript"  src="../swfobject.js"></script>
   
   

<!-- Feuilles de style CSS -->

    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>

 

</script>



<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>



<link rel="stylesheet" type="text/css" href="featuredcontentglider.css" />



<script type="text/javascript" src="featuredcontentglider.js">



/***********************************************

* Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts

* This notice must stay intact for legal use

***********************************************/



</script>

<!------- bande déroulante insertion -------------------------->
<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>



<link rel="stylesheet" type="text/css" href="banderoule.css" />



<script type="text/javascript" src="banderoule.js">



/***********************************************

* Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts

* This notice must stay intact for legal use

***********************************************/



</script>


   

</head>


<body onselectstart="return false" oncontextmenu="return false" ondragstart="return false" onMouseOver="window.status='..message perso .. '; return true;">





<div id="page">




<!-------------------début banniére deroulante------------------------------->
<div id="banmov">

<script type="text/javascript">







featuredcontentglider.init({

    gliderid: "ban", //ID of main glider container

    contentclass: "glide", //Shared CSS class name of each glider content
   
   
    togglerid: "select", //ID of toggler container

    remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable

    selected: 0, //Default selected content index (0=1st)

    persiststate: false, //Remember last content shown within browser session (true/false)?

    speed: 1, //Glide animation duration (in milliseconds)

    //direction: "rightleft", //set direction of glide: "updown", "downup", "leftright", or "rightleft"

    autorotate: true, //Auto rotate contents (true/false)?

    autorotateconfig: [2000, 100] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]

})

   

       

</script>



<div id="ban" class="contentwrapper">


<div class="glide">

<a href="Copie de accueil.php"><img  src="banniere/image_ban01.jpg" style="float: left; padding: 0px; border: 0px;" /></a>


</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban02.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban03.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>



<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban04.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>



<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban05.jpg" style="float: left; padding: 0px; border: 0px;"/></a>

</div>



<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban06.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>



<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban07.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban08.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban09.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div  class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban10.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban11.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban12.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban13.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban14.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban15.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban16.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a  href="Copie de accueil.php"><img src="banniere/image_ban17.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban18.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>

<div class="glide">

<a href="Copie de accueil.php"><img src="banniere/image_ban19.jpg" style="float: left; padding: 0px; border: 0px;" /></a>

</div>








<div id="select" class="toggler">

<a href="#" class=""></a>

<a href="#" class="toc"></a> <a href="#" class="toc"></a> <a href="#" class="toc"></a>

<a href="#" class="next"></a>

</div>



</div>

   



            <div>

                <SCRIPT LANGUAGE="JavaScript">

                showImage();

                </script>



            </div>
</div>


<!-------------------------fin banniere déroulante----------------------------->

<!---------------- BANNIERE + LOGO ---------------->


       

       

       
        <script type="text/javascript">

           var so = new SWFObject("img/BAN_rubrique/animBan.swf", "offres moyens processus références ", "299", "143", "1");

           so.addParam("quality", "hight");

           so.addVariable("menu", "false");

           so.write("content");

       </script>

       

       



   

   

<!-- MENU -->

    <?php

   

    // Inclusion du menu en php pour une modification future dynamique

            include("PAGE_inc/menu.inc.php");

           

    ?>

   

   

<!-- CORPS DE PAGE -->

    <div id="corpsPage">

        <div id="contenu">

       

            <div style="height:20px; width:500px;" class="centrer">



                              <MARQUEE

                       

                                style="FONT-WEIGHT: bold;

                       

                                     FONT-SIZE: large;

                       

                                     COLOR: #0057a7;

                       

                                     LINE-HEIGHT: normal;

                       

                                     FONT-STYLE: normal;

                       

                                     FONT-VARIANT: normal"

                       

                                     scrollAmount=5 loop=infinite unselectable="on">

                              <font  size="3" face="Verdana, Arial, Helvetica, sans-serif">

                                    Services de relevés de mesures par scanner 3D

                              </font>

                              </MARQUEE>



            </div>



<script type="text/javascript">

featuredcontentglider.init({

    gliderid: "industrie", //ID of main glider container

    contentclass: "glidecontent", //Shared CSS class name of each glider content

    togglerid: "p-select", //ID of toggler container

    remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable

    selected: 0, //Default selected content index (0=1st)

    persiststate: false, //Remember last content shown within browser session (true/false)?

    speed: 1, //Glide animation duration (in milliseconds)

    direction: "rightleft", //set direction of glide: "updown", "downup", "leftright", or "rightleft"

    autorotate: true, //Auto rotate contents (true/false)?

    autorotateconfig: [5000, 15] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]

})

   

       

</script>



<div id="industrie" class="glidecontentwrapper">


<div class="glidecontent">

<img src="http://www.site.net/fr/fond_accueil82.jpg" style="float: left; padding: 0px" />

</div>

<div class="glidecontent">

<img src="http://www.site.net/fr/fond_accueil4.jpg" style="float: left; padding: 0px" />

</div>

<div class="glidecontent">

<img src="http://www.site.net/fr/fond_accueil2.jpg" style="float: left; padding: 0px" />

</div>



<div class="glidecontent">

<img src="http://www.site.net/fr/fond_accueil5.jpg" style="float: left; padding: 0px" />

</div>



<div class="glidecontent">

<img src="http://www.site.net/fr/fond_accueil6.jpg" style="float: left; padding: 0px"/>

</div>



<div class="glidecontent">

<img src="http://www.site.net/fr/fond_accueil1.jpg" style="float: left; padding: 0px" />

</div>



<div class="glidecontent">

<img src="http://www.site.net/fr/fond_accueil3.jpg" style="float: left; padding: 0px" />

</div>












<div id="p-select" class="glidecontenttoggler">

<a href="#" class=""></a>

<a href="#" class="toc"></a> <a href="#" class="toc"></a> <a href="#" class="toc"></a>

<a href="#" class="next"></a>

</div>



</div>

   



            <div>

                <SCRIPT LANGUAGE="JavaScript">

                showImage();

                </script>



            </div>

        </div>

    </div>

   

   

<!-- FOOTER -->

    <?php

    // Inclusion du menu en php pour une modification future dynamique

            include("PAGE_inc/footer.inc.php");

    ?>

   

    <!-- Edited by Ghostweapon -->

    <!-- ghostweapon.free.fr -->





</div>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">

</script>

<script type="text/javascript">

_uacct = "UA-4865025-1";

urchinTracker();

</script>

</body>

</html>

personne ?

bonjour si ce n'est qu'un fondu entre deux image essai ce script il sera plus simple a comprendre

fondu

ok je vais voir ce que cela donne merci

j'ai une question sur le script que tu m'as donner,
y a-t-il un fichier a mettre en lien car j'ai copier coller, juste changer le nom des sources des images et cela ne donne rien

merci

Non c'est bon j'ai réussi a le faire fonctionner,

j'ai une question, j'ai utiliser ton script fondu auto,

est-il possible de faire une boucle, c'est a dire que quand il a fait toutes les images il recommence depuis le début au lieu de bocler toujours sur la même image ? et est-il possible de rajouter des images car pour l'instant sa marche qu'avec 2 images ?

normalement il y en a un qui le fait

Oui, c'est bon j'ai trouvé,
j'avais loupé une des variable a éditer pour que ça fonctionne ^^

merci

bonjour, je me suis apperçut d'un petit bug,

au bout d'un certain temps la transition s'accélére et on ne voit plus le fondu, est-ce normale, y a t-il quelque chose a éditer pour que cela ne se produise pas?

Merci

non c'est pas normale je l'ai mis en route et laisser un bon moment et je ne perçois rien