1

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

1
  • Welcome Lise; please take our tour while you wait for feedback/support.
    – mickmackusa
    Jul 24 at 21:59
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

2
  • Thanks @PatrickJackson, but I don't want to popup a page in a modal. I want to make a link to an image in a modal with the page which appears in the back so that when people close the modal, the page where it comes from appears and they can navigate on it afterwards. I'll look at EngageBox if I can't find an answer in the future. Thanks again.
    – Lise
    Jul 28 at 15:51
  • <a href="https://mysite.com/picture1.jpg" class="modal">Picture of Redwoods</a> will pop up just the image in the modal. Your answer below makes it far more complicated, as you can just make sure the Joomla function loads JHTML::_('behavior.modal'); in your template, then add class="modal" to the link and it then loads it with the built in function rather than needing to add additional code. Your method below will work: It's just not taking advantage of built in functionality in Joomla. Aug 3 at 9:45
1

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.