{"id":2029,"date":"2010-04-16T12:42:52","date_gmt":"2010-04-16T11:42:52","guid":{"rendered":"http:\/\/www.bitvolution.com\/?p=819"},"modified":"2010-04-16T12:42:52","modified_gmt":"2010-04-16T11:42:52","slug":"wordpress-image-gallery-plugin","status":"publish","type":"post","link":"https:\/\/www.tomfotherby.com\/blog\/index.php\/2010\/04\/wordpress-image-gallery-plugin\/","title":{"rendered":"WordPress image gallery plugin"},"content":{"rendered":"<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.tomfotherby.com\/blog\/wp-content\/uploads\/2009\/12\/WordpressLogo_blue-m.png?resize=100%2C100&#038;ssl=1\" alt=\"Wordpress Logo\" width=\"100\" height=\"100\" class=\"alignleft size-full wp-image-611\" style=\"padding: 20px\" \/><\/p>\n<p>When I was building the property gallery for <a href=\"http:\/\/www.greekislandpropertyfinders.co.uk\/what-we-are-finding\">greekislandpropertyfinders<\/a> I wanted to use a fancy javascript image gallery like <a href=\"http:\/\/devkick.com\/lab\/galleria\/\">Galleria<\/a>, however I came across a problem with <em>Galleria<\/em> in that it couldn&#8217;t display more than one gallery on any page. It&#8217;s open-source so I used the source code to help write my own version and turned it into a WordPress plugin with the features I needed.<\/p>\n<p>The plugin isn&#8217;t all that generalised, so I&#8217;m not sure it&#8217;ll be useful to many people but I think it&#8217;s a tool worth sharing.<\/p>\n<p>Plugin features:<\/p>\n<ul>\n<li>This plugin doesn&#8217;t change the WordPress media gallery admin interface &#8211; galleries are created and inserted into pages\/posts as normal (i.e. using the media upload GUI + the <code><br \/>\n&#091;gallery]<\/code> shortcode). WordPress authors won&#8217;t need to change or learn anything new.<\/li>\n<li>The plugin makes efficient use of WordPress media (no front-end image resizing via CSS!) which means it doesn&#8217;t matter if one of your authors uploads a load of 3MB images to a gallery &#8211; it&#8217;ll still run fast.<\/li>\n<li>The plugin doesn&#8217;t pre-download images that aren&#8217;t needed &#8211; it displays a loading spinner image when the user is waiting for a image on load.<\/li>\n<li>Should be easy to style the gallery in your own way &#8211; uses CSS classes and IDs.<\/li>\n<li>The user can click on the main image to cycle through the gallery.<\/li>\n<li>Uses jQuery for cross-browser hover fade effects.<\/li>\n<li>Small JS footprint: 2854 bytes.<\/li>\n<li>Outputs valid XHTML (unlike the default WordPress gallery!).<\/li>\n<\/ul>\n<p>Screenshot of the plugin:<br \/>\n<div id=\"attachment_828\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/www.tomfotherby.com\/blog\/wp-content\/uploads\/2010\/04\/screenshot-1.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-828\" src=\"https:\/\/i0.wp.com\/www.bitvolution.com\/files\/2010\/04\/screenshot-1-300x139.png?resize=300%2C139\" alt=\"Screenshot of Bitvolution-image-galleria plugin\" width=\"300\" height=\"139\" class=\"size-medium wp-image-828\" \/><\/a><p id=\"caption-attachment-828\" class=\"wp-caption-text\">Click to enlarge<\/p><\/div><\/p>\n<p>Demo of plugin: <a href=\"http:\/\/www.greekislandpropertyfinders.co.uk\/what-we-are-finding\">www.greekislandpropertyfinders.co.uk\/what-we-are-finding<\/a>.<\/p>\n<p>Download the plugin from the <a href='http:\/\/wordpress.org\/extend\/plugins\/bitvolution-image-galleria\/'>WordPress.org plugin directory<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When I was building the property gallery for greekislandpropertyfinders I wanted to use a fancy javascript image gallery like Galleria, however I came across a problem with Galleria in that it couldn&#8217;t display more than one gallery on any page. It&#8217;s open-source so I used the source code to help write my own version and [&hellip;]<\/p>\n","protected":false},"author":52,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[104],"tags":[97,87],"class_list":["post-2029","post","type-post","status-publish","format-standard","hentry","category-plugin","tag-webdevelopment","tag-wordpress"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2029"}],"version-history":[{"count":0,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2029\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}