Sujet Précédent Sujet Suivant

Fondu javascript

loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010 - 13 mai 2009 à 10:35
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 - 18 mai 2009 à 19:51
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: ' Fetching Content. Please wait... ',

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

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

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[# ]

[# ] [# ] [# ]

[# ]

   

           

                <SCRIPT LANGUAGE="JavaScript">

                showImage();

                </script>

           

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

<!-------------------début banniére deroulante------------------------------->

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

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[Copie de accueil.php ]

[# ]

[# ] [# ] [# ]

[# ]

   

           

                <SCRIPT LANGUAGE="JavaScript">

                showImage();

                </script>

           

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

   

       

       

           

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

                             

                                    Services de relevés de mesures par scanner 3D

                             

                              </MARQUEE>

           

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

[# ]

[# ] [# ] [# ]

[# ]

   

           

                <SCRIPT LANGUAGE="JavaScript">

                showImage();

                </script>

           

       

   

   

   

<!-- FOOTER -->

    <?php

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

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

    ?>

   

    <!-- Edited by Ghostweapon -->

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

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

</script>

<script type="text/javascript">

_uacct = "UA-4865025-1";

urchinTracker();

</script>

</html>

11 réponses

Réponse 1 / 11
loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
14 mai 2009 à 09:21
personne ?
0
Réponse 2 / 11
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
14 mai 2009 à 10:25
bonjour si ce n'est qu'un fondu entre deux image essai ce script il sera plus simple a comprendre

fondu
0
Réponse 3 / 11
loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
14 mai 2009 à 10:31
ok je vais voir ce que cela donne merci
0
Réponse 4 / 11
loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
14 mai 2009 à 10:47
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 11
loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
14 mai 2009 à 11:27
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 ?
0
Réponse 6 / 11
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
14 mai 2009 à 12:18
normalement il y en a un qui le fait
0
Réponse 7 / 11
loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
14 mai 2009 à 13:02
Oui, c'est bon j'ai trouvé,
j'avais loupé une des variable a éditer pour que ça fonctionne ^^

merci
0
Réponse 8 / 11
loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
18 mai 2009 à 09:37
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
0
Réponse 9 / 11
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
18 mai 2009 à 16:19
non c'est pas normale je l'ai mis en route et laisser un bon moment et je ne perçois rien
0
Réponse 10 / 11
loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
18 mai 2009 à 16:22
ok, ça doit être moi qui est mal fait un truc
0
Réponse 11 / 11
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
18 mai 2009 à 19:51
possible
0

Discussions similaires

Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
integrer une variable javascript dans un lien hypertext
rabixpvb -
Stopub -

4 réponses
est-ce que "goto" existe en javascript ?
dmk04 -
bultez -

4 réponses
Partie entière d'un nombre
Sniper_Vgaerr -
DeAtHCrAsH -

2 réponses
Redirection par header ou javascript?
Evangun -
Anthomicro -

8 réponses
Rejoignez-nous