Is it possible to open a lightbox in Joomla 3.9 from an external link inside an Epub?

Question

I'm a writer.

I'm creating an enhanced Epub novel with Sigil. Within the novel, I display small size pictures. For each picture, I want the reader to click on the legend below the picture that will direct them directly to the picture in a lightbox (or modal or featherlight) on my future website with a code like this :

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

When the reader closes the lightbox (or modal or featherlight), the page of my website, where a smaller sized image (along with other smaller pictures)is displayed, appears.

My future website will be with Joomla 3 with Astroid Framework/template.

I read about BS modal, BS lightbox, Featherlight but I'm lost. I want to do my own clean code with the least plugins/modules possible.

Is it possible to make a link (from an Epub or even an other webpage) to an opened "lightbox (modal ?) image" on a website ? And when you close the lightbox/modal image, the page containing the lightboxe/modal code appears ?

Thanks a lot.

Lise

Answer 1

I personally use two extensions to trigger modals depending on requirements - Engagebox (where I can create modals and specify triggers etc) and Regular Labs Modals (where I can specify a class that converts the link into a modal).

With Regular Labs Modals, you could just add a class to the link and the work would be all done.

However, you can also do it with a few simple steps as I found on the Joomla forum.

<?php
JHTML::_('behavior.modal');
echo '<a class="modal" href="' . JURI::current() . '?tmpl=component">open in pop-up</a>';
?>

This line loads the modal behaviour. You may not need to trigger this as your template could already be loading it. It only needs to load once on the page.

JHTML::_('behavior.modal');

Adding class="modal" to the link will then open it in the modal.

Adding the parameter ?tmpl=component to the URL finishes the process for when it's a page you're loading instead of an image - the component template is a special file in Joomla templates called component.php, and basically it's a cleanskin version of the index.php file, loading only (in most cases) the main content area for the template.

This keeps the modal view of what you're loading clean.

In your case the following would be all you need if the URL is an image you want to load in the modal, assuming that JHTML::_('behavior.modal'); is loading in the template:

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

Experiment with your epub link as to whether it additionally requires ?tmpl=component

Answer 2

after days of searching I found my answer here :

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

On page #2 that I call "page2", I have this modal which is hidden on the page because I want so :

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

Then, to launch the modal on page load, I place in my personal JS file (replacing $ by jQuery, because I'm on Joomla)

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

On page #1 or as a link on a Epub (tested), I use this :

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

This link opens a new window where myModal is automatically loaded.

When I click outside the modal, I return to the page where the modal is hidden and other elements appear.

All I have to do is change the ID of the modal I create to repeat the event.

In order to use jQuery and modal, I placed inside the index.php of my Astroid template (MyJoomla/template/my_Astroid_Template/index.php)

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

Like this

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

I also added a link to jQuery.js and to my personnal js file in the custom code area of Astroid Framework, before /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 -->

That's it you can see the result on my website : https://lise-whales.com/