{"id":145,"date":"2014-07-22T12:11:56","date_gmt":"2014-07-22T12:11:56","guid":{"rendered":"http:\/\/topdevs.net\/smart-grid-gallery\/?page_id=145"},"modified":"2016-10-07T12:09:46","modified_gmt":"2016-10-07T12:09:46","slug":"wordpress-gallery-with-captions","status":"publish","type":"page","link":"https:\/\/topdevs.net\/smart-grid-gallery\/wordpress-gallery-with-captions\/","title":{"rendered":"WordPress Gallery With Captions"},"content":{"rendered":"<h1>Looking for WordPress Gallery With Captions?<\/h1>\n<p>You found it! Smart Grid Gallery is a\u00a0WordPress gallery with captions plugin. Image can say a lot by itself, but if you add a small caption to each image in your gallery it will look\u00a0totally different. Express yourself, customize\u00a0caption colors, fonts and \u00a0hover effects\u00a0to fit your precious site design. Use any from more than 600 Google Fonts!\u00a0Also Smart Grid Gallery has different <a title=\"WordPress Grid Gallery Lightbox\" href=\"http:\/\/topdevs.net\/smart-grid-gallery\/wordpress-gallery-lightboxes\/\">lightboxes<\/a>, <a title=\"WordPress Gallery Hover Effects\" href=\"http:\/\/topdevs.net\/smart-grid-gallery\/wordpress-gallery-hover-effects\/\">hover effects<\/a> and support for YouTube and Vimeo videos.<\/p>\n<p>&nbsp;<\/p>\n<div class=\"column-grid column-grid-12\"><div class=\"column column-span-4 column-push-0 column-first\"><\/p>\n<h2>Captions Typography<\/h2>\n<p>Modern web design trends is all about Typography. Make your gallery typography be as\u00a0amazing as your website. Set font size, font weight and font family to any you like easily using our shortcode generator. Or even use famous Google Fonts for your captions like below.<\/p>\n<p>\n<\/div>\n<div class=\"column column-span-8 column-push-0 column-last\"><\/p>\n<div id=\"justified_gallery_uISxAd\" class=\"sgg-style-8 \"><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_lednice-castle.jpg\" data-size=\"1388x1600\" data-caption=\"Castle\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_lednice-castle-260x300.jpg\" data-caption=\"Castle\" alt=\"Castle\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_Bench-Under-Tree.jpg\" data-size=\"1920x1280\" data-caption=\"Under the tree\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_Bench-Under-Tree-420x280.jpg\" data-caption=\"Under the tree\" alt=\"Under the tree\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/BeachSunset.jpg\" data-size=\"1920x1273\" data-caption=\"Beach sunset\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/BeachSunset-420x278.jpg\" data-caption=\"Beach sunset\" alt=\"Beach sunset\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_austriaroad1.jpg\" data-size=\"1920x1440\" data-caption=\"On the road\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_austriaroad1-420x315.jpg\" data-caption=\"On the road\" alt=\"On the road\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_austriaroad2.jpg\" data-size=\"1920x1440\" data-caption=\"Windmill\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_austriaroad2-420x315.jpg\" data-caption=\"Windmill\" alt=\"Windmill\"\/><\/a><a class=\"sgg-lightbox-item mfp-iframe\" data-type=\"video\" href=\"https:\/\/www.youtube.com\/watch?v=FNJ09RwY6k8\" data-caption=\"Sea\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/tumblr_n396iwHV9n1slhhf0o1_1280-225x300.jpg\" data-caption=\"Sea\" alt=\"Sea\"\/><\/a><\/div>\n<div id=\"load_more_holder_uISxAd\" style=\"display:none\"><\/div>\n\t\t\t<script type=\"text\/javascript\">\n\t\t\t\t(function($){\n\t\t\t\t\t$(\"#justified_gallery_uISxAd\").justifiedGallery({\n\t\t\t\t\t\tsizeRangeSuffixes : {'lt100': '', 'lt240': '', 'lt320': '', 'lt500': '', 'lt640': '', 'lt1024': ''},rowHeight: 180,\r\nmobileRowHeight: 200,\r\nmargins: 5,\r\nlastRow: \"nojustify\",\r\nfixedHeight: false,\r\ncaptions: true,\r\ncaptionsColor: \"#2ecc71\",\r\ncaptionsOpacity: 0.85,\r\nrandomize: false,\r\nmaxRowHeight: 0,\r\nrel: \"uISxAd\",\r\ntarget: null,\r\nrefreshTime: 250,\r\ncssAnimation: true,\r\ncaptionsAnimationDuration: 500,\r\nimagesAnimationDuration: 300,\r\ncaptionsVisibleOpacity: 0.7,\r\nclass: \"\",\r\n\t\t\t\t\t})\n\t\t\t\t\t.on('jg.complete', function(){\n\t\t\t\t\t\t$(document).ready(function(){\n\t\t\t\t\t\t\tvar pswp_uISxAd = SGGinitPhotoSwipeFromDOM('#justified_gallery_uISxAd',{title: true,\r\nshare: true,\r\nhistory: false,\r\n uid: 'uISxAd' })})\t\t\t\t\t});\n\t\t\t\t\tvar nodes = document.querySelectorAll('#justified_gallery_uISxAd > *'),\n_nodes = [].slice.call(nodes, 0);\nvar getDirection = function (ev, obj) {\n    \/\/ the width and height of the current div\n\tvar w = $(obj).width(),\n\t\th = $(obj).height(),\n\t\t\/\/ calculate the x and y to get an angle to the center of the div from that x and y.\n\t\t\/\/ gets the x value relative to the center of the DIV and \"normalize\" it\n\t\tx = ( ev.pageX - $(obj).offset().left - ( w\/2 )) * ( w > h ? ( h\/w ) : 1 ),\n\t\ty = ( ev.pageY - $(obj).offset().top  - ( h\/2 )) * ( h > w ? ( w\/h ) : 1 ),\n\t\t\/\/ the angle and the direction from where the mouse came in\/went out clockwise (TRBL=0123);\n\t\t\/\/ first calculate the angle of the point,\n\t\t\/\/ add 180 deg to get rid of the negative values\n\t\t\/\/ divide by 90 to get the quadrant\n\t\t\/\/ add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top\/right\/bottom\/left) **\/\n\t\tdirection = Math.round( ( ( ( Math.atan2(y, x) * (180 \/ Math.PI) ) + 180 ) \/ 90 ) + 3 ) % 4;\n\treturn direction;\n};\nvar addClass = function ( ev, obj, state ) {\n    var direction = getDirection( ev, obj ),\n        class_suffix = \"\",\n        iframe = obj.classList.contains(\"mfp-iframe\");\n    obj.className = \"\";\n    if (iframe) {\n        obj.classList.add(\"mfp-iframe\");\n    }\n    obj.classList.add(\"sgg-lightbox-item\");\n    switch ( direction ) {\n        case 0 : class_suffix = '-top';    break;\n        case 1 : class_suffix = '-right';  break;\n        case 2 : class_suffix = '-bottom'; break;\n        case 3 : class_suffix = '-left';   break;\n    }\n    obj.classList.add( state + class_suffix );\n};\n\/\/ bind events\n_nodes.forEach(function (el) {\n    el.addEventListener('mouseenter', function (ev) {\n        addClass( ev, this, 'in' );\n    }, false);\n    el.addEventListener('mouseleave', function (ev) {\n        addClass( ev, this, 'out' );\n    }, false);\n});\t\t\t\t\tWebFontConfig = {\n\tgoogle: { families: [] }\n};\n(function() {\n\tvar wf = document.createElement('script');\n\twf.src = ('https:' == document.location.protocol ? 'https' : 'http') +\n\t\t':\/\/ajax.googleapis.com\/ajax\/libs\/webfont\/1\/webfont.js';\n\twf.type = 'text\/javascript';\n\twf.async = 'true';\n\tvar s = document.getElementsByTagName('script')[0];\n\ts.parentNode.insertBefore(wf, s);\n})();WebFontConfig.google.families.push('Ubuntu');\t\t\t\t\t\t\t\t\tvar galleries = [];\n\t\t\t\tvar gallery = $(\"#justified_gallery_uISxAd\");\n\t\t\t\t$(window).scroll(function() {\n\t\t\t\t\tif ( galleries.length >= 1  ) {\n\t\t\t\t\t\tvar scroll_top = $(window).scrollTop();\n\t\t\t\t\t\tvar scroll_bottom = scroll_top + $(window).height();\n\t\t\t\t\t\tvar gallery_top = $(gallery).offset().top;\n\t\t\t\t\t\tvar gallery_height = $(gallery).innerHeight();\n\t\t\t\t\t\tvar gallery_bottom = gallery_top + gallery_height;\n\t\t\t\t\t\tif( scroll_bottom >= gallery_bottom ) {\n\t\t\t\t\t\t\tvar images = galleries.splice(0,1);\n\t\t\t\t\t\t\tvar image_html = $(\"#load_more_holder_uISxAd\").html(images).text();\n\t\t\t\t\t\t\t$(gallery).append(image_html);\n\t\t\t\t\t\t\t$(gallery).justifiedGallery('norewind');\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\t\t\t\t})(jQuery);\n\t\t\t<\/script>\n\t\t\t\t\t\t<style>\n\t            #justified_gallery_uISxAd .sgg-caption {\n\t\t\t\t\tbackground: rgb(46,204,113);\n\t\t\t\t\tbackground: rgba(46,204,113,0.85);\n\t\t\t\t\tcolor: #e74c3c;\n\t\t\t\t\tfont-size: 2.3em;\n\t\t\t\t\tfont-weight: 900;\n\t\t\t\t\tfont-family: Ubuntu;\n\t\t\t\t}\n\t\t\t\t#load_more_uISxAd {\n\t\t\t\t    background: #444444;\n\t\t\t\t    color: #ffffff;\n\t\t\t\t}\n\t\t\t<\/style>\n        \t\n<p>\n<\/div><\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div class=\"column-grid column-grid-12\"><div class=\"column column-span-8 column-push-0 column-first\"><\/p>\n<div id=\"justified_gallery_Wb49F7\" class=\"sgg-style-2 \"><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_lednice-castle.jpg\" data-size=\"1388x1600\" data-caption=\"Castle\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_lednice-castle-260x300.jpg\" data-caption=\"Castle\" alt=\"Castle\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_Bench-Under-Tree.jpg\" data-size=\"1920x1280\" data-caption=\"Under the tree\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_Bench-Under-Tree-420x280.jpg\" data-caption=\"Under the tree\" alt=\"Under the tree\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_DSC_3334.jpg\" data-size=\"1920x1277\" data-caption=\"In the mountains\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_DSC_3334-420x279.jpg\" data-caption=\"In the mountains\" alt=\"In the mountains\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_austriaroad2.jpg\" data-size=\"1920x1440\" data-caption=\"Windmill\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_austriaroad2-420x315.jpg\" data-caption=\"Windmill\" alt=\"Windmill\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_austriaroad1.jpg\" data-size=\"1920x1440\" data-caption=\"On the road\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_austriaroad1-420x315.jpg\" data-caption=\"On the road\" alt=\"On the road\"\/><\/a><a class=\"sgg-lightbox-item mfp-iframe\" data-type=\"video\" href=\"https:\/\/www.youtube.com\/watch?v=FNJ09RwY6k8\" data-caption=\"Sea\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/tumblr_n396iwHV9n1slhhf0o1_1280-225x300.jpg\" data-caption=\"Sea\" alt=\"Sea\"\/><\/a><\/div>\n<div id=\"load_more_holder_Wb49F7\" style=\"display:none\"><\/div>\n\t\t\t<script type=\"text\/javascript\">\n\t\t\t\t(function($){\n\t\t\t\t\t$(\"#justified_gallery_Wb49F7\").justifiedGallery({\n\t\t\t\t\t\tsizeRangeSuffixes : {'lt100': '', 'lt240': '', 'lt320': '', 'lt500': '', 'lt640': '', 'lt1024': ''},rowHeight: 160,\r\nmobileRowHeight: 200,\r\nmargins: 5,\r\nlastRow: \"nojustify\",\r\nfixedHeight: false,\r\ncaptions: true,\r\ncaptionsColor: \"#0f99b8\",\r\ncaptionsOpacity: 0.6,\r\nrandomize: false,\r\nmaxRowHeight: 0,\r\nrel: \"Wb49F7\",\r\ntarget: null,\r\nrefreshTime: 250,\r\ncssAnimation: true,\r\ncaptionsAnimationDuration: 500,\r\nimagesAnimationDuration: 300,\r\ncaptionsVisibleOpacity: 0.7,\r\nclass: \"\",\r\n\t\t\t\t\t})\n\t\t\t\t\t.on('jg.complete', function(){\n\t\t\t\t\t\t$('#justified_gallery_Wb49F7 a.sgg-lightbox-item').magnificPopup({type: 'image',\n\t\t\t\t\t\tmainClass: 'mfp-with-zoom',\n\t\t\t\t\t\tcloseOnContentClick: true,\n\t\t\t\t\t\tcloseBtnInside: false,\n\t\t\t\t\t\tpreloader: 'true',\n\t\t\t\t\t\ttLoading: '',\n\t\t\t\t\t\ttClose: '',image: {\n\t\t\t\t\t\t\tverticalFit: true,titleSrc: function(item) {\n\t\t\t\t\t\t\t\treturn item.el.attr('data-caption');\n\t\t\t\t\t\t\t}},zoom: {\n\t\t\t\t\t\t\tenabled: true,\n\t\t\t\t\t\t\tduration: 300\n\t\t\t\t\t\t},\n\t\t\t\t\t\tgallery: {\n\t\t\t\t\t\t\tenabled: true,\n\t\t\t\t\t\t\ttPrev: '',\n    \t\t\t\t\t\ttNext: '',\n\t\t\t\t\t\t\ttCounter: '(%curr%\/%total%)'\n\t\t\t\t\t\t},iframe: {\n\t\t\t\t\t\t  markup: \n\t\t\t\t\t\t    '<div class=\"mfp-iframe-scaler\">'+\n\t\t\t\t\t\t\t  '<div class=\"mfp-close\"><\/div>'+\n\t\t\t\t\t\t\t    '<iframe class=\"mfp-iframe\" frameborder=\"0\" allowfullscreen><\/iframe>'+\n\t\t\t\t\t\t\t  '<div class=\"mfp-title\"><\/div>'+\n\t\t\t\t\t\t\t'<\/div>',\n\t\t\t\t\t\t  patterns: {\n\t\t\t\t\t\t    youtube: {\n\t\t\t\t\t\t      index: 'youtube.com\/', \/\/ String that detects type of video (in this case YouTube). Simply via url.indexOf(index).\n\t\t\t\t\t\t      id: 'v=', \/\/ String that splits URL in a two parts, second part should be %id%\n\t\t\t\t\t\t      \/\/ Or null - full URL will be returned\n\t\t\t\t\t\t      \/\/ Or a function that should return %id%, for example:\n\t\t\t\t\t\t      \/\/ id: function(url) { return 'parsed id'; }\n\t\t\t\t\t\t      src: '\/\/www.youtube.com\/embed\/%id%?showinfo=0&rel=0' \/\/ URL that will be set as a source for iframe. \n\t\t\t\t\t\t    },\n\t\t\t\t\t\t    youtu_be: {\n\t\t\t\t\t\t      index: 'youtu.be\/',\n\t\t\t\t\t\t      id: '\/',\n\t\t\t\t\t\t      src: '\/\/www.youtube.com\/embed\/%id%?showinfo=0&rel=0'\n\t\t\t\t\t\t    },\n\t\t\t\t\t\t    vimeo: {\n\t\t\t\t\t\t      index: 'vimeo.com\/',\n\t\t\t\t\t\t      id: '\/',\n\t\t\t\t\t\t      src: '\/\/player.vimeo.com\/video\/%id%?byline=0&amp;portrait=0'\n\t\t\t\t\t\t    }\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t},\n\t\t\t\t\t\tcallbacks: {\n\t\t\t\t\t\t  markupParse: function(template, values, item) {\n\t\t\t\t\t\t   values.title = item.el.attr('data-caption');\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t}});\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\tWebFontConfig.google.families.push('Lobster');\t\t\t\t\t\t\t\t\tvar galleries = [];\n\t\t\t\tvar gallery = $(\"#justified_gallery_Wb49F7\");\n\t\t\t\t$(window).scroll(function() {\n\t\t\t\t\tif ( galleries.length >= 1  ) {\n\t\t\t\t\t\tvar scroll_top = $(window).scrollTop();\n\t\t\t\t\t\tvar scroll_bottom = scroll_top + $(window).height();\n\t\t\t\t\t\tvar gallery_top = $(gallery).offset().top;\n\t\t\t\t\t\tvar gallery_height = $(gallery).innerHeight();\n\t\t\t\t\t\tvar gallery_bottom = gallery_top + gallery_height;\n\t\t\t\t\t\tif( scroll_bottom >= gallery_bottom ) {\n\t\t\t\t\t\t\tvar images = galleries.splice(0,1);\n\t\t\t\t\t\t\tvar image_html = $(\"#load_more_holder_Wb49F7\").html(images).text();\n\t\t\t\t\t\t\t$(gallery).append(image_html);\n\t\t\t\t\t\t\t$(gallery).justifiedGallery('norewind');\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\t\t\t\t})(jQuery);\n\t\t\t<\/script>\n\t\t\t\t\t\t<style>\n\t            #justified_gallery_Wb49F7 .sgg-caption {\n\t\t\t\t\tbackground: rgb(15,153,184);\n\t\t\t\t\tbackground: rgba(15,153,184,0.6);\n\t\t\t\t\tcolor: #ffffff;\n\t\t\t\t\tfont-size: 2.3em;\n\t\t\t\t\tfont-weight: 700;\n\t\t\t\t\tfont-family: Lobster;\n\t\t\t\t}\n\t\t\t\t#load_more_Wb49F7 {\n\t\t\t\t    background: #444444;\n\t\t\t\t    color: #ffffff;\n\t\t\t\t}\n\t\t\t<\/style>\n        \t\n<p>\n<\/div>\n<div class=\"column column-span-4 column-push-0 column-last\"><\/p>\n<h2>Google Web Fonts<\/h2>\n<p>Use more than 650 Google Fonts for your gallery captions for free. All you need is to set font name like &#8220;Lobster&#8221;, &#8220;Open Sans&#8221; or &#8220;Lato&#8221; for your grid gallery and it is ready to go.<\/p>\n<\/div><\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2 style=\"text-align: center; margin-bottom: 0;\">Make your captions even better with awesome CSS3 hover effects<\/h2>\n<p style=\"text-align: center;\"><a class=\"button learn-more\" title=\"\" href=\"http:\/\/topdevs.net\/smart-grid-gallery\/wordpress-gallery-hover-effects\/\"><i class=\"icon-eye-open icon-large\"><\/i>\u00a0See Hover Effects<\/a> \u00a0<span style=\"font-size: 21px; line-height: 73px;\">or<\/span>\u00a0 <a class=\"button buy-it\" title=\"\" href=\"http:\/\/codecanyon.net\/item\/smart-grid-gallery\/8365014?ref=topdevs\"><i class=\"icon-shopping-cart icon-large\"><\/i> Buy Plugin Now &#8211; $19<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div class=\"column-grid column-grid-12\"><div class=\"column column-span-4 column-push-0 column-first\"><\/p>\n<h2>Caption Colors<\/h2>\n<p>Choose any text color, background color and opacity for your WordPress\u00a0gallery captions using built-in colorpicker. Fit the color scheme of your website easily.<\/p>\n<p>\n<\/div>\n<div class=\"column column-span-8 column-push-0 column-last\"><\/p>\n<div id=\"justified_gallery_QtNtc9\" class=\"sgg-style-1 \"><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_lednice-castle.jpg\" data-size=\"1388x1600\" data-caption=\"Castle\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_lednice-castle-260x300.jpg\" data-caption=\"Castle\" alt=\"Castle\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_Bench-Under-Tree.jpg\" data-size=\"1920x1280\" data-caption=\"Under the tree\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_Bench-Under-Tree-420x280.jpg\" data-caption=\"Under the tree\" alt=\"Under the tree\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/BeachSunset.jpg\" data-size=\"1920x1273\" data-caption=\"Beach sunset\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/BeachSunset-420x278.jpg\" data-caption=\"Beach sunset\" alt=\"Beach sunset\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_austriaroad1.jpg\" data-size=\"1920x1440\" data-caption=\"On the road\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_austriaroad1-420x315.jpg\" data-caption=\"On the road\" alt=\"On the road\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_austriaroad2.jpg\" data-size=\"1920x1440\" data-caption=\"Windmill\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/picjumbo.com_austriaroad2-420x315.jpg\" data-caption=\"Windmill\" alt=\"Windmill\"\/><\/a><a class=\"sgg-lightbox-item mfp-iframe\" data-type=\"video\" href=\"https:\/\/www.youtube.com\/watch?v=FNJ09RwY6k8\" data-caption=\"Sea\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/06\/tumblr_n396iwHV9n1slhhf0o1_1280-225x300.jpg\" data-caption=\"Sea\" alt=\"Sea\"\/><\/a><\/div>\n<div id=\"load_more_holder_QtNtc9\" style=\"display:none\"><\/div>\n\t\t\t<script type=\"text\/javascript\">\n\t\t\t\t(function($){\n\t\t\t\t\t$(\"#justified_gallery_QtNtc9\").justifiedGallery({\n\t\t\t\t\t\tsizeRangeSuffixes : {'lt100': '', 'lt240': '', 'lt320': '', 'lt500': '', 'lt640': '', 'lt1024': ''},rowHeight: 160,\r\nmobileRowHeight: 160,\r\nmargins: 5,\r\nlastRow: \"nojustify\",\r\nfixedHeight: false,\r\ncaptions: true,\r\ncaptionsColor: \"#2ecc71\",\r\ncaptionsOpacity: 1,\r\nrandomize: false,\r\nmaxRowHeight: 0,\r\nrel: \"QtNtc9\",\r\ntarget: null,\r\nrefreshTime: 250,\r\ncssAnimation: true,\r\ncaptionsAnimationDuration: 500,\r\nimagesAnimationDuration: 300,\r\ncaptionsVisibleOpacity: 0.7,\r\nclass: \"\",\r\n\t\t\t\t\t})\n\t\t\t\t\t.on('jg.complete', function(){\n\t\t\t\t\t\t$(document).ready(function(){\n\t\t\t\t\t\t\tvar pswp_QtNtc9 = SGGinitPhotoSwipeFromDOM('#justified_gallery_QtNtc9',{title: true,\r\nshare: true,\r\nhistory: false,\r\n uid: 'QtNtc9' })})\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\tWebFontConfig.google.families.push('Roboto');\t\t\t\t\t\t\t\t\tvar galleries = [];\n\t\t\t\tvar gallery = $(\"#justified_gallery_QtNtc9\");\n\t\t\t\t$(window).scroll(function() {\n\t\t\t\t\tif ( galleries.length >= 1  ) {\n\t\t\t\t\t\tvar scroll_top = $(window).scrollTop();\n\t\t\t\t\t\tvar scroll_bottom = scroll_top + $(window).height();\n\t\t\t\t\t\tvar gallery_top = $(gallery).offset().top;\n\t\t\t\t\t\tvar gallery_height = $(gallery).innerHeight();\n\t\t\t\t\t\tvar gallery_bottom = gallery_top + gallery_height;\n\t\t\t\t\t\tif( scroll_bottom >= gallery_bottom ) {\n\t\t\t\t\t\t\tvar images = galleries.splice(0,1);\n\t\t\t\t\t\t\tvar image_html = $(\"#load_more_holder_QtNtc9\").html(images).text();\n\t\t\t\t\t\t\t$(gallery).append(image_html);\n\t\t\t\t\t\t\t$(gallery).justifiedGallery('norewind');\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\t\t\t\t})(jQuery);\n\t\t\t<\/script>\n\t\t\t\t\t\t<style>\n\t            #justified_gallery_QtNtc9 .sgg-caption {\n\t\t\t\t\tbackground: rgb(46,204,113);\n\t\t\t\t\tbackground: rgba(46,204,113,1);\n\t\t\t\t\tcolor: #e74c3c;\n\t\t\t\t\tfont-size: 2.3em;\n\t\t\t\t\tfont-weight: 700;\n\t\t\t\t\tfont-family: Roboto;\n\t\t\t\t}\n\t\t\t\t#load_more_QtNtc9 {\n\t\t\t\t    background: #444444;\n\t\t\t\t    color: #ffffff;\n\t\t\t\t}\n\t\t\t<\/style>\n        \t\n<p>\n<\/div><\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div class=\"column-grid column-grid-12\"><div class=\"column column-span-8 column-push-0 column-first\"><\/p>\n<div id=\"justified_gallery_pWljj2\" class=\"sgg-style-1 \"><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/11\/14317125527_21cfeb38d6_b.jpg\" data-size=\"1024x683\" data-caption=\"Coffee\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/11\/14317125527_21cfeb38d6_b.jpg\" data-caption=\"Coffee<br\/><br\/><i class='icon-large icon-zoom-in'><\/i>\" alt=\"Coffee\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/11\/14178004949_7711cf317f_b.jpg\" data-size=\"1024x683\" data-caption=\"Bicycle\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/11\/14178004949_7711cf317f_b-420x280.jpg\" data-caption=\"Bicycle<br\/><br\/><i class='icon-large icon-zoom-in'><\/i>\" alt=\"Bicycle\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/11\/14185447737_0aba637f46_b.jpg\" data-size=\"1024x683\" data-caption=\"Laptop\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/11\/14185447737_0aba637f46_b.jpg\" data-caption=\"Laptop<br\/><br\/><i class='icon-large icon-zoom-in'><\/i>\" alt=\"Laptop\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/11\/14201760289_1ae3e7b285_b.jpg\" data-size=\"1024x683\" data-caption=\"Beach\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/11\/14201760289_1ae3e7b285_b.jpg\" data-caption=\"Beach<br\/><br\/><i class='icon-large icon-zoom-in'><\/i>\" alt=\"Beach\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/07\/14189700370_228b61fcf3_b.jpg\" data-size=\"1024x683\" data-caption=\"Stones\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/07\/14189700370_228b61fcf3_b.jpg\" data-caption=\"Stones<br\/><br\/><i class='icon-large icon-zoom-in'><\/i>\" alt=\"Stones\"\/><\/a><a class=\"sgg-lightbox-item\" href=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/11\/14370277547_f550c1d77c_b.jpg\" data-size=\"1024x683\" data-caption=\"Mountains\"><img decoding=\"async\" src=\"https:\/\/topdevs.net\/smart-grid-gallery\/files\/2014\/11\/14370277547_f550c1d77c_b.jpg\" data-caption=\"Mountains<br\/><br\/><i class='icon-large icon-zoom-in'><\/i>\" alt=\"Mountains\"\/><\/a><\/div>\n<div id=\"load_more_holder_pWljj2\" style=\"display:none\"><\/div>\n\t\t\t<script type=\"text\/javascript\">\n\t\t\t\t(function($){\n\t\t\t\t\t$(\"#justified_gallery_pWljj2\").justifiedGallery({\n\t\t\t\t\t\tsizeRangeSuffixes : {'lt100': '', 'lt240': '', 'lt320': '', 'lt500': '', 'lt640': '', 'lt1024': ''},rowHeight: 160,\r\nmobileRowHeight: 200,\r\nmargins: 5,\r\nlastRow: \"justify\",\r\nfixedHeight: false,\r\ncaptions: true,\r\ncaptionsColor: \"#000000\",\r\ncaptionsOpacity: 0.6,\r\nrandomize: false,\r\nmaxRowHeight: 0,\r\nrel: \"pWljj2\",\r\ntarget: null,\r\nrefreshTime: 250,\r\ncssAnimation: true,\r\ncaptionsAnimationDuration: 500,\r\nimagesAnimationDuration: 300,\r\ncaptionsVisibleOpacity: 0.7,\r\nclass: \"\",\r\n\t\t\t\t\t})\n\t\t\t\t\t.on('jg.complete', function(){\n\t\t\t\t\t\t$('#justified_gallery_pWljj2 a.sgg-lightbox-item').magnificPopup({type: 'image',\n\t\t\t\t\t\tmainClass: 'mfp-with-zoom',\n\t\t\t\t\t\tcloseOnContentClick: true,\n\t\t\t\t\t\tcloseBtnInside: false,\n\t\t\t\t\t\tpreloader: 'true',\n\t\t\t\t\t\ttLoading: '',\n\t\t\t\t\t\ttClose: '',image: {\n\t\t\t\t\t\t\tverticalFit: true,titleSrc: function(item) {\n\t\t\t\t\t\t\t\treturn item.el.attr('data-caption');\n\t\t\t\t\t\t\t}},zoom: {\n\t\t\t\t\t\t\tenabled: true,\n\t\t\t\t\t\t\tduration: 300\n\t\t\t\t\t\t},\n\t\t\t\t\t\tgallery: {\n\t\t\t\t\t\t\tenabled: true,\n\t\t\t\t\t\t\ttPrev: '',\n    \t\t\t\t\t\ttNext: '',\n\t\t\t\t\t\t\ttCounter: '(%curr%\/%total%)'\n\t\t\t\t\t\t},iframe: {\n\t\t\t\t\t\t  markup: \n\t\t\t\t\t\t    '<div class=\"mfp-iframe-scaler\">'+\n\t\t\t\t\t\t\t  '<div class=\"mfp-close\"><\/div>'+\n\t\t\t\t\t\t\t    '<iframe class=\"mfp-iframe\" frameborder=\"0\" allowfullscreen><\/iframe>'+\n\t\t\t\t\t\t\t  '<div class=\"mfp-title\"><\/div>'+\n\t\t\t\t\t\t\t'<\/div>',\n\t\t\t\t\t\t  patterns: {\n\t\t\t\t\t\t    youtube: {\n\t\t\t\t\t\t      index: 'youtube.com\/', \/\/ String that detects type of video (in this case YouTube). Simply via url.indexOf(index).\n\t\t\t\t\t\t      id: 'v=', \/\/ String that splits URL in a two parts, second part should be %id%\n\t\t\t\t\t\t      \/\/ Or null - full URL will be returned\n\t\t\t\t\t\t      \/\/ Or a function that should return %id%, for example:\n\t\t\t\t\t\t      \/\/ id: function(url) { return 'parsed id'; }\n\t\t\t\t\t\t      src: '\/\/www.youtube.com\/embed\/%id%?showinfo=0&rel=0' \/\/ URL that will be set as a source for iframe. \n\t\t\t\t\t\t    },\n\t\t\t\t\t\t    youtu_be: {\n\t\t\t\t\t\t      index: 'youtu.be\/',\n\t\t\t\t\t\t      id: '\/',\n\t\t\t\t\t\t      src: '\/\/www.youtube.com\/embed\/%id%?showinfo=0&rel=0'\n\t\t\t\t\t\t    },\n\t\t\t\t\t\t    vimeo: {\n\t\t\t\t\t\t      index: 'vimeo.com\/',\n\t\t\t\t\t\t      id: '\/',\n\t\t\t\t\t\t      src: '\/\/player.vimeo.com\/video\/%id%?byline=0&amp;portrait=0'\n\t\t\t\t\t\t    }\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t},\n\t\t\t\t\t\tcallbacks: {\n\t\t\t\t\t\t  markupParse: function(template, values, item) {\n\t\t\t\t\t\t   values.title = item.el.attr('data-caption');\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t}});\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\tWebFontConfig.google.families.push('Montserrat');\t\t\t\t\t\t\t\t\tvar galleries = [];\n\t\t\t\tvar gallery = $(\"#justified_gallery_pWljj2\");\n\t\t\t\t$(window).scroll(function() {\n\t\t\t\t\tif ( galleries.length >= 1  ) {\n\t\t\t\t\t\tvar scroll_top = $(window).scrollTop();\n\t\t\t\t\t\tvar scroll_bottom = scroll_top + $(window).height();\n\t\t\t\t\t\tvar gallery_top = $(gallery).offset().top;\n\t\t\t\t\t\tvar gallery_height = $(gallery).innerHeight();\n\t\t\t\t\t\tvar gallery_bottom = gallery_top + gallery_height;\n\t\t\t\t\t\tif( scroll_bottom >= gallery_bottom ) {\n\t\t\t\t\t\t\tvar images = galleries.splice(0,1);\n\t\t\t\t\t\t\tvar image_html = $(\"#load_more_holder_pWljj2\").html(images).text();\n\t\t\t\t\t\t\t$(gallery).append(image_html);\n\t\t\t\t\t\t\t$(gallery).justifiedGallery('norewind');\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\t\t\t\t})(jQuery);\n\t\t\t<\/script>\n\t\t\t\t\t\t<style>\n\t            #justified_gallery_pWljj2 .sgg-caption {\n\t\t\t\t\tbackground: rgb(0,0,0);\n\t\t\t\t\tbackground: rgba(0,0,0,0.6);\n\t\t\t\t\tcolor: #ffffff;\n\t\t\t\t\tfont-size: 1.8em;\n\t\t\t\t\tfont-weight: 700;\n\t\t\t\t\tfont-family: Montserrat;\n\t\t\t\t}\n\t\t\t\t#load_more_pWljj2 {\n\t\t\t\t    background: #444444;\n\t\t\t\t    color: #ffffff;\n\t\t\t\t}\n\t\t\t<\/style>\n        \t\n<p>\n<\/div>\n<div class=\"column column-span-4 column-push-0 column-last\"><\/p>\n<h2>HTML in Captions<\/h2>\n<p>HTML tags are supported for your grid gallery captions. Add some tags or even\u00a0your favorite vector icons, like <a href=\"http:\/\/fortawesome.github.io\/Font-Awesome\/\" rel=\"nofollow\">FontAwesome<\/a>.<\/p>\n<p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Looking for WordPress Gallery With Captions? You found it! Smart Grid Gallery is a\u00a0WordPress gallery with captions plugin. Image can say a lot by itself, but if you add a small caption to each image in your gallery it will look\u00a0totally different. Express yourself, customize\u00a0caption colors, fonts and \u00a0hover effects\u00a0to fit your precious site design. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"template.page.fullwidth.php","meta":{"footnotes":""},"class_list":["post-145","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/topdevs.net\/smart-grid-gallery\/wp-json\/wp\/v2\/pages\/145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/topdevs.net\/smart-grid-gallery\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/topdevs.net\/smart-grid-gallery\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/topdevs.net\/smart-grid-gallery\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/topdevs.net\/smart-grid-gallery\/wp-json\/wp\/v2\/comments?post=145"}],"version-history":[{"count":47,"href":"https:\/\/topdevs.net\/smart-grid-gallery\/wp-json\/wp\/v2\/pages\/145\/revisions"}],"predecessor-version":[{"id":538,"href":"https:\/\/topdevs.net\/smart-grid-gallery\/wp-json\/wp\/v2\/pages\/145\/revisions\/538"}],"wp:attachment":[{"href":"https:\/\/topdevs.net\/smart-grid-gallery\/wp-json\/wp\/v2\/media?parent=145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}