Mettre du texte sur un slider (template responsive)

Réduire
Ce sujet est fermé.
X
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Mettre du texte sur un slider (template responsive)

    Bonjour,

    Prenons un exemple, dans un template comme ci-dessous.
    Prenons la partie slideshow.

    http://www.templatemonster.com/demo/51764.html

    1) Imaginons que je veuille rajouter un article et/ou du texte sur plusieurs lignes SUR le slideshow mais sans inclure ce texte dans l'image.
    => L'interêt étant que ce texte qui viendrait se superposer comporterait des balises h1, h2 ... et informations pour le référencement ...

    Est-ce facile à réaliser sachant que tout dans un template comme le 51764 tout peut se redimensionner (responsive) et que le texte ne doit bien sûr pas se décaler ou déborder par rapport à l'image ?
    En fait je voudrais éviter de taper du texte sous photoshop dans l'image directement

    2) Dans un 2ème temps, Je voudrais aussi rajouter sur ce slideshow une petite animation style des lettres qui tombent du haut de l'écran et viennent former des mots
    Et bref une question plus générale, peut-on superposer des modules dans une même position et comment ?

    Merci pour vos retours et orientations !

    Laurent
    Solidaire avec les dinosaures

  • #2
    Re : Mettre du texte sur un slider (template responsive)

    Envoyé par messinmaisoui Voir le message
    Bonjour,

    Prenons un exemple, dans un template comme ci-dessous.
    Prenons la partie slideshow.

    http://www.templatemonster.com/demo/51764.html

    1) Imaginons que je veuille rajouter un article et/ou du texte sur plusieurs lignes SUR le slideshow mais sans inclure ce texte dans l'image.
    => L'interêt étant que ce texte qui viendrait se superposer comporterait des balises h1, h2 ... et informations pour le référencement ...

    Est-ce facile à réaliser sachant que tout dans un template comme le 51764 tout peut se redimensionner (responsive) et que le texte ne doit bien sûr pas se décaler ou déborder par rapport à l'image ?
    En fait je voudrais éviter de taper du texte sous photoshop dans l'image directement
    bt_contentslider est vraiment très bien pour ça

    xtc propose un slider où tu fais monter ce que tu veux dedans mais il faut comprendre leur logique et coder un chouille

    Envoyé par messinmaisoui Voir le message
    2) Dans un 2ème temps, Je voudrais aussi rajouter sur ce slideshow une petite animation style des lettres qui tombent du haut de l'écran et viennent former des mots
    Et bref une question plus générale, peut-on superposer des modules dans une même position et comment ?
    Tu peux jouer avec les css et un peu de js, l'idée étant de définir 2 div (le slide et l'effet de chute des lettres), tu peux le faire dans un module perso.
    Dans la css tu définies 2 style par l'id et en js, tu repères la position de la première div que tu affectes à la deuxième

    Avec un z-index approprié pour chacune tu devrais les superposer sans problème

    Pour rester responsive, tu devras ajouter un event à ton js pour qu'à chaque fois que la fenêtre est redimensionnée, il aille affecté la nouvelle position ainsi que les nouvelles dimensions de la 2ème div
    Christophe
    http://www.webcrea.fr

    Commentaire


    • #3
      Re : Mettre du texte sur un slider (template responsive)

      Merci Webcrea, je vais tâcher de digérer ça et je reviens ...
      Solidaire avec les dinosaures

      Commentaire


      • #4
        Re : Mettre du texte sur un slider (template responsive)

        Même mieux, puisque l'effet est superposé à la première div, tu a juste à affecter l'effet (js) à cette première div sans passer par une deuxième div comme je le suggérais précédemment.
        Christophe
        http://www.webcrea.fr

        Commentaire


        • #5
          Re : Mettre du texte sur un slider (template responsive)

          Ok Merci encore !
          Solidaire avec les dinosaures

          Commentaire


          • #6
            Re : Mettre du texte sur un slider (template responsive)

            Re-bonjour,
            Je reviens sur mon deuxième point, finalement je compte
            faire une animation js dans un module à part dans un premier temps ...

            Je suis en Joomla 3

            L'idée étant d'utiliser textillate dans un module personnalisé
            =>
            http://jschr.github.io/textillate/

            Apparemment ça devait marcher tout seul

            1) J'ai donc récupéré animate.css que j'ai placé dans la partie css de mon template
            jquery.lettering.js et jquery.textillate.js dans la partie js de mon template
            Ensuite modifié l'index.php de mon template pour tenir compte de ce .css + les 2 .js
            Note : pour jquery nécessaire j'ai déjà celui-là qui se charge (v1.11.1)
            <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
            2) J'ai créé un module personnalisé et autorisé l'exécution de javascript au niveau de JCE
            Voilà le contenu de mon html personnalisé
            <script type="text/javascript">
            // <![CDATA[
            $(function() {
            $('.tlt').textillate();
            })
            // ]]>
            </script>
            <h1 class="tlt" data-in-effect="rollIn">Ok doc</h1>

            3) Je teste, mon titre "Ok doc" apparait bien mais rien ne se passe !?

            J'ai alors testé autrement, j'ai pris tout ces fichiers et mis dans un répertoire
            puis lancé le test.html suivant mais aussi sans aucun effet ... (en local comme sur serveur distant)
            <!DOCTYPE html>
            <html>
            <head>
            <meta charset="utf-8" />
            <link href="animate.css" rel="stylesheet">
            <script src="jquery.lettering.js"></script>
            <script src="jquery-1.11.1.js"></script>
            <script src="jquery.textillate.js"></script>
            </head>
            <body>
            <script>
            $(function () {
            $('.tlt').textillate();
            })
            </script>
            <h1 class="tlt" data-in-effect="rollIn">Ok doc</h1>
            </body>
            </html>
            Si quelqu'un connait textillate et/ou voit une Grosse erreur, merci de me la signaler

            Laurent
            Dernière édition par messinmaisoui à 08/12/2014, 14h17
            Solidaire avec les dinosaures

            Commentaire


            • #7
              Re : Mettre du texte sur un slider (template responsive)

              Textillate fonctionne enfin !

              Des parenthèses, crochets qui manquaient ...
              Des appels .js dans le désordre ...

              Et enfin il pleut ... des caractères ... sur le Lorraine !
              une fois n'est pas coutume ;-)

              Je close le topic dans la foulée .
              Solidaire avec les dinosaures

              Commentaire


              • #8
                Re : Mettre du texte sur un slider (template responsive)

                Je rouvre le sujet car je sèche encore sur le point suivant ...

                Est-ce que quelqu'un aurait un exemple de Javascript ou un lien qui ferait ou se rapprocherait de ceci
                =>
                Pour rester responsive, tu devras ajouter un event à ton js pour qu'à chaque fois que la fenêtre est redimensionnée, il aille affecté la nouvelle position ainsi que les nouvelles dimensions de la 2ème div
                Voici pour l'instant mon script affichant un texte "animé" dans un module personnalisé mis dans une position "showcase"
                et je voudrais caler ce texte "animé" dans un autre module (diaporama) dans la même position ...
                sachant que tout dans mon template "responsive" se redimensionne

                <div id="animfais">&nbsp;</div>
                <script type="text/javascript">
                var montexte = "Mon texte en environnement responsive ";
                maDiv = document.createElement("div");
                maDiv.innerHTML = montexte;
                maDiv.className = 'tlt';
                document.getElementById("animfais").appendChild(ma Div);
                jQuery(document).ready(function($) {
                $('.tlt').textillate({
                loop: true,
                minDisplayTime: 10000,
                in : {
                effect: 'fadeInDown',
                shuffle: true,
                delayScale: 1.5,
                delay: 100
                },
                out: {

                effect: 'rollOut',
                shuffle: true,
                delayScale: 1.5,
                delay: 50
                }
                });
                })
                </script>
                Toute indication sera la bienvenue ...
                Merci d'avance
                Solidaire avec les dinosaures

                Commentaire


                • #9
                  Re : Mettre du texte sur un slider (template responsive)

                  Finalement j'ai changé de stratégie et modifié directement le code dans camera.js pour insérer mon texte sautillant en vertical à la place du titre de chaque slide (champ camera caption)
                  L'idée étant de profiter des fonctions internes au slider en matière de repositionnement / redimensionnement.

                  Bon ça le fait maintenant ...
                  Solidaire avec les dinosaures

                  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