Request: Add Lightbox option

[0E800]

Would like to have the images that are posted to include some lightbox functionality. Currently users have to download the image or view it in a new tab in order to see a bigger size.

I would like to see something like:

http://codepen.io/gschier/pen/HCoqh

Embedded CSS:

<style>
  .thumbnail {
  max-width: 40%;
}

/** LIGHTBOX MARKUP **/

.lightbox {
    /** Default lightbox to hidden */
    display: none;

    /** Position and style */
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
}

.lightbox img {
    /** Pad the lightbox image */
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;
}
.lightbox:target {
    /** Remove default browser outline */
    outline: none;

    /** Unhide lightbox **/
    display: block;
}

</style>

HTML:

<a href="#img1">
  <img src="http://insomnia.rest/images/screens/main.png" class="thumbnail">
</a>

<!-- lightbox container hidden with CSS -->
<a href="#_" class="lightbox" id="img1">
  <img src="http://insomnia.rest/images/screens/main.png">
</a>

The trick would be the code needed to generate a new #imgID for each posted image on the thread.

I am guessing this could be achieved by adding the .lightbox css to the custom css area and creating 2 sources to the image, the first one appending style="thumbnail" the other image source appending style="lightbox" ?

Thank you.

[luceos]

The drawback of adding the full size image to the page (albeit hidden) will be additional loading time and a tremendous hit on performance. I'm not too sure this will be something we would want. On the other hand, loading the full image only after the thumbnail has been clicked makes more sense.

I'm just a bit confused how to work with this in combination of the resize option in the extension configuration. The lightbox would be optional as well.

[jtojnar]

Lightbox could be enabled with the resize option. The extension would then produce the following code:

[![example.png](https://flagrow.dev/assets/files/2017-04-03/18:17:190-example-200px.png)](https://flagrow.dev/assets/files/2017-04-03/18:17:190-example.png){.lightbox}

where {.lightbox} comes from Link attributes.

Simpler syntax could be also generated, for example

![example.png](file:2017-04-03/18:17:190-example.png)

But this would require syntax hooks or something.

[mhanoglu]

For Complete image preview template template need to lightbox realy, requires unique number for each image. And new tag for post title. Thanks.

[tobyzerner]

I'm probably going to need to hack something together for this for a client - @luceos any direction you can give as to how you'd like to see this done?

[luceos]

@tobscure I'm not too sure. Adding a new template to choose from will disable the Lightbox for previous uploads. Enabling it by default on all images will enable it for full width included images.

Perhaps this should be a global option and we add a class to the generated output by default on image related templates which do not include the image full width. In case the option is enabled we can show the lightbox. An alternative is doing some magic, screening the included image with jQuery for its width (height can be ignored I think) and whether it fits within the Post Body, if not we allow a lightbox effect.

[DavideIadeluca]

Adding some sort of lightbox functionality would be much better suited in a separate extension. For anyone still searching for a solution, I can recommend https://github.com/iamdarkle/fancybox. Pardon me for necrobumping this issue.