{"id":1738,"date":"2015-01-14T16:14:13","date_gmt":"2015-01-14T15:14:13","guid":{"rendered":"http:\/\/denbeke.be\/blog\/?p=1738"},"modified":"2015-01-14T16:23:26","modified_gmt":"2015-01-14T15:23:26","slug":"create-beautiful-photo-galleries-with-justified-gallery","status":"publish","type":"post","link":"https:\/\/denbeke.be\/blog\/webdevelopment\/create-beautiful-photo-galleries-with-justified-gallery\/","title":{"rendered":"Create beautiful photo galleries with ‘Justified Gallery’"},"content":{"rendered":"

Organizing pictures of different sizes into a gallery can be a hard task, but using ‘Justified Gallery’<\/a>, you can make good-looking \u2014 and responsive \u2014 photo galleries in minutes. ‘Justified Gallery’ is written in javascript, and renders the photos the same way as\u00a0Flickr.<\/p>\n

\"Example<\/a>
Example of ‘Justified Gallery’<\/figcaption><\/figure>\n

First of all, you need to include the script and stylesheet, which you can find on the project\u00a0homepage<\/a>. Since this is a jQuery<\/a> plugin, you must also include jQuery…<\/p>\n

Now you’re ready to go.
\nThe basic HTML code for the gallery looks like this:<\/p>\n

<div id=\"gallery\">\r\n    <a href=\"path\/to\/image1.jpg\">\r\n        <img alt=\"Caption for my image\" src=\"path\/to\/image1_thumbnail.jpg\" \/>\r\n    <\/a>\r\n    <a href=\"path\/to\/image2.jpg\">\r\n    \t    <img alt=\"Another caption\" src=\"path\/to\/image2_thumbnail.jpg\" \/>\r\n    <\/a>\r\n    ...\r\n<\/div><\/code><\/pre>\n
After you’ve created the HTML for your gallery,\u00a0\u00a0you need to run\u00a0justifiedGallery<\/code> on that div<\/code>.
\nSomewhere on the page you put a script<\/code> tag, or you make a separate javascript file for it.<\/p>\n
$( document ).ready(function() {\r\n    $(\"#gallery\").justifiedGallery(\r\n    {\r\n    \t    rowHeight : 250,\r\n    \t    lastRow : 'nojustify',\r\n    \t    margins : 5\r\n    }\r\n    );\r\n});<\/code><\/pre>\n
The rowHeight<\/code> defines the height that ‘Justified Gallery’ will match. Depending on the set of images it may be a bit different:<\/p>\n
However, the justification may resize the images, and, as a consequence, the row height may be a little bit different than 160px. This means that the row height is intended as your preferred height, and it is not an exact measure. If you want that the row height remains strictly fixed, you can use the fixedHeight<\/code> option: this option will crop the images a little bit to make sure that the row height doesn\u2019t change.<\/em><\/p><\/blockquote>\n
lastRow<\/code> defines how the last row will be handled. If you want empty space after the last image, use nojustify<\/code>. If you want the last row to fill the whole page width, use justify<\/code>. You can also hide the row using hide<\/code>.<\/p>\n
Obviously margins<\/code> sets the margin (in pixels) between the images.<\/p>\n
‘Justified Gallery’ is very well documented on the project homepage. Take a look there for the various other options!<\/p>\n","protected":false},"excerpt":{"rendered":"
Organizing pictures of different sizes into a gallery can be a hard task, but using ‘Justified Gallery’, you can make good-looking \u2014 and responsive \u2014 photo galleries in minutes. ‘Justified Gallery’ is written in javascript, and renders the photos the same way as\u00a0Flickr. First of all, you need to include the script and stylesheet, which […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[112],"tags":[58,243,242],"yoast_head":"\nCreate beautiful photo galleries with 'Justified Gallery' – DenBeke<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/denbeke.be\/blog\/webdevelopment\/create-beautiful-photo-galleries-with-justified-gallery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create beautiful photo galleries with 'Justified Gallery' – DenBeke\" \/>\n<meta property=\"og:description\" content=\"Organizing pictures of different sizes into a gallery can be a hard task, but using ‘Justified Gallery’, you can make good-looking \u2014 and responsive \u2014 photo galleries in minutes. ‘Justified Gallery’ is written in javascript, and renders the photos the same way as\u00a0Flickr. First of all, you need to include the script and stylesheet, which […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/denbeke.be\/blog\/webdevelopment\/create-beautiful-photo-galleries-with-justified-gallery\/\" \/>\n<meta property=\"og:site_name\" content=\"DenBeke\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-14T15:14:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-01-14T15:23:26+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/denbeke.be\/blog\/wp-content\/uploads\/2015\/01\/Justified-Gallery-example-1024x546.png\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:creator\" content=\"@MthsBk\" \/>\n<meta name=\"twitter:site\" content=\"@MthsBk\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/denbeke.be\/blog\/#website\",\"url\":\"https:\/\/denbeke.be\/blog\/\",\"name\":\"DenBeke\",\"description\":\"Mathias Beke\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/denbeke.be\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/denbeke.be\/blog\/webdevelopment\/create-beautiful-photo-galleries-with-justified-gallery\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/denbeke.be\/blog\/wp-content\/uploads\/2015\/01\/Justified-Gallery-example-1024x546.png\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/denbeke.be\/blog\/webdevelopment\/create-beautiful-photo-galleries-with-justified-gallery\/#webpage\",\"url\":\"https:\/\/denbeke.be\/blog\/webdevelopment\/create-beautiful-photo-galleries-with-justified-gallery\/\",\"name\":\"Create beautiful photo galleries with 'Justified Gallery' – DenBeke\",\"isPartOf\":{\"@id\":\"https:\/\/denbeke.be\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/denbeke.be\/blog\/webdevelopment\/create-beautiful-photo-galleries-with-justified-gallery\/#primaryimage\"},\"datePublished\":\"2015-01-14T15:14:13+00:00\",\"dateModified\":\"2015-01-14T15:23:26+00:00\",\"author\":{\"@id\":\"https:\/\/denbeke.be\/blog\/#\/schema\/person\/386878f712fe3fe22227216f087772dc\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/denbeke.be\/blog\/webdevelopment\/create-beautiful-photo-galleries-with-justified-gallery\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/denbeke.be\/blog\/#\/schema\/person\/386878f712fe3fe22227216f087772dc\",\"name\":\"Mathias Beke\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/denbeke.be\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/015ba35e6ce4f5859e3888ca99807575?s=96&d=mm&r=g\",\"caption\":\"Mathias Beke\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/denbeke.be\/blog\/wp-json\/wp\/v2\/posts\/1738"}],"collection":[{"href":"https:\/\/denbeke.be\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/denbeke.be\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/denbeke.be\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/denbeke.be\/blog\/wp-json\/wp\/v2\/comments?post=1738"}],"version-history":[{"count":10,"href":"https:\/\/denbeke.be\/blog\/wp-json\/wp\/v2\/posts\/1738\/revisions"}],"predecessor-version":[{"id":1752,"href":"https:\/\/denbeke.be\/blog\/wp-json\/wp\/v2\/posts\/1738\/revisions\/1752"}],"wp:attachment":[{"href":"https:\/\/denbeke.be\/blog\/wp-json\/wp\/v2\/media?parent=1738"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/denbeke.be\/blog\/wp-json\/wp\/v2\/categories?post=1738"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/denbeke.be\/blog\/wp-json\/wp\/v2\/tags?post=1738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}