{"id":5400,"date":"2014-09-10T14:34:19","date_gmt":"2014-09-10T14:34:19","guid":{"rendered":"http:\/\/www.gopiplus.com\/work\/?p=5400"},"modified":"2018-03-10T14:17:54","modified_gmt":"2018-03-10T14:17:54","slug":"horizontal-scroll-google-picasa-images-wordpress-plugin","status":"publish","type":"post","link":"http:\/\/www.gopiplus.com\/work\/2014\/09\/10\/horizontal-scroll-google-picasa-images-wordpress-plugin\/","title":{"rendered":"Horizontal scroll google picasa images"},"content":{"rendered":"<p><strong>Horizontal scroll Google images<\/strong> WordPress plugin is created to retrieve images from particular google plus album (Picasa album), and display the images using <strong>Tiny Carousel<\/strong> light weight jQuery script. It will scroll your Google Plus images in a horizontal scroll style. PHP Code and Short Code options are available for this plugin.<\/p>\n<div class=\"ads-row\">\n\t<div class=\"ads-column1\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<!-- Large Rectancle Center page -->\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:inline-block;width:336px;height:280px\"\n\t\t\t data-ad-client=\"ca-pub-6676019656533652\"\n\t\t\t data-ad-slot=\"0362029595\"><\/ins>\n\t\t<script>\n\t\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/div>\n\t<div class=\"ads-column2\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<!-- gopiplus.org Main -->\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:inline-block;width:336px;height:280px\"\n\t\t\t data-ad-client=\"ca-pub-6676019656533652\"\n\t\t\t data-ad-slot=\"7521653079\"><\/ins>\n\t\t<script>\n\t\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/div>\n<\/div>\n<h2>Features of this plugin<\/h2>\n<ul>\n<li>Display Google Plus images in posts or pages using short code.<\/li>\n<li>Support all browser<\/li>\n<li>Supports navigation by button.<\/li>\n<li>Option to set a interval for automatic slide.<\/li>\n<li>Supports localization.<\/li>\n<li>Responsive option.<\/li>\n<li>Option to set thumbnail size.<\/li>\n<li>Fancybox option to show big images (Open images using Fancybox).<\/li>\n<\/ul>\n<blockquote><p>Plugin <strong>live demo<\/strong> available in this page. You may also be interested in <a href=\"http:\/\/www.gopiplus.com\/work\/2017\/11\/18\/owl-carousel-responsive-wordpress-plugin\/\">Owl carousel responsive<\/a> WordPress plugin.<\/p><\/blockquote>\n<div class=\"livedemo1\">\n<h2>Live Demo<\/h2>\n<script type='text\/javascript' src='http:\/\/www.gopiplus.com\/extensions\/my-plugin\/demo\/jquery.tinycarousel.min.js'><\/script>\n<style type='text\/css' media='screen'>\n#tchsp { height: 100%; margin: 30px 0 0; overflow:hidden; position: relative; padding: 0 50px 10px;   }\n#tchsp .viewport { height: 96px; overflow: hidden; position: relative; }\n#tchsp .buttons { background: #CCCCCC; border-radius: 35px; display: block; position: absolute;\ntop: 20%; left: 0; width: 35px; height: 35px; color: #fff; font-weight: bold; text-align: center; line-height: 35px; text-decoration: none;\nfont-size: 22px; }\n#tchsp .next { right: 0; left: auto;top: 20%; }\n#tchsp .buttons:hover{ color: #C01313;background: #fff; }\n#tchsp .disable { visibility: hidden; }\n#tchsp .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 250px; left: 0 top: 0; }\n#tchsp .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 100px; border: 1px solid #dcdcdc; width: 128px;}\n#tchsp ul { max-width:none; }\n<\/style>\n<div id=\"tchsp\">\n\t<a class=\"buttons prev\" href=\"#\">&lt;<\/a>\n\t<div class=\"viewport\">\n\t\t<ul class=\"overview\" style=\"width:100%;\">\n\t\t  <li><img decoding=\"async\" alt=\"\" src=\"http:\/\/lh4.ggpht.com\/-n5eRtYT4A1Q\/VAwHScRiBZI\/AAAAAAAAA08\/skReLDp58sA\/w128\/DSC03427.JPG\" \/><\/li>\n\t\t  <li><img decoding=\"async\" alt=\"\" src=\"http:\/\/lh6.ggpht.com\/-EnEUMoxgmNs\/VAwHim8j6BI\/AAAAAAAAA1s\/1HdCN9CFIH0\/w128\/DSC03433.JPG\" \/><\/li>\n\t\t  <li><img decoding=\"async\" alt=\"\" src=\"http:\/\/lh4.ggpht.com\/-P8hLCetptpA\/VAwHoxQ4UXI\/AAAAAAAAA2E\/1hYkit94Me0\/w128\/DSC03434.JPG\" \/><\/li>\n\t\t  <li><img decoding=\"async\" alt=\"\" src=\"http:\/\/lh6.ggpht.com\/-OLcyJyG67wQ\/VAwHTVO8rJI\/AAAAAAAAA1E\/oKLRXvH3nAI\/w128\/DSC03429.JPG\" \/><\/li>\n\t\t  <li><img decoding=\"async\" alt=\"\" src=\"http:\/\/lh4.ggpht.com\/-cFbzyqotGqA\/VAwHjaC-PmI\/AAAAAAAAA10\/QSBvJue_ESY\/w128\/DSC03432.JPG\" \/><\/li>\n\t\t  <li><img decoding=\"async\" alt=\"\" src=\"http:\/\/lh4.ggpht.com\/-ITGqnIfaWHY\/VAwHtLHjy6I\/AAAAAAAAA2Q\/CTouqQPSn0Y\/w128\/DSC03435.JPG\" \/><\/li>\n\t\t  <li><img decoding=\"async\" alt=\"\" src=\"http:\/\/lh4.ggpht.com\/-n5eRtYT4A1Q\/VAwHScRiBZI\/AAAAAAAAA08\/skReLDp58sA\/w128\/DSC03427.JPG\" \/><\/li>\n\t\t<\/ul>\n\t<\/div>\n\t<a class=\"buttons next\" href=\"#\">&gt;<\/a>\n<\/div>\n<script type=\"text\/javascript\">\njQuery(document).ready(function(){\n\tjQuery('#tchsp').tinycarousel({ \n\t\tbuttons: true, \n\t\tinterval: true, \n\t\tintervalTime: 4000, \n\t\tanimationTime: 1000 \n\t});\n});\n<\/script>\n<\/div>\n<p>This demo is coming from my Google+ album <\/p>\n<p><a target=\"_blank\" href=\"https:\/\/plus.google.com\/photos\/103021440284242065651\/albums\/6056223604731131297\">https:\/\/plus.google.com\/photos\/103021440284242065651\/albums\/6056223604731131297<\/a><\/p>\n<h2>Plugin configuration<\/h2>\n<p><strong>Short code for posts and pages<\/strong><\/p>\n<p>Use the below short code in the pages or in the posts to render the slideshow.<\/p>\n<p><code>[hsgpi id=\"1\"]<\/code><\/p>\n<p><strong>Add directly in the theme<\/strong><\/p>\n<p>Using a shortcode and the wp function do_shortcode(), you can place the plugin anywhere on your theme php file.<\/p>\n<p><code>&lt;?php  echo do_shortcode( '[hsgpi id=&quot;1&quot;]' );  ?&gt;<\/code><\/p>\n<div class=\"ads-row\">\n\t<div class=\"ads-column0\">\n\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t<!-- Above Comment -->\n\t<ins class=\"adsbygoogle\"\n\t\t style=\"display:inline-block;width:336px;height:280px\"\n\t\t data-ad-client=\"ca-pub-6676019656533652\"\n\t\t data-ad-slot=\"2359628415\"><\/ins>\n\t<script>\n\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t<\/script>\n\t<\/div>\n<\/div>\n<h2>Frequently asked questions<\/h2>\n<p><strong>Q1. How do I find my Google+ User ID, Google+ Album ID?<\/strong><\/p>\n<p>Google+ User ID and Google+ Album ID is an important required filed for this plugin (You Google+ password is not required) .<\/p>\n<p>1. Login to Google+ http:\/\/plus.google.com\/<\/p>\n<p>2. In the left sidebar menu, click <strong>Photos<\/strong><\/p>\n<p>3. From the top horizontal menu, click <strong>Albums<\/strong>. (It will show all available albums)<\/p>\n<p>4. Right click (Mouse right click) one of your available album and copy URL address.<\/p>\n<p>5. Album URL looks like below URL.<\/p>\n<p>https:\/\/plus.google.com\/photos\/<span style=\"color: #ff6600;\"><strong>103021440284242065651<\/strong><\/span>\/albums\/<span style=\"color: #0000ff;\"><strong>6056223604731131297<\/strong><\/span><\/p>\n<p>In that URL <span style=\"color: #ff6600;\"><strong>103021440284242065651<\/strong><\/span> is your Google+ User ID and <span style=\"color: #0000ff;\"><strong>6056223604731131297<\/strong><\/span> is your Google+ Album ID.<\/p>\n<p><strong>Q2. How do I set a photo album to public album?<\/strong><\/p>\n<p>1. Login to Google+ http:\/\/plus.google.com\/<\/p>\n<p>2. In the left sidebar menu, click <strong>Photos<\/strong><\/p>\n<p>3. From the top horizontal menu, click <strong>Albums<\/strong>. (It will show all available albums)<\/p>\n<p>4. Then, select the album you want to change. and Click to edit your album link.<\/p>\n<p>5. In the Album properties, Set <strong>Visible to<\/strong> option to <strong>Public<\/strong><\/p>\n<p><strong>Q3. How to change Left, Right arrow color?<\/strong><\/p>\n<p>At present we don&#8217;t have admin option to change the color code (I will add this facility in the next release). Please follow below steps to change the color code manually.<\/p>\n<p>1. Open this file from plugin folder (classes\/hsgpi-load.php)<br \/>\n2. Go to line 122 (Or search #C01313 color code in the file)<br \/>\n3. Change color code (#C01313) and save the file.<\/p>\n<p><strong>Q4. How to add this plugin into my website footer?<\/strong><\/p>\n<p>If you want to add this slider in your website footer, just activate the plugin and copy the given PHP code and add to your theme footer.php file.<\/p>\n<h2>Admin page<\/h2>\n<p>In your WordPress administrator section go to <strong>Settings<\/strong> menu and select <strong>Horizontal scroll google picasa<\/strong> menu to configure this plugin.<\/p>\n<img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/www.gopiplus.com\/work\/my-plugin\/adminscreen\/horizontal-scroll-google-picasa-images.png\" alt=\"Horizontal scroll google picasa images\" \/>\n<h2>Plugin official page<\/h2>\n<p><a href=\" http:\/\/www.gopiplus.com\/work\/2014\/09\/10\/horizontal-scroll-google-picasa-images-wordpress-plugin\/\">http:\/\/www.gopiplus.com\/work\/2014\/09\/10\/horizontal-scroll-google-picasa-images-wordpress-plugin\/<\/a><\/p>\n<h2>Download location<\/h2>\n<p><a href=\"http:\/\/www.gopiplus.com\/work\/wordpress-plugin-download\/\">http:\/\/www.gopiplus.com\/work\/wordpress-plugin-download\/<\/a><\/p>\n<h2>Video tutorial<\/h2>\n<p><a href=\"http:\/\/www.gopiplus.com\/work\/2014\/09\/13\/horizontal-scroll-google-picasa-images-wordpress-plugin-video-tutorial\/\">http:\/\/www.gopiplus.com\/work\/2014\/09\/13\/horizontal-scroll-google-picasa-images-wordpress-plugin-video-tutorial\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This plugin is created to retrieve images from particular google plus album (Picasa album), and display the images using Tiny Carousel light weight jquery script. It will scroll your Google Plus images in a horizontal scroll style.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[214,213,17],"class_list":["post-5400","post","type-post","status-publish","format-standard","hentry","category-word-press-plug-in","tag-horizontal-scroll","tag-picasa","tag-scroll"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts\/5400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/comments?post=5400"}],"version-history":[{"count":0,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts\/5400\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/media?parent=5400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/categories?post=5400"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/tags?post=5400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}