{"id":184,"date":"2009-06-20T06:15:59","date_gmt":"2009-06-20T06:15:59","guid":{"rendered":"http:\/\/aceinfowayindia.com\/blog\/?p=184"},"modified":"2018-08-30T17:16:29","modified_gmt":"2018-08-30T17:16:29","slug":"creating-a-image-gallery-with-caption","status":"publish","type":"post","link":"http:\/\/aceinfowayindia.com\/blog\/2009\/06\/creating-a-image-gallery-with-caption\/","title":{"rendered":"Creating a Image Gallery with Caption"},"content":{"rendered":"<p>In this post we crating a simple image gallery with caption.\u00a0There is a much simpler way to do this with a list and some very easy CSS.\u00a0Depending on what you want to do with your photo gallery you may want to have a caption or more information available on the page.<br \/>\n<!--more--><br \/>\nNow first we creat a simple HTML structure.<\/p>\n<pre>\r\n[code lang=\"htmlstrict\"]\r\n <div class=\"gallery\">\r\n         <ul>\r\n              <li><a href=\"#\"><img decoding=\"async\" src=\"bw1.jpg\" \/><p>Image Caption<\/p><\/a><\/li>\r\n              <li><a href=\"#\"><img decoding=\"async\" src=\"bw1.jpg\" \/><p>Image Caption<\/p><\/a><\/li>\r\n              <li><a href=\"#\"><img decoding=\"async\" src=\"bw1.jpg\" \/><p>Image Caption<\/p><\/a><\/li>\r\n              <li><a href=\"#\"><img decoding=\"async\" src=\"bw1.jpg\" \/><p>Image Caption<\/p><\/a><\/li>\r\n              <li><a href=\"#\"><img decoding=\"async\" src=\"bw1.jpg\" \/><p>Image Caption<\/p><\/a><\/li>\r\n              <li><a href=\"#\"><img decoding=\"async\" src=\"bw1.jpg\" \/><p>Image Caption<\/p><\/a><\/li>\r\n          <\/ul>\r\n    <\/div>\r\n[\/code]\r\n<\/pre>\n<p>CSS Code<br \/>\nNow we Create simple and effective CSS code. Here is the code. <\/p>\n<pre>\r\n[code lang=\"css\"]\r\n* {margin:0; padding:0;}\r\nbody {\r\nfont:100%.1 normal Arial, Helvetica, sans-serif;\r\n}\r\na {\r\ntext-decoration:none;\r\ncolor:#333333;\r\nfont:82.5% normal Arial, Helvetica, sans-serif\r\n}\r\na:hover {\r\ncolor:#FF0000;\r\n}\r\nimg {\r\nborder:0;\r\n}\r\nh1 {\r\ncolor:#bbb;\r\nfont:195% bold Arial, Helvetica, sans-serif;\r\nline-height:100%;\r\n}\r\n[\/code]\r\n[code lang=\"css\"]\r\n.gallery {\r\nwidth:600px;\r\nmargin:0 auto; \r\n}\r\n.gallery ul, .gallery ul p {\r\nmargin:0;\r\npadding:0;\r\nlist-style-type:none;\r\n}\r\n.gallery ul li {\r\ndisplay:inline;\r\n} \r\n.gallery ul li a {\r\ndisplay:block;\r\nmargin:5px;\r\nfloat:left;\r\npadding:5px;\r\nwidth:150px;\r\nborder:1px solid #ccc;\r\n}\r\n.gallery ul p {\r\ntext-align:center;\r\npadding:2px 0 2px 0;\r\n}\r\n[\/code]\r\n<\/pre>\n<p>finaly we are done. We have created a image gallery with caption. <a href='http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/06\/css-image-gallery-with-caption.rar'>css-image-gallery-with-caption<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post we crating a simple image gallery with caption.\u00a0There is a much simpler way to do this with a list and some very easy CSS.\u00a0Depending on what you want to do with your photo gallery you may want &hellip; <a href=\"http:\/\/aceinfowayindia.com\/blog\/2009\/06\/creating-a-image-gallery-with-caption\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,56,57],"tags":[52,23],"class_list":["post-184","post","type-post","status-publish","format-standard","hentry","category-css","category-tutorials","category-web-development","tag-css","tag-tutorials"],"_links":{"self":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/comments?post=184"}],"version-history":[{"count":14,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/184\/revisions"}],"predecessor-version":[{"id":199,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/184\/revisions\/199"}],"wp:attachment":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/media?parent=184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/categories?post=184"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/tags?post=184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}