Pop up image when clicked

[iAmG-r00t]

@LazyRen quick question, so most blogs I write require images for an explanation. The issue is the images show pretty small texts on the site and I was thinking is there a way to make images pop up once they have been clicked to give someone an opportunity to zoom and read the contents of the image better?

[LazyRen]

Well, it seems Hydejack theme does not provide such extension, but there are Lightbox2 / Magnific Popiop and others that can be used with Jekyll.

I'll let you know if I enable one in near future. It seems a good feature to have.

[iAmG-r00t]

Okay, I will be waiting 😄

[LazyRen]

A little hack you can use is to wrap up the image with the link to the image again. So it links to the image itself when clicked, which is zoomable. Not pretty, but easy.

[![img](/images/test_img.jpg)](/images/test_img.jpg)

[LazyRen]

lightbox plugin is also very easy to install. You only need to add two files (follow the instruction), and add below code snippets.

<!-- file: _include/head/scripts.html -->
{% if site.lightbox %}
  <script type="text/javascript" src="/assets/js/lightbox.js"></script>
{% endif %}

<!-- file: _include/head/link-static.html -->
{% if site.lightbox %}
  <link rel="stylesheet" href="/assets/css/lightbox.css">
{% endif %}

The downside is that you still have to create link with below syntax and most importantly popup image is just the same size as the original one from the post. Therefore I see no reason to use this extension for myself...

[![img](/images/test_img.jpg)](/images/test_img.jpg)

The best way would be to go with the photoswipe but it requires for you to set width/height of the all images and need to write down image in their syntax. I wish to keep the syntax of the markdown ![img](/images/test_img.jpg), which requires some tweak with the javascript I guess...

Not really an expert nor a fan of JS, so I'm not sure I'll be working on this further. I'll make sure to let you know if I ever do this.

[iAmG-r00t]

Okay, I will try each of the provided solutions I see. But what would you recommend currently before finding a way with photoswipe?

[LazyRen]

Done the implementation. I chose lightbox plugin because it looked easy to apply. I had to modify it a bit but it works pretty well. Check out my blog for the result & #67 for the actual change. It won't be hard for you to apply this to your blog.
The post also might help.
Wish you luck and thank you for a great feature suggestion :)