web-dev-qa-db-fra.com

Est-il possible d'ouvrir une boîte de lumière dans Joomla 3.9 à partir d'un lien externe à l'intérieur d'un EPUB?

Je suis écrivain.

Je crée un roman d'Epub amélioré avec SIGIL. Dans le roman, j'affiche des images de petite taille. Pour chaque image, je souhaite que le lecteur clique sur la légende sous l'image qui les dirigera directement sur la photo dans une logicielle (ou modale ou de Featherlight) sur mon futur site Web avec un code comme celui-ci:

<p>
<a href="https://example.com/#picture_opened_in_a_lightbox">Picture of Redwoods</a>
</p>

Lorsque le lecteur ferme la videur (ou modal ou de Featherlight), la page de mon site Web, où une image de taille plus petite (ainsi que d'autres images plus petites) est affichée, apparaît.

Mon futur site Web sera avec Joomla 3 avec Framework/Modèle Astroid.

J'ai lu environ BS Modal, BS Lightbox, Featherlight mais je suis perdu. Je veux faire mon propre code de nettoyage avec les moindres plugins/modules possibles.

Est-il possible de créer un lien (d'un EPUB ou même d'une autre page Web) à une image ouverte "Lightbox (modale?) Image" sur un site Web? Et lorsque vous fermez la sélection/image modale, la page contenant le code Lightboxe/modal apparaît?

Merci beaucoup.

Lise

joomla-3.9modalweblinks
1
Lise

après des jours de recherche, j'ai trouvé ma réponse ici:

https://stackoverflow.com/questions/15090084/how-to-open-bootstrap-modal-as-soon-as-page-opens-son-modal-id-is-present-in-url

À la page n ° 2, j'appelle "page2", j'ai ce modal qui est caché sur la page parce que je le veux:

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

Ensuite, pour lancer le chargement modal de la page, je place dans mon fichier JS personnel (remplaçant $ par jQuery, car je suis sur Joomla)

jQuery(document).ready(function() {
    if(window.location.href==='https://mysite.com/page2#myModal'){
        jQuery('#myModal').modal('show');
    };
});

À la page 1 ou en tant que lien sur un EPUB (testé), j'utilise ceci:

<a alt="lien vers" href="https://mysite.com/page2#myModal" target="_blank">Link to page that launch #myModal on load</a>

Ce lien ouvre une nouvelle fenêtre où MyModal est automatiquement chargée.

Lorsque je clique en dehors de la modale, je retourne à la page où le modal est masqué et que d'autres éléments apparaissent.

Tout ce que je dois faire, c'est changer l'identifiant du modal que je crée pour répéter l'événement.

Afin d'utiliser jQuery et modal, j'ai placé à l'intérieur de l'index.php de mon modèle astroid (myjoombla/template/my_astroid_template/index.php)

JHtml::_('jquery.framework');
JHtml::_('behavior.modal');

Comme ça

<?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);
?>

J'ai également ajouté un lien vers JQuery.js et à mon fichier JS personnalisé dans la zone de code personnalisée de la structure Astroid, avant/Body Tag

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

C'est ainsi que vous pouvez voir le résultat sur mon site Web: https://lise-wwales.com/

1
Lise