How to implement justified gallery in blogger?

355 Views Asked by At

Hello amazing people in here! My Goal: Display a Bunch of images neatly on http://1110kd.blogspot.in/ using Justified image gallery by Miro (http://miromannino.github.io/Justified-Gallery/)

Progress till now: step 1: Pasted JS files in head section step-2: tried to post images in a post, also tried to use a HTML widget to imbed the images Now I tried to paste the remaining code at various locations in the template as well as widget, but no success :(

Now looking around for a fix. I am okay with any solution by which I can showcase a responsive image gallery on my blog (Only gallery, nothing else).

[due to inability of self hosting due to various reasons, I am basically trying to convert the blogger in a single page image gallery]

Thank you so much in advance.

2

There are 2 best solutions below

0
On

First, when I try your link, the first thing I see is the following image. You have to fix this before trying to do something else.

Problem

A possible solution will be to use a CDN instead.

So to resume, here's a possible template:

<!DOCTYPE html>
<html>
    <head>
        GooglebaseData goes here ...
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.3/css/justifiedGallery.min.css" />
    </head>
    <body>
        All your content
    </body>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.3/js/jquery.justifiedGallery.min.js"></script>
    <script type="text/javascript">
        $("#basicExample").justifiedGallery();
    </script>
</html>

With blogger, you have to put all your scripts like jquery and script which need it to be between </body> and </html>

4
On

Firstly Down load "justifiedGallery.min.css" and "jquery.justifiedGallery.min.js" then follow this URLhttps://jsfiddle.net/AwadheshVerma/uy0d41f2/