Modal image popup on click | ONLY FOR ADVACED Webmasters

nova4x

BE AWARE !!!

I'M HIGHLY CUSTOMIZING MY PRODUCTION FLARUM SITE AND I PRESENT MY ADAPTATIONS TO SHOW HOW POWERFUL AND FLEXIBLE FLARUM IS

...BUT YOU MUST KNOW WHAT YOU DO AND ALL AT YOUR OWN RISK

I found the inspiration in this article and I modified the code according to my exigences

https://www.w3schools.com/howto/howto_css_modal_images.asp

STEP 1

I installed the wonderful Flagrow file upload extension and I thank him for his job

https://github.com/flagrow/flarum-ext-image-upload

STEP 2

I inserted a custom header with the simple javascript code and the needed html elements

<script type="text/javascript">
    function clickHandler(e) {
        var elm, evt = e ? e:event;

    if (evt.srcElement) elm = evt.srcElement;
    else if (evt.target) elm = evt.target;

    if (elm.tagName.toUpperCase() == "IMG" && elm.parentElement.tagName.toUpperCase() == "P") {
        var modal = document.getElementById("imgModal");
        var modalImg = document.getElementById("img01");
        var captionText = document.getElementById("imgCaption");

        modal.style.display = "block";
        modalImg.src = elm.src;
        captionText.innerHTML = elm.alt;
    }

    return true;
}

document.onclick = clickHandler;
</script>

<div id="imgModal" class="imgModal">
    <button id="imgClose" class="imgClose" type="button"  onclick="document.getElementById('imgModal').style.display='none'">CLICK SULL'IMMAGINE E FRECCE PER SCORRERLA, CLICK QUI PER CHIUDERE</button>
    <img id="img01" class="imgModal-content">
    <div id="imgCaption"></div>
</div>

STEP 3

Then I added the plain css, always in customization section of my FLARUM site

/* MODAL POPUP IMAGES */

/* Style the Image Used to Trigger the Modal */
.Post-body > p img {
    cursor: pointer;
    transition: 0.5s;
}

.Post-body > p img:hover {
    opacity: 0.5;
}

/* The Modal (background) */
.imgModal {
    display: none;
    position: fixed;
    z-index: 2000;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
}

