Lien dynamique vers un article qui contient une iframe

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

  • [Problème] Lien dynamique vers un article qui contient une iframe

    Bonjour,

    Actuellement, dans mon site http://www.gimpons.net, si on clique sur l'image présentant un tutoriel, un nouvel onglet s'ouvre dans le navigateur internet avec le tutoriel choisi.
    Je voudrais modifier la façon d'atteindre le tutoriel. Je souhaiterais qu'au clic, un article "Votre tutoriel" s'affiche contenant une iframe avec le contenu du tutoriel de façon à rester dans GIMPons.

    Pour obtenir cela, voici ce que j'ai fait :

    creation d'une position "positioniframe" dans fichier templateDetails.xml du template

    creation module wrapper :
    - position = positioniframe
    - URL = url d'un site existant
    - Nom de la cible = ton-tutoriel
    - assignation du module à tous les menus

    creation d'un article "Votre tutoriel" :
    - contenu =
    Code:
    {loadposition positioniframe}

    Si je fais un lien vers l'article "Votre tutoriel" dans un autre article, tout est OK : l'article "Votre tutoriel" s'affiche avec le contenu du site (celui dans paramètre URL) dans l'iframe.

    Je prends un lien contenu, par exemple, dans la page http://www.gimpons.net/effets-photo.html . On a par exemple :
    Code:
    <a target="_blank" href="lien-vers-le-tutoriel">
    Si je modifie par :
    Code:
    <a target="ton-tutoriel" href="lien-vers-le-tutoriel">
    cela ne fonctionne pas : un nouvel onglet avec le tuto s'affiche : c'est comme si le target était inactif.


    Comment atteindre cette page "Votre tutoriel" pour chaque lien du site conformément au code d'une iframe ?
    Code:
    <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
    <p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
    Merci d'avance à ceux qui répondront.
    Dernière édition par fynhooft à 23/11/2014, 22h01
    GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
    Le terrier de Fynhooft : http://patrick.gauwin.free.fr
    Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

  • #2
    Re : Lien dynamique vers un article qui contient une iframe

    Bonjour fynhooft,

    Dans la balise <a> l'attribut target indique le cadre (frame) de destination du lien (http://www.w3schools.com/tags/att_a_target.asp).

    Les valeurs possibles de target sont :
    _blank : affiche le lien dans une nouvelle fenêtre
    _self : affiche le lien dans le cadre courant (par défaut)
    _parent : affiche le lien dans le cadre parent (de niveau supérieur)
    _top : affiche le lien dans la totalité de la fenêtre (par dessus le frameset)
    [nom du cadre] : affiche le lien dans le cadre (frame) indiqué

    Attention, ne pas confondre frame et iframe :
    <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
    <p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
    Ce code est erroné : le target ne peut pas être un iframe.

    Actuellement, dans les articles de présentation des tutoriels du site, les liens ont un target _blank donc ils s'ouvrent dans une nouvelle fenêtre (ou nouvel onglet) du navigateur.

    Dans ces articles de présentation pour avoir un lien vers un autre article (avec iframe) qui reste dans le site, il faut mettre l'attribut target="_self" ou bien supprimer l'attribut target puisque la valeur par défaut est _self. Dans les éditeurs (TinyMCE, JCE, etc.) le paramètre target est habituellement traduit par "Cible".

    Le souci que je vois dans cette méthode c'est qu'il va falloir créer autant d'articles avec iframe qu'il y a de liens dans les articles de présentation (beaucoup d'après ce que j'ai vu sur le site).

    Il serait peut-être plus simple d'utiliser un plugin modal qui ouvre l'iframe en popup. Par exemple avec Modals (http://extensions.joomla.org/extensi...a-iframes/4277). Il suffirait alors d'éditer les liens de la page de présentation :

    le code utilisé actuellement sur le site
    Code HTML:
    <a href="http://joomla.fr" target="_blank"><img title="Joomla!Fr" alt="Joomla!Fr" src="images/joomla_logo_black.jpg"></a>
    devient
    Code HTML:
    {modal http://joomla.fr}<img title="Joomla!Fr" alt="Joomla!Fr" src="images/joomla_logo_black.jpg"/>{/modal}
    Note : il y a d'autres plugins qui ont la même fonctionnalité dans http://extensions.joomla.org/extensi...pups-a-iframes

    Amicalement,
    Rajoz

    Commentaire


    • #3
      Re : Lien dynamique vers un article qui contient une iframe

      Merci Rajoz pour ta réponse.

      Quelques remarques :

      Envoyé par Rajoz Voir le message
      _self : affiche le lien dans le cadre courant (par défaut)
      J'ai testé : le site avec son tutoriel s'affiche dans l'onglet courant mais plus de trace de GIMPons sauf en cliquant sur page précédente du navigateur !

      Envoyé par Rajoz Voir le message
      Ce code est erroné : le target ne peut pas être un iframe.
      C'est faux : regardes sur ce site à la rubrique "Use iframe as a Target for a Link" et sur cette page pour tester
      J'ai testé dans Joomla et cela fonctionne très bien sauf que l'iframe et le lien doivent apparemment se trouver dans le même article !
      Pb comment faire pour utiliser un lien dans un article et l'iframe dans un autre. C'est exactement ce que je veux faire.

      Envoyé par Rajoz Voir le message
      Il serait peut-être plus simple d'utiliser un plugin modal qui ouvre l'iframe
      J'ai regardé le module concerné. Effectivement cela devrait fonctionner. Mais comme je suis en train d'adapter le site avec Joomla3 et de le faire responsive, il me semble que les pop-up, ce n'est peut-être pas top.
      Est-ce que les outils fournis par Joomla ne sont pas suffisants ?
      GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
      Le terrier de Fynhooft : http://patrick.gauwin.free.fr
      Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

      Commentaire


      • #4
        Re : Lien dynamique vers un article qui contient une iframe

        Bonjour fynhooft,


        Remarque 1

        Pour que cela fonctionne, il faut créer un article avec l'iframe sur le site du tutoriel, et dans l'article de présentation faire le lien sur cet article avec un target _self. En cliquant sur le lien de présentation cela affichera la page avec le tutoriel en restant sur GIMPons.

        page présentation :
        <a href="index.php/tuto1" target="_self">Tuto 1</a>

        page Tuto 1
        <iframe src="http://www.w3schools.com"></iframe>

        La difficulté c'est qu'avec cette méthode il faut autant d'articles avec iframe que de tutos.

        Il est faisable de n'avoir qu'un seul article de tuto à condition de créer le code permettant de transmettre de l'article de présentation à cet article de tuto un paramètre avec l'url du tuto à afficher dans l'iframe.
        Un peu comme je fais pour le site d'aide de l'administration où j'ai créé un plugin qui permet de passer la clé de référence de l'aide à la page à afficher.

        Remarque 2

        Effectivement, j'en étais resté aux définitions de base de target (w3school ne parle pas de cette possibilité dans la page sur l'attribut target).
        Je te remercie de m'avoir montré cette utilisation de target que je ne connaissais pas.

        J'ai essayé de mettre plusieurs liens dans le même article et cela fonctionne sans problème :
        <iframe src="index.php/tuto0" name="iframe_a"></iframe>
        <p><a href="index.php/tuto1" target="iframe_a">Tuto 1</a></p>
        <p><a href="index.php/tuto2" target="iframe_a">Tuto 2</a></p>
        <p><a href="index.php/tuto3" target="iframe_a">Tuto 3</a></p>

        L'inconvénient c'est que l'iframe doit être dans la même page que les liens. Je n'ai pas vu de possibilité que le target pointe sur un name qui soit dans une autre page.

        Remarque 3

        Le plugin Modals adapte le pop-up à son ouverture à la dimension de la fenêtre. Il n'y a pas de problème ni avec Joomla 3 ni avec le mode responsive.
        Voir la démo sur http://www.nonumber.nl/extensions/modals en cliquant sur "External url".
        L'éditeur JCE avec MediaBox permet aussi de faire des pop-ups en les adaptant à la fenêtre. Il a aussi pour lui la grande facilité pour créer un lien modal sur un article du site (ou sur un autre élément).

        Remarque 4

        Est-ce que les outils fournis par Joomla ne sont pas suffisants ?
        Il ne s'agit pas d'un problème de Joomla mais d'un problème html qui aurait été le même sur un site statique. Au moins avec Joomla, il y a des solutions via les extensions.

        Au fait, voici une solution se servant des outils natifs de Joomla 3 :
        • créer des catégories en cascade, par exemple : niveau 1 = Tutoriels, niveau 2 = Arrières-plans.
        • créer des articles dans ces catégories, avec une introduction ressemblant à ce qu'il y a sur la page de présentation et un corps de texte incluant l'iframe.
        • créer un affichage en blog des articles de la catégorie Tutoriels/Arrières-plans sur 6 colonnes.
        • quand on clique dans la page blog sur l'introduction d'un article, cet article s'affiche complètement avec l'iframe et en restant sur le site.
        • avantages :
          • très simple d'ajouter un article avec un nouveau tuto à une catégorie, le blog est actualisé automatiquement.
          • pour conserver la structure de l'article il suffit de le dupliquer et de ne modifier que ce qui est nécessaire (titre, image et texte d'intro, lien d'iframe, catégorie, etc.).

        Amicalement,
        Rajoz

        Commentaire


        • #5
          Re : Lien dynamique vers un article qui contient une iframe

          Envoyé par Rajoz Voir le message
          Il est faisable de n'avoir qu'un seul article de tuto à condition de créer le code permettant de transmettre l'article de présentation à cet article de tuto un paramètre avec l'url du tuto à afficher dans l'iframe.
          C'est donc ce que j'ai besoin : le code pour transmettre le lien à l'iframe

          Envoyé par Rajoz Voir le message
          Voir la démo sur http://www.nonumber.nl/extensions/modals en cliquant sur "External url".
          ... et si tu vas jusqu'en bas de la page, "external link" = payant. Zut, alors !

          Envoyé par Rajoz Voir le message
          Il ne s'agit pas d'un problème de Joomla mais d'un problème html qui aurait été le même sur un site statique.
          J'en suis bien conscient. Ce que je voulais dire c'est que je préfère utiliser rien que Joomla avec du css ou du jquery éventuellement. Je préfèrerais me dispenser d'extensions tierces (quand elles disparaissent avec les versions de Joomla, on est bien ennuyé).

          Envoyé par Rajoz Voir le message
          Au fait, voici une solution se servant des outils natifs de Joomla 3 : ...
          Là, je n'ai pas tout compris : pourquoi six colonnes ?

          Il y a peut-être une autre voie : puisque l'iframe et les liens doivent, à priori, être dans le même article, on met l'iframe au début et les liens ensuite.
          Il faudrait alors ne pas afficher l'iframe quand on affiche l'article (on affiche donc que les liens).
          Quand l'utilisateur clique sur un lien, on affiche l'iframe mais plus les liens.
          Est-ce possible avec du css et/ou du javascript et/ou du jquery ?
          GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
          Le terrier de Fynhooft : http://patrick.gauwin.free.fr
          Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

          Commentaire


          • #6
            Re : Lien dynamique vers un article qui contient une iframe

            Bonjour fynhooft,

            C'est donc ce que j'ai besoin : le code pour transmettre le lien à l'iframe
            C'est soit créer des articles soit développer du code...

            ... et si tu vas jusqu'en bas de la page, "external link" = payant. Zut, alors !
            La fonction "external link" qui est payante c'est celle qui est dans la partie "Convert links by"
            La création des modals avec un lien externe fait partie de "Create modal links anywhere" qui est dans les fonctions gratuites.
            C'est confirmé dans la doc (http://demo.nonumber.nl/index.php/12-modals) voir les différents onglets Syntax & Explanation (quand la fonction est payante c'est clairement indiqué).
            J'ai souvent utilisé cette extension avec des codes du type {modal mon-url}Cliquez ici{/modal} pour être sûr qu'il n'y a pas besoin de la version payante (sauf pour remercier le développeur).

            Même si cela avait été payant, JCE+MediaBox est gratuit et il est installé sur de très nombreux sites (au moins pour ses qualités d'éditeur).

            Je préfèrerais me dispenser d'extensions tierces (quand elles disparaissent avec les versions de Joomla, on est bien ennuyé).
            Je comprends ton soucis surtout que passer de 1.5 à 3.3 c'est un grand saut et que tu dois déjà avoir rencontré le problème. Ici, je dirais que ce ne me paraît pas un souci :
            • NoNumer et JCE sont des fournisseurs connus de longue date et de très nombreux utilisateurs se servent de leurs extensions.
            • En cas de problème (vraiment très peu probable), il existe de nombreuses extensions de popup qui pourront facilement prendre le relais.

            Là, je n'ai pas tout compris : pourquoi six colonnes ?
            L'article d'un tuto va se présenter sous la forme :
            • introduction comme dans la page de présentation des tutoriels de GIMPons : image + lien dans un div de 110x145 px.
            • lien "Lire la suite..."
            • corps de l'article avec l'iframe

            En affichage blog on peut choisir pour les articles en introduction le nombre de colonnes. J'ai indiqué six colonnes pour reproduire ce qu'il y a sur le site GIMPons où les tutos sont rangés en six colonnes (ex: page Arrières-plans).
            En affichage complet de l'article ne s'affiche que le corps de l'article qui occupe toute la page.

            Est-ce possible avec du css et/ou du javascript et/ou du jquery ?
            Bien sûr c'est possible, mais là encore il va falloir développer du code.

            Amicalement,
            Rajoz

            Commentaire


            • #7
              Re : Lien dynamique vers un article qui contient une iframe

              Bonjour,

              J'ai testé modals .
              Effectivement, cela fonctionne avec les liens externes.
              Seul souci, le responsive que j'ai testé avec la vue adaptative de Firefox.
              Supposons que je suis en 320x480, en format vertical. Si on clique sur un lien, la fenêtre modale s'affiche correctement (centrée en hauteur et largeur).
              Si on bascule en horizontal, la fenêtre modale conserve les dimensions qu'elle avait en vertical et si on rebascule en vertical elle ne se place plus correctement au centre !
              De même, si on modifie la taille de la fenêtre écran, la fenêtre modale conserve la taille qu'elle avait dans le premier écran.
              Ces soucis sont les mêmes avec le site de nonumber (donc ce n'est pas mon site qui est en cause).

              Quant à JCE-mediabox, il fonctionne également avec les mêmes soucis de redimensionnement et un code plus lourd.
              Je pense que je vais utiliser modals car le code à insérer est simple.

              Je laisse le sujet non réglé car je n'ai pas la solution avec les iframes et j'aimerais bien savoir comment faire par cette méthode.
              GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
              Le terrier de Fynhooft : http://patrick.gauwin.free.fr
              Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

              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