Tweet
Bonjour,
Joomla 3.9.28
Astroid Framework 2.5.2
Astroid Template One 1.3.2
Je n'ai pas de question mais partage une info que j'ai résolue et qui pourrait intéresser certain(e)s. Peut-être même qu'elle pourra être améliorée.
Je suis en train de construire mon site et je veux pouvoir ouvrir une photo dans un modal en cliquant sur un lien provenant d'une autre page ou, dans mon cas, d'un Epub. Ce modal (photo) s'ouvre au chargement de la page et lorsque je clique ensuite à côté, le modal disparaît et la page s'affiche.
J'ai posé ma question sur https://joomla.stackexchange.com/ (ici et aussi pour comprendre pourquoi je n'arrivais pas au départ à utiliser un script jQuery pour faire fonctionner un simple lien là) mais j'ai fini par trouver la solution ici :
Donc, sur une page #2 que j'appelle pour l'exemple "page2", J'ai ce modal (que j'ai décidé de garder caché (sans lien sur la page)) qui affiche une photo :
Ensuite, pour lancer le modal au démarrage de la page, j'ai placé dans mon fichier perso JS (en remplaçant $ par jQuery, parce que c'est sur Joomla)
Sur ma page #1 ou en tant que lien dans un Epub (testé avec Chrome e-reader), j'utilise ce lien :
Ce lien ouvre un nouvel onglet où myModal est automatiquement lancé.
Quand je clique à l'extérieur de la photo du modal, je reviens sur la page où le modal est caché et où d'autres éléments se trouvent (dans mon cas, une lightbox).
Ensuite, tout ce que j'ai à faire, c'est changer l'ID du modal avec une nouvelle photo pour répéter l'événement, comme je le souhaite (mes lecteurs, qui n'ont qu'une vignette de la photo sur leur Epub, peuvent voir la photo en grand grâce à ce principe et ensuite continuer de regarder les autres en revenant à la page principale ou tout fermer et continuer leur lecture).
Afin de pouvoir utiliser jQuery et modal, j'ai placé dans l'index.php de mon template Astroid (MyJoomla/template/my_Astroid_Template/index.php)
Comme ça :
J'ai aussi ajouté un script vers jQuery.js et vers mon fichier personnel js (que j'ai sauvegardé dans /media/system/js/)dans la zone de code personnalisé du template Astroid, dans la zone "avant </body>"
Voilà, vous pouvez voir le résultat temporaire sur mon site web : https://lise-whales.com/
Joomla 3.9.28
Astroid Framework 2.5.2
Astroid Template One 1.3.2
Je n'ai pas de question mais partage une info que j'ai résolue et qui pourrait intéresser certain(e)s. Peut-être même qu'elle pourra être améliorée.
Je suis en train de construire mon site et je veux pouvoir ouvrir une photo dans un modal en cliquant sur un lien provenant d'une autre page ou, dans mon cas, d'un Epub. Ce modal (photo) s'ouvre au chargement de la page et lorsque je clique ensuite à côté, le modal disparaît et la page s'affiche.
J'ai posé ma question sur https://joomla.stackexchange.com/ (ici et aussi pour comprendre pourquoi je n'arrivais pas au départ à utiliser un script jQuery pour faire fonctionner un simple lien là) mais j'ai fini par trouver la solution ici :
Donc, sur une page #2 que j'appelle pour l'exemple "page2", J'ai ce modal (que j'ai décidé de garder caché (sans lien sur la page)) qui affiche une photo :
Code HTML:
<!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-body text-center"> <img src="https://mysite.com/picture1.jpg"> </div> </div> </div> </div>
Code:
jQuery(document).ready(function() {
if(window.location.href==='https://mysite.com/page2#myModal'){
jQuery('#myModal').modal('show');
};
});
Code HTML:
<a alt="lien vers" href="https://mysite.com/page2#myModal" target="_blank">lien vers la page qui va ouvrir #myModal au démarrage de la page</a>
Quand je clique à l'extérieur de la photo du modal, je reviens sur la page où le modal est caché et où d'autres éléments se trouvent (dans mon cas, une lightbox).
Ensuite, tout ce que j'ai à faire, c'est changer l'ID du modal avec une nouvelle photo pour répéter l'événement, comme je le souhaite (mes lecteurs, qui n'ont qu'une vignette de la photo sur leur Epub, peuvent voir la photo en grand grâce à ce principe et ensuite continuer de regarder les autres en revenant à la page principale ou tout fermer et continuer leur lecture).
Afin de pouvoir utiliser jQuery et modal, j'ai placé dans l'index.php de mon template Astroid (MyJoomla/template/my_Astroid_Template/index.php)
Code:
JHtml::_('jquery.framework');
JHtml::_('behavior.modal');
Code:
<?php
/**
* @package Astroid Framework
* @author JoomDev https://www.joomdev.com
* @copyright Copyright (C) 2009 - 2020 JoomDev.
* @license https://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
*/
// No direct access.
defined('_JEXEC') or die;
defined('_ASTROID') or die('Please install and activate <a href="https://www.astroidframework.com/" target="_blank">Astroid Framework</a> in order to use this template.');
if (file_exists(__DIR__ . "/helper.php")) {
require_once __DIR__ . "/helper.php"; // Template's Helper
}
JHtml::_('jquery.framework');
JHtml::_('behavior.modal');
$document = Astroid\Framework::getDocument(); // Astroid Document
// Output as HTML5
$this->setHtml5(true);
?>
Code:
<!DOCTYPE html> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <!-- End - jQuery --> <!-- Mon JS --> <script type="text/javaScript" src="/media/system/js/monjs.js"></script> <!-- End - Mon JS -->
Voilà, vous pouvez voir le résultat temporaire sur mon site web : https://lise-whales.com/