/* Modal Content (Image) */
.imgModal-content {
    z-index: 3000;
    margin: auto;
    display: block;
    width: 100%;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#imgCaption {
    margin: auto;
    display: block;
    width: 80%;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.imgModal-content, #imgCaption { 
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.5s;
    animation-name: zoom;
    animation-duration: 0.5s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.imgClose {
    position: absolute;
    top: 50px;
    right: 50px;
    z-index: 4000;
    color: #000000;
    background-color: #bababa;
    font-size: 24px;
    font-weight: bold;
    transition: 0.5s;
}

.imgClose:hover,
.imgClose:focus {
    color: #bababa;
    background-color: #000000;
    text-decoration: none;
    cursor: pointer;
}

...and when the mouse passes over an image the cursor changes, the image becomes semi-transparent, click and you have a full screen popup with the close button

You can translate the button text as: "CLICK ON THE IMAGE AND USE THE ARROWS TO SCROLL, CLICK HERE TO CLOSE"

Feel free to visit and test my FLARUM PRODUCTION site (please use FLARUM TAG)

http://nova4x.com
https://nova4x.eu

And here the two shots of the mouse over an image and the following popup

luceos

nova4x I installed the wonderful Flagrow file upload extension and I thank him for his job

https://github.com/flagrow/flarum-ext-image-upload

flagrow/flarum-ext-image-upload is depreciated, please use flagrow/upload it offers the features of the old extension and more..

nova4x

Good Morning! ...at least here in Italy

I updated the flagrow/upload extension as indicated by Luceos, and it all works the same

I ported a couple of improvements

In javascript a better identification of the IMG tag within the .Post-body class

if (elm.tagName.toUpperCase() == "IMG" && elm.parentElement.parentElement.className == "Post-body") {
     ...the same code...
}

...and I put a sort of FLASHING EFFECT on the popup image when you click to scroll it

/* Modal Content (Image) */
.imgModal-content {
    z-index: 3000;
    margin: auto;
    display: block;
    width: 100%;
    cursor: pointer;
}

.imgModal-content:active {
    border: 5px solid #00ff00;
    cursor: all-scroll;
}

I'm a professional trader and now I'm working EURUSD on London market opening, in a couple of hours I'll finish my job and I'll be free to dedicate to my job production site powered by FLARUM

My target is to transform this solution in an extension

It should be simple, since it's only javascript + css and no need to code in php or to touch the database

...if wordpress has the IMAGE POPUP PLUGIN... well, also FLARUM MUST HAVE IT !!!

jordanjay29

Sounds like something Upload users could find useful. Why don't you submit a PR to the repo on Github?

nova4x

Thanks for the suggestion! It's real a good idea

nova4x

I just targeted my trading and now I can dedicate all the rest of the day to study how FLARUM extensions work

I graduated in software engineering in 1991 and for 15 years I have developed TS and EA = Trading Systems and Expert Advisers, the software that banks and great corporations use to elaborate a huge amount of data in milliseconds to trade the money exchange

Then I told "But because have I to make money to others?" so I developed my own trading system using the earned experience and 10 years ago I become a professional forex trading

I'm a bit rusty and I'm updated to 10 years ago technology = C# + .NET + SQL

I don't know anything about php, composer and so on... but even so I only followed the instructions on github and I moved my PRODUCTION site to FLARUM in half an hour without problems

Only to witness how simple and reliable FLARUM is

Ralkage

Thanks for the hack!

nova4x

Good Morning from Italy!

I'm transforming this simple solution in a FLARUM EXTENSIONS

Infact it works as with the flagrow/upload extension as with the bbcode inserted images

...but I found a problem...

I consider the flagrow/upload an exceptional and useful tool, but yesterday I noticed that if you transfer your site through FTP or you backup a zip and then restore it... well, you loss all the links to uploaded images

Indeed flagrow name the uploaded files in the format

hh:mm:filename.ext

...using the colon to uniquely identify the files with upload hour:minutes:and-then-original-filename.ext

When you FTP your site or you backup/restore it, I don't know why, but the colon is substituted by the underscore and you lose the links and all the images disappear from your post

I'm coding a simple php script that restores the colons, so you call it after the ftp transfer or the backup restore and it solves the problem

I'm a professional forex trader and now I have to follow my Trading System on London opening market, a couple of hours and then I'll dedicate to this job

luceos

nova4x When you FTP your site or you backup/restore it, I don't know why, but the colon is substituted by the underscore and you lose the links and all the images disappear from your post

What ftp client do you use? You might want to check its settings.

nova4x

nova4x ...but I found a problem...

flagrow/upload extension names the uploaded files using the colon to uniquely identify the files with upload hour:minutes:and-then-original-filename.ext

When you FTP your site or you backup/restore it, I don't know why, but the colon is substituted by the underscore and you lose the links and all the images disappear from your post

I often tell that I graduated as software engineer in 1991 but 10 years ago I became a professional forex trader instead of developing Automatic Trading Systems for banks and other institutions

I have a professional knowledge of C#/.NET + mql4 + cAlgo + SQL + plain CSS all the tools I used to develop my own Automatic Trading System and now to constantly improve it

I have only a poor knowledge of PHP and I never heard before about LESS, Composer and so on

This to tell that despite my limitations I could EASILY migrate my JOB PRODUCTION SITE to FLARUM simply following the github instructions

Now I'm HIGHLY customizing my site as relaxing activity while my money are running for me and I'm more and more happy of my choose to left DotNetNuke and phpbb/wordpress for FLARUM

Feel free to see or test my PRODUCTION FLARUM site (please use FLARUM TAG) as you can image it's about forex trading

http://nova4x.com
https://nova4x.eu (...and you can test how FLARUM works fine also through cloudflare)

...after my long talk this is the solution for who experiences my same problem

Simply copy the below code in a php script and place it in your site ASSETS/FILES dir and call its url i.e. http://mysite.com/assets/files/myscript.php to restore the colons instead of the underscores

Note: I saw better solutions i.e. global() ... but I'm still learning php!

<?php
$dirs = scandir('.');

foreach ($dirs as $dir) {
    if ($dir === '.' or $dir === '..') {
        continue;
    }

if (is_dir('./' . $dir)) {
    $files = scandir($dir, 1);
    
    foreach ($files as $file0) {
        if ($file0 === '.' or $file0 === '..' or is_dir('./' . $dir . '/' . $file0)) {
            continue;
        }

        if (substr($file0, 2, 1) == '_' && substr($file0, 5, 1) == '_') {
            // echo $dir . '/' . $file0 . ' -> ' . substr($file0, 2, 1) . ' -> ' . substr($file0, 5, 1) . '<br/>';
            $file1 = substr_replace($file0, ':', 2, 1);
            $file1 = substr_replace($file1, ':', 5, 1);
            rename($dir . '/' . $file0, $dir . '/' . $file1);
        }
    }
}
}

echo 'DONE!';

WiseClock

luceos He might have a Windows server. Since you can't have colons in a file name under Windows (because they are used for drive names) some FTP tools will auto convert the file name when transferring.

nova4x

Thanks for the help

This is my hosting and I use the implemented zip service and the same for ftp

cPanel Version 62.0 (build 16)
Apache Version 2.4.25
PHP Version 5.6.30
MySQL Version 10.1.21-MariaDB-cll-lve
Architecture x86_64
Operating System linux

However the problem is minimum, I'm writing a simple php script that identifies the upload files in the ASSETS/FILES/...subdirs... and replaces underscores with a colon

nova4x

It's a tiny problem

Yesterday I wrote the simple php script that scans the files within all ASSETS/FILES sub dirs

Later I complete it with the file recognition and the replacement of the first two underscores back to the original colons

So if you have the same problem, you'll simply put the complete script in your site ASSETS/FILES and then you call the address https://yoursite.com/assets/files/the-script.php

<?php
$dirs = scandir('.');

foreach ($dirs as $dir) {
    if ($dir === '.' or $dir === '..') {
        continue;
    }

    if (is_dir('./' . $dir)) {
        $files = scandir($dir, 1);
        
        foreach ($files as $file) {
            if ($file === '.' or $file === '..' or is_dir('./' . $dir . '/' . $file)) {
                continue;
            }

            echo $dir . '/' . $file . '<br/>';
        }
    }
}

nova4x

I want to transform this trick in an extension

If wordpress has the modal popup image on click, then also FLARUM must have it!

Waiting for the extension (before I must learn how to build it!) you can activate the modal popup in two simple steps

You can find and test it in my PRODUCTION FLARUM site (it's about my job as professional forex trader) please use FLARUM TAG or simply click on the images inserted in discussions

http://nova4x.com
https://nova4x.eu

This is the last update and it works with all the images, as using flagrow/upload extension as using bbcode [img] or [url]

STEP 1

Copy or add at the end of your CUSTOM HEADER this simple javascript + html elements

<script type="text/javascript">
function clickHandler(e) {
	var elm, evt = e ? e:event;

if (evt.srcElement) elm = evt.srcElement;
else if (evt.target) elm = evt.target;

if (elm.tagName.toUpperCase() == "IMG" && elm.parentElement.parentElement.className == "Post-body") {
	var modal = document.getElementById("imgModal");
	var modalImg = document.getElementById("img01");
	var captionText = document.getElementById("imgCaption");

	modal.style.display = "block";
	modalImg.src = elm.src;
	captionText.innerHTML = elm.alt;
}

return true;
}

document.onclick = clickHandler;
</script>

<div id="imgModal" class="imgModal">
    <button id="imgClose01" class="imgClose" type="button"  onclick="document.getElementById('imgModal').style.display='none'">PRIMA CLICK SULL'IMMAGINE POI FRECCE SÙ E GIÙ | CLICK QUI PER CHIUDERE</button>

<!-- Modal Content (The Image) -->
<img id="img01" class="imgModal-content">

<!-- Modal Caption (Image Text) -->
<div id="imgCaption"></div>
</div>

STEP 2

Copy or add at the end of your CUSTOM CSS this PLAIN css

/* MODAL POPUP IMAGES */

/* Style the Image Used to Trigger the Modal */
.Post-body > p img {
    cursor: pointer;
    transition: 0.5s;
}

.Post-body > p img:hover {
    opacity: 0.5;
}

/* The Modal (background) */
.imgModal {
    display: none;
    position: fixed;
    z-index: 2000;
    padding-top: 55px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
}

/* Modal Content (Image) */
.imgModal-content {
    z-index: 3000;
    margin: auto;
    display: block;
    width: 100%;
    cursor: pointer;
}

.imgModal-content:active {
    border: 10px solid #00ff00;
    border-radius: 10px;
    cursor: all-scroll;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#imgCaption {
    margin: auto;
    display: block;
    width: 80%;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.imgModal-content, #imgCaption { 
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.5s;
    animation-name: zoom;
    animation-duration: 0.5s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.imgClose {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 4000;
    color: #000000;
    background-color: #bababa;
    font-size: 24px;
    font-weight: bold;
    transition: 0.5s;
}

.imgClose:hover,
.imgClose:focus {
    color: #bababa;
    background-color: #000000;
    text-decoration: none;
    cursor: pointer;
}

...and that's all!