image fading pour un ensemble d'images

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • image fading pour un ensemble d'images

    Bonjour à tous,

    j'avais cherché il y a quelque semaines à appliquer le principe d'image fading de ced :
    http://www.joomlack.fr.nf/tutos-desi...ge-fading.html mais n'y était pas parvenue, j'avais trouvé une autre astuce pour parvenir au résultat.
    J'ai eu de nouveau besoin d'avoir un réel image fading sur plusieurs images, et ai réussi à adapter le script , je vous le laisse donc ici, ça peut servir:
    Code:
    window.addEvent('domready', function (){
    
    var action = $$('.contimg');
    action.each(function(divcontimg, i) {
                                
        divcontimg.addEvent('mouseleave', function (){
    
             var tDiv = divcontimg.getElement('.div1');
             var vDiv = divcontimg.getElement('.div2');
            
             if(tDiv.fx){tDiv.fx.stop();}
             if(vDiv.fx){vDiv.fx.stop();}
            
             vDiv.fx = vDiv.effect('opacity', {duration: 1000}).start(1);
        });
    
        divcontimg.addEvent('mouseenter', function (){
    
             var tDiv = divcontimg.getElement('.div2');
             var vDiv = divcontimg.getElement('.div1');
    
             if(tDiv.fx){tDiv.fx.stop();}
             if(vDiv.fx){vDiv.fx.stop();}
    
             tDiv.fx = tDiv.effect('opacity', {duration: 1000}).start(0);
             vDiv.fx = vDiv.effect('opacity', {duration: 1000}).start(1);
        });
    
    }); //end of action.each 
    
    });
    Le code HTML doit être de la forme suivante:
    Code HTML:
    <div class="contimg" >
            <div class="div1" style="position: absolute; opacity: 1; "><img src="images/stories/image_fading/image1.jpg" /></div>
            <div class="div2" style="position: absolute; opacity: 1;"><img src="images/stories/image_fading/image2.jpg"  /></div>
        </div>
    <div class="contimg" >
            <div class="div1" style="position: absolute; opacity: 1;"><img src="images/stories/image_fading/image3.jpg"  /></div>
            <div class="div2" style="position: absolute; opacity: 1; "><img src="images/stories/image_fading/image4.jpg" /></div>
        </div>
    On met évidemment autant de div de classes contimg qu'on le souhaite.
    Merci ced!
    feel good, feel geek

  • #2
    Merci pour le lien et la modif, bien que je n'ai pas encore testé car étant débutant et bloqué à cause d'une partie en php....

    Je n'ai qu'une seul question, ou met-on cette partie du code :

    <?php
    $path = getcwd();
    include ($path."/demos/imagefade/demo.php");
    $doc =&amp; JFactory::getDocument();
    $doc->addScript("demos/imagefade/imagefade.js");
    ?>
    Et le loadposition comment fonctionne t-il?

    J'ai bien, index.php, ....php... mais je ne vois pas du tout, a vrai dire je ne m'y retrouve pas des masses en php

    Je suis sur Joomla 1.5... si jamais
    Dernière édition par seresia à 13/10/2010, 09h39

    Commentaire


    • #3
      le code que j'ai donné suit le tuto d'image fading de ced, le code en php est donc à mettre dans le module php comme dans le tuto. Mais tout dépend de ce que tu veux faire en réalité.
      Pour le loadposition tu mets juste {loadposition user5} pour loader tous les modules de position user5 dans l'article de ton choix.
      Si tu as d'autres questions n'hésite pas, je n'ai pas compris ta remarque sur index.php.
      feel good, feel geek

      Commentaire


      • #4
        Oui je me rends bien compte que ce n'est pas clair du tout ce que j'ai dit alors je reprends :

        - Joomla 1.5.12

        Dans administration site de Joomla je vais dans "Extensions"->"Gestions des modules".
        La je vais dans la liste "Nom de module" ou je vais chercher un module bien précis que l'on retrouve sur mon site (module d'une dimenions de Xpx sur Xpx dans lequelle je veux faire défiler des images en fade---> pour la petite histoire)

        Je me retrouve donc dans le module en question. La je vais dans l'edit code ou je vais mettre :

        Code HTML:
        <div class="contimg" >
                <div class="div1" style="position: absolute; opacity: 1; "><img src="images/stories/image_fading/image1.jpg" /></div>
                <div class="div2" style="position: absolute; opacity: 1;"><img src="images/stories/image_fading/image2.jpg"  /></div>
            </div>
        <div class="contimg" >
                <div class="div1" style="position: absolute; opacity: 1;"><img src="images/stories/image_fading/image3.jpg"  /></div>
                <div class="div2" style="position: absolute; opacity: 1; "><img src="images/stories/image_fading/image4.jpg" /></div>
            </div>
        Ce qui va me permettre d'appeler mes images 1,2,3 et 4 au fur et a mesure.

        (préviens moi dés que je me trompe )

        Au préalable j'aurais ajouté au bon endroit le fichier "imagefade.js"

        Maintenant je suis largué (car je pige pas), la partie du code fournie en php par ced doit être mit dans un module, mais lequelle? le module surlequelle je suis en train de travailler, le module que je cite plus haut dans mes exemples logiquement.

        Mais l'edit code ne prend pas le php ds joomla, ....
        Alors je lis :

        le code en php est donc à mettre dans le module php
        Quel module php???
        Je n'ai également pas compris la partie ou tu parles tu loadposition.... c'est une variable à mettre ds l'edit code de mon module?

        En fait je m'y perds ds les termes modules....

        Je précise que je ne suis pas dans un article mais dans un module ou la je veux mettre mes images, p-e que le problème vient de la????
        Alors il parle aussi de mod PHP???

        Enfin voila, c'est peu lourd comme question, je le sens bien, mais bon je m'y perds la, ma logique est mauvaises qlq'part....

        Merci de ton aide

        Commentaire


        • #5
          pour résumer, tu crées un module mod_php (que tu dois installer au préalable) dans lequel tu mets le code php, tu mets les fichiers du package sur ton site comme expliqué dans le tuto dans un répertoire et dans ton article tu ajoutes {loadposition userX} où userX est la position dans laquelle le mod_php est publié
          Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
          http://www.template-creator.com Outil de création de templates
          Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

          Commentaire


          • #6
            Ahhhh je comprend maintenant dc me faut le module mod_php que je dois installer oki doc

            et en plus de loadposition userX, je dois mettre mes div class dans l'article....

            impec merci

            Maintenant le code php fournit par ced, ca veut dire quoi en fait? il dit d'aller chercher le fichier javascript et d'aller l'appliquer la on lui aura indiquer (loadposition)?

            Merci en tout cas j'y vois tout de suite plus clair

            Commentaire


            • #7
              non le code php te sert juste à ajouter le code html et le code javascript. Mais tu peux très bien envisager de mettre unqiuement les lignes
              Code PHP:
              <?php $doc =&ampJFactory::getDocument();
              $doc->addScript("demos/imagefade/imagefade.js");?>
              puis de mettre directement ton code html dnas ton module.

              Le loadposition quant à lui te sert juste à inclure un module dans un article, si c'est ton besoin, ce n'est pas lié au php, ni à imagefading. Si j'ai bien compris ce que tu veux faire, tu n'en as aucun besoin.
              feel good, feel geek

              Commentaire


              • #8
                Merci,

                je vois que mod_php n'est disponible qu'en version Joomla Mod PHP 1.0.0.Beta2
                Est-ce raisonnable de l'installer sur la version 1.5 de Joomla? une version beta2

                Le fait d'installer ce type de module, ne rend t-il pas plus vulnérable mon site vu qu'il va falloir
                activer le plugin Joomla Legacy...

                Je ne veux pas non plus rendre mon site plus vulnérable à cause de ca, bien que je ne m'y connaisse pas trop
                d'où mes questions

                merci

                Commentaire


                • #9
                  http://extensions.joomla.org/extensi...n-modules/1758 ce module est 1.5 native, il est donc tout à fait adapté à J1.5, 1.0.0, c'est la version du module, pas sa compatibilité Joomla.
                  Aucun problème pour l'installer donc sur une 1.5.
                  feel good, feel geek

                  Commentaire


                  • #10
                    Bonjour,
                    Le fait d'installer ce type de module, ne rend t-il pas plus vulnérable mon site vu qu'il va falloir
                    activer le plugin Joomla Legacy...
                    Ce sont deux question différentes... Le mode legacy n''introduit pas a priori de faille, mais dégrade (un peu) les temps de réponse. Mais pas besoin de mode Legacy pour mod_php, tu as mal lu...
                    Si tu cherches des choses plus suivies, regarde Jumi ou Sourcerer
                    Schtroumpfe toi le Schtroumpf t'aidera.
                    Je ne schtroumpfe pas aux demandes de schtroumpf par MP.

                    Commentaire


                    • #11
                      c'est vrai que lorsque j'ai écris ce tuto sur mon site je suis peut etre allé vite dans les explications, mais d'autres y sont arrivés ! alors courage

                      pour le mod_php il est natif 1.5, mais tu peux en utiliser un autre si tu préfères
                      Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                      http://www.template-creator.com Outil de création de templates
                      Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                      Commentaire


                      • #12
                        Merci,

                        c'est vrai que Jumi et Sourcerer on l'air pas mal, mais j'ai peur qu'une fois l'un ou l'autre module installé, cela change complètement mon interface lors de la rédaction d'article, ou que cela modifie des options nommées sous un nom particulier vers un autre nom...

                        et que si un jour je veux désinstaller ce module, que ca vienne 'corrompre' d'une manière ou une autre les articles créés et qu'ils deviennent inutilisable....

                        Chaud boulette pour le module php afin de faire des images fading mais bon je préfère prendre un maximum de précaution (en me renseignant prêt de vous :-) ) afin de pas me retrouver devant un truc qui change tout dans ma manière de travailler ou qui m'oblige a revoir mes articles déjà créés...

                        Voila alors finalement quand n'est-il?

                        Commentaire


                        • #13
                          Re,
                          c'est vrai que Jumi et Sourcerer on l'air pas mal, mais j'ai peur qu'une fois l'un ou l'autre module installé, cela change complètement mon interface lors de la rédaction d'article, ou que cela modifie des options nommées sous un nom particulier vers un autre nom...
                          et que si un jour je veux désinstaller ce module, que ca vienne 'corrompre' d'une manière ou une autre les articles créés et qu'ils deviennent inutilisable....
                          Ce sont des extensions tout ce qu'il y a de normal, pas des hacks ; elles ne sont pas invasives, ne donnent pas de boutons ni de fièvre, sans odeur, sans saveur, et ne fondent pas dans la main. Comme n'importe quel plugin, quand on les désinstalle, il apparaît des gros mots entre {} dans les articles qui y faisaient appel. Et il ne se passe rien dans les autres.

                          L'alternative c'est de coder un module complet ou de mettre le code en dur dans l'index.php de ton template.
                          Schtroumpfe toi le Schtroumpf t'aidera.
                          Je ne schtroumpfe pas aux demandes de schtroumpf par MP.

                          Commentaire

                          Annonce

                          Réduire
                          1 sur 2 < >

                          C'est [Réglé] et on n'en parle plus ?

                          A quoi ça sert ?
                          La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                          Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                          Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                          Comment ajouter la mention [Réglé] à votre discussion ?
                          1 - Aller sur votre discussion et éditer votre premier message :


                          2 - Cliquer sur la liste déroulante Préfixe.

                          3 - Choisir le préfixe [Réglé].


                          4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                          2 sur 2 < >

                          Assistance au forum - Outil de publication d'infos de votre site

                          Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                          Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                          Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                          UTILISER À VOS PROPRES RISQUES :
                          L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                          Problèmes connus :
                          FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                          Installation :

                          1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                          Archive zip : https://github.com/AFUJ/FPA/zipball/master

                          2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                          3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                          4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                          5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                          6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                          et remplacer www. votresite .com par votre nom de domaine


                          Exemples:
                          Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                          Télécharger le script fpa-fr.php dans: /public_html/
                          Pour executer le script: http://www..com/fpa-fr.php

                          Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                          Télécharger le script fpa-fr.php dans: /public_html/cms/
                          Pour executer le script: http://www..com/cms/fpa-fr.php

                          En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                          Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                          Voir plus
                          Voir moins
                          Travaille ...
                          X