{"id":30,"date":"2006-12-10T16:55:00","date_gmt":"2006-12-10T21:55:00","guid":{"rendered":"http:\/\/www.benh.org\/techie\/2006\/12\/lightbox-js-v20-integration-with-blogger-template\/"},"modified":"2010-08-27T00:20:58","modified_gmt":"2010-08-27T05:20:58","slug":"lightbox-js-v20-integration-with-blogger-template","status":"publish","type":"post","link":"https:\/\/www.benh.org\/techblog\/2006\/12\/lightbox-js-v20-integration-with-blogger-template\/","title":{"rendered":"Lightbox JS v2.0 Integration with Blogger Template"},"content":{"rendered":"
<\/div>

Create a simple Photolog using Blogger.com and Lightbox JS. A step by step guide for photo bloggers; to Integrate Lightbox with their existing Blogger publishing system.<\/strong><\/p>\n

\"\"<\/a>Blogger is a popular weblog publishing system, which supports custom designs and templates. Meanwhile Blogger is not much popular as other blog publishing system like WordPress, etc for its support to Plug-ins. In other hand Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It is lightweight and works with most of the browsers with Javascripts enabled.<\/p>\n

\"\"<\/a>Yesterday, I was trying to publish my own Photolog. I was looking for a good web serice so that it would ease my task. I am with Blogger for a quite time and still I have not moved my blog to WordPress, even I wish so. So I decided to go with Blogger again with the FTP publishing enabled. But blogger didn\u00e2\u20ac\u2122t have any ready made plug-in for Lightbox so I had to hack the code little bit. Blogger with Ligthbox would give any blog a realistic Photolog look.<\/p>\n

Step by Step Guide:-<\/p>\n

    \n
  1. Download the Lightbox JS script from Here<\/a> and copy the scripts to your web server most likely where your blog is been published.<\/li>\n
  2. Login into Blogger system and go to Template –> Edit HTML<\/li>\n
  3. Add the below line into the Meta section of HTML tag\n
    <link rel=\"stylesheet\" href=\"css\/lightbox.css\" type=\"text\/css\" media=\"screen\"><\/pre>\n
    <\/span><\/span><\/li>\n
  4. Add the following scripts tag in the header section of the HTML template\n
    <script type=\"text\/javascript\" src=\"js\/prototype.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/scriptaculous.js?load=effects\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/lightbox.js\"><\/script><\/pre>\n<\/li>\n
  5. Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.<\/li>\n
  6. Once you\u00e2\u20ac\u2122re done Save the Template.<\/li>\n
  7. With Blogger, we will not able to tweak their system directly, since it is not open source software. So we need to have little manual effort every time before you publish a photo log entry.<\/li>\n
  8. After creating a blog entry in Blogger system, do the following steps before publishing.<\/li>\n
  9. Go to Edit HTML option in the Post window as show in the figure\"\"<\/li>\n
  10. Once you have uploaded the image you will see an entry similar shown in the figure below.<\/li>\n
    \"\"<\/p>\n
  11. Replace the selected code above with rel=\u00e2\u20ac\u009dlightbox\u00e2\u20ac\u009d<\/code> as shown below\"\"<\/li>\n
  12. You can also add title tag in  tag to enable Caption in the LightBox displayed<\/li>\n
  13. Now you\u00e2\u20ac\u2122re all set and you can publish your Photolog.<\/li>\n<\/ol>\n
    If you like to have image sets for each post entry then you need to add rel=\"lightbox[group_name]\"<\/code> for all the images that you which to show in that particular group image set. It should be similar to the below image.\"\"
    \nNow you have a wonderful Photolog to start with as I do; Visit my PhotoLog at     The PhotoLog<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    Create a simple Photolog using Blogger.com and Lightbox JS. A step by step guide for photo bloggers; to Integrate Lightbox with their existing Blogger publishing system. Blogger is a popular weblog publishing system, which supports custom designs and templates. Meanwhile Blogger is not much popular as other blog publishing system like WordPress, etc for its […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[3],"tags":[99,83,100,101,102,67],"class_list":["post-30","post","type-post","status-publish","format-standard","hentry","category-tweaks","tag-blogger","tag-image","tag-lightbox","tag-photolog","tag-templates","tag-tweak"],"_links":{"self":[{"href":"https:\/\/www.benh.org\/techblog\/wp-json\/wp\/v2\/posts\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.benh.org\/techblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.benh.org\/techblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.benh.org\/techblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.benh.org\/techblog\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":4,"href":"https:\/\/www.benh.org\/techblog\/wp-json\/wp\/v2\/posts\/30\/revisions"}],"predecessor-version":[{"id":169,"href":"https:\/\/www.benh.org\/techblog\/wp-json\/wp\/v2\/posts\/30\/revisions\/169"}],"wp:attachment":[{"href":"https:\/\/www.benh.org\/techblog\/wp-json\/wp\/v2\/media?parent=30"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.benh.org\/techblog\/wp-json\/wp\/v2\/categories?post=30"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.benh.org\/techblog\/wp-json\/wp\/v2\/tags?post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}