{"id":17,"date":"2010-07-18T07:03:16","date_gmt":"2010-07-18T07:03:16","guid":{"rendered":"http:\/\/www.gopiplus.com\/work\/?p=17"},"modified":"2021-08-28T07:20:00","modified_gmt":"2021-08-28T07:20:00","slug":"vertical-scroll-image-slideshow-gallery","status":"publish","type":"post","link":"http:\/\/www.gopiplus.com\/work\/2010\/07\/18\/vertical-scroll-image-slideshow-gallery\/","title":{"rendered":"Vertical scroll image slideshow gallery WordPress plugin"},"content":{"rendered":"\n<p><strong>Vertical scroll<\/strong> image slideshow gallery WordPress plugin lets you <strong>showcase images<\/strong> in a vertical scroll style in the WordPress widget. <strong>Single image at a time<\/strong> and push one by one continually. The speed of the image movement is customizable (Slide timeout). And this plugin retrieves images directly from the specified <strong>folder<\/strong>. The file names are returned in the order in which they are stored by the file system. So the order of the image display is based on the file uploaded date.<\/p>\n\n\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\n\n\n<h2 class=\"wp-block-heading\">Features of this plugin<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Simple to use.<\/li><li>Easy installation and customization.<\/li><li>Short code options.<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Live demo available on this page.<\/strong> All images are hyper-linked to a single url. images are displayed directly from the folder. Do you want the same type of scroll and each image hyper-linked with a different url? Use <a href=\"http:\/\/www.gopiplus.com\/work\/2010\/07\/18\/vertical-scroll-slideshow-gallery-v2\/\">Vertical scroll slideshow gallery v2<\/a> WordPress plugin.<\/p><\/blockquote>\n\n\n\t<script language=\"JavaScript1.2\">\n\t\n\tvar vs_scrollerwidth='336px'\n\tvar vs_scrollerheight='285px'\n\tvar vs_pausebetweenimages=3000\t\n\tvar vs_slideimages=new Array()\n\t\n\tvs_slideimages[0]='<a href=\\'#\\'><img src=\\'http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/336x280\/336x280_1.jpg\\' border=\\'0\\'><\/a>'; \n\tvs_slideimages[1]='<a href=\\'#\\'><img src=\\'http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/336x280\/336x280_2.jpg\\' border=\\'0\\'><\/a>'; \n\tvs_slideimages[2]='<a href=\\'#\\'><img src=\\'http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/336x280\/336x280_3.jpg\\' border=\\'0\\'><\/a>'; \n\tvs_slideimages[3]='<a href=\\'#\\'><img src=\\'http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/336x280\/336x280_4.jpg\\' border=\\'0\\'><\/a>'; \n\tvs_slideimages[4]='<a href=\\'#\\'><img src=\\'http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/336x280\/336x280_5.jpg\\' border=\\'0\\'><\/a>'; \n\tvs_slideimages[5]='<a href=\\'#\\'><img src=\\'http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/336x280\/336x280_6.jpg\\' border=\\'0\\'><\/a>'; \n\tvs_slideimages[6]='<a href=\\'#\\'><img src=\\'http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/336x280\/336x280_7.jpg\\' border=\\'0\\'><\/a>'; \n\tvs_slideimages[7]='<a href=\\'#\\'><img src=\\'http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/336x280\/336x280_8.jpg\\' border=\\'0\\'><\/a>'; \n\tvs_slideimages[8]='<a href=\\'#\\'><img src=\\'http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/336x280\/336x280_9.jpg\\' border=\\'0\\'><\/a>'; \n\tvs_slideimages[9]='<a href=\\'#\\'><img src=\\'http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/336x280\/336x280_10.jpg\\' border=\\'0\\'><\/a>'; \n\tvs_slideimages[10]='<a href=\\'#\\'><img src=\\'http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/336x280\/336x280_11.jpg\\' border=\\'0\\'><\/a>'; \n\tvs_slideimages[11]='<a href=\\'#\\'><img src=\\'http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/336x280\/336x280_12.jpg\\' border=\\'0\\'><\/a>'; \n\tvs_slideimages[12]='<a href=\\'#\\'><img src=\\'http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/336x280\/336x280_13.jpg\\' border=\\'0\\'><\/a>'; \n\tvs_slideimages[13]='<a href=\\'#\\'><img src=\\'http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/336x280\/336x280_14.jpg\\' border=\\'0\\'><\/a>'; \n\tvs_slideimages[14]='<a href=\\'#\\'><img src=\\'http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/336x280\/336x280_15.jpg\\' border=\\'0\\'><\/a>'; \t\n\t\n    \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/Vertical scroll image slideshow gallery\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\t\n\tvar ie=document.all\n\tvar dom=document.getElementById\n\t\n\tif (vs_slideimages.length>2)\n\tvs_i=2\n\telse\n\tvs_i=0\n\t\n\tfunction vs_move1(whichlayer){\n\ttlayer=eval(whichlayer)\n\tif (tlayer.top>0&&tlayer.top<=5){\n\ttlayer.top=0\n\tsetTimeout(\"vs_move1(tlayer)\",vs_pausebetweenimages)\n\tsetTimeout(\"vs_move2(document.vs_main.document.vs_second)\",vs_pausebetweenimages)\n\treturn\n\t}\n\tif (tlayer.top>=tlayer.document.height*-1){\n\ttlayer.top-=5\n\tsetTimeout(\"vs_move1(tlayer)\",50)\n\t}\n\telse{\n\ttlayer.top=parseInt(vs_scrollerheight)\n\ttlayer.document.write(vs_slideimages[vs_i])\n\ttlayer.document.close()\n\tif (vs_i==vs_slideimages.length-1)\n\tvs_i=0\n\telse\n\tvs_i++\n\t}\n\t}\n\t\n\tfunction vs_move2(whichlayer){\n\ttlayer2=eval(whichlayer)\n\tif (tlayer2.top>0&&tlayer2.top<=5){\n\ttlayer2.top=0\n\tsetTimeout(\"vs_move2(tlayer2)\",vs_pausebetweenimages)\n\tsetTimeout(\"vs_move1(document.vs_main.document.vs_first)\",vs_pausebetweenimages)\n\treturn\n\t}\n\tif (tlayer2.top>=tlayer2.document.height*-1){\n\ttlayer2.top-=5\n\tsetTimeout(\"vs_move2(tlayer2)\",50)\n\t}\n\telse{\n\ttlayer2.top=parseInt(vs_scrollerheight)\n\ttlayer2.document.write(vs_slideimages[vs_i])\n\ttlayer2.document.close()\n\tif (vs_i==vs_slideimages.length-1)\n\tvs_i=0\n\telse\n\tvs_i++\n\t}\n\t}\n\t\n\tfunction vs_move3(whichdiv){\n\ttdiv=eval(whichdiv)\n\tif (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){\n\ttdiv.style.top=0+\"px\"\n\tsetTimeout(\"vs_move3(tdiv)\",vs_pausebetweenimages)\n\tsetTimeout(\"vs_move4(vs_second2_obj)\",vs_pausebetweenimages)\n\treturn\n\t}\n\tif (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){\n\ttdiv.style.top=parseInt(tdiv.style.top)-5+\"px\"\n\tsetTimeout(\"vs_move3(tdiv)\",50)\n\t}\n\telse{\n\ttdiv.style.top=vs_scrollerheight\n\ttdiv.innerHTML=vs_slideimages[vs_i]\n\tif (vs_i==vs_slideimages.length-1)\n\tvs_i=0\n\telse\n\tvs_i++\n\t}\n\t}\n\t\n\tfunction vs_move4(whichdiv){\n\ttdiv2=eval(whichdiv)\n\tif (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){\n\ttdiv2.style.top=0+\"px\"\n\tsetTimeout(\"vs_move4(tdiv2)\",vs_pausebetweenimages)\n\tsetTimeout(\"vs_move3(vs_first2_obj)\",vs_pausebetweenimages)\n\treturn\n\t}\n\tif (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){\n\ttdiv2.style.top=parseInt(tdiv2.style.top)-5+\"px\"\n\tsetTimeout(\"vs_move4(vs_second2_obj)\",50)\n\t}\n\telse{\n\ttdiv2.style.top=vs_scrollerheight\n\ttdiv2.innerHTML=vs_slideimages[vs_i]\n\tif (vs_i==vs_slideimages.length-1)\n\tvs_i=0\n\telse\n\tvs_i++\n\t}\n\t}\n\t\n\tfunction startscroll(){\n\tif (ie||dom){\n\tvs_first2_obj=ie? vs_first2 : document.getElementById(\"vs_first2\")\n\tvs_second2_obj=ie? vs_second2 : document.getElementById(\"vs_second2\")\n\tvs_move3(vs_first2_obj)\n\tvs_second2_obj.style.top=vs_scrollerheight\n\tvs_second2_obj.style.visibility='visible'\n\t}\n\telse if (document.layers){\n\tdocument.vs_main.visibility='show'\n\tvs_move1(document.vs_main.document.vs_first)\n\tdocument.vs_main.document.vs_second.top=parseInt(vs_scrollerheight)+5\n\tdocument.vs_main.document.vs_second.visibility='show'\n\t}\n\t}\n\t\n\twindow.onload=startscroll\n\t\n\t<\/script>\n\t\n\t<ilayer id=\"vs_main\" width=&{vs_scrollerwidth}; height=&{vs_scrollerheight}; visibility=hide>\n\t<layer id=\"vs_first\" width=&{vs_scrollerwidth};>\n\t<script language=\"JavaScript1.2\">\n\tif (document.layers)\n\tdocument.write(vs_slideimages[0])\n\t<\/script>\n\t<\/layer>\n\t<layer id=\"vs_second\" width=&{vs_scrollerwidth}; visibility=hide>\n\t<script language=\"JavaScript1.2\">\n\tif (document.layers)\n\tdocument.write(vs_slideimages[dyndetermine=(vs_slideimages.length==1)? 0 : 1])\n\t<\/script>\n\t<\/layer>\n\t<\/ilayer>\n\t<script language=\"JavaScript1.2\">\n\tif (ie||dom)\n\t{\n\t\tdocument.writeln('<div class=\"livedemo\">')\n\t\tdocument.writeln('<h2>Live Demo<\/h2>')\n\t\tdocument.writeln('<div id=\"vs_main2\" style=\"position:relative;width:'+vs_scrollerwidth+';height:'+vs_scrollerheight+';overflow:hidden;\">')\n\t\tdocument.writeln('<div style=\"position:absolute;width:'+vs_scrollerwidth+';height:'+vs_scrollerheight+';clip:rect(0 '+vs_scrollerwidth+' '+vs_scrollerheight+' 0);\">')\n\t\tdocument.writeln('<div id=\"vs_first2\" style=\"position:absolute;width:'+vs_scrollerwidth+';left:0px;top:1px;\">')\n\t\tdocument.write(vs_slideimages[0])\n\t\tdocument.writeln('<\/div>')\n\t\tdocument.writeln('<div id=\"vs_second2\" style=\"position:absolute;width:'+vs_scrollerwidth+';visibility:hidden\">')\n\t\tdocument.write(vs_slideimages[dyndetermine=(vs_slideimages.length==1)? 0 : 1])\n\t\tdocument.writeln('<\/div>')\n\t\tdocument.writeln('<\/div>')\n\t\tdocument.writeln('<\/div>')\n\t\tdocument.writeln('<\/div>')\n\t}\n\t<\/script>\n\n\n\n\n<h2 class=\"wp-block-heading\">Plugin installation instruction<\/h2>\n\n\n\n<p><strong>Method 1<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Download the plugin vertical-scroll-image-slideshow-gallery.zip from the <a href=\"http:\/\/www.gopiplus.com\/work\/wordpress-plugin-download\/\">download<\/a> location.<\/li><li>Unpack the vertical-scroll-image-slideshow-gallery.zip file<\/li><li>Extract the \/vertical-scroll-image-slideshow-gallery\/ folder.<\/li><li>Drop the vertical-scroll-image-slideshow-gallery folder into your &#8216;wp-content\/plugins&#8217; folder.<\/li><li>In WordPress administration panels, click on plugin from the menu.<\/li><li>You should see your new vertical scroll image slideshow gallery plugin listed.<\/li><li>To turn the WordPress plugin on, click activate.<\/li><\/ul>\n\n\n\n<p><strong>Method 2<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to the &#8216;add new&#8217; menu under &#8216;plugins&#8217; tab in your WordPress admin.<\/li><li>Search vertical scroll image slideshow gallery plugin using search option.<\/li><li>Find the plugin and click the &#8216;Install Now&#8217; link.<\/li><li>Finally click the activate plugin link to activate the plugin.<\/li><\/ul>\n\n\n\n<p><strong>Method 3<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Download the plugin vertical-scroll-image-slideshow-gallery.zip from the <a href=\"http:\/\/www.gopiplus.com\/work\/wordpress-plugin-download\/\">download<\/a> location.<\/li><li>Go to the &#8216;add new&#8217; menu under &#8216;plugins&#8217; tab in your WordPress admin.<\/li><li>Click the Upload Plugin button (Next to Add Plugins title).<\/li><li>Upload the available vertical-scroll-image-slideshow-gallery.zip file and click install now.<\/li><li>Finally click the activate plugin link to activate the plugin.<\/li><\/ul>\n\n\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\n\n\n<h2 class=\"wp-block-heading\">Admin page<\/h2>\n\n\n\n<p>In your WordPress administrator section go to <strong>Appearance<\/strong> menu and select <strong>Widgets<\/strong> menu to configure this plugin.<\/p>\n\n\n\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/my-plugin\/adminscreen\/vertical-scroll-image-slideshow-gallery.png\" alt=\"Vertical scroll image slideshow gallery WordPress plugin\"><\/figure>\n\n\n\n<p>Alternatively, we have a short option for this plugin. we can use this short code in the widget and posts\/pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Plugin configuration<\/h2>\n\n\n\n<p><strong>Drag and drop the widget:<\/strong> Go to widgets page under appearance tab, Drag and drop VS slideshow widget into your sidebar. It&#8217;s very easy.<\/p>\n\n\n\n<p><strong>Add directly in the theme:<\/strong> If you want to use a shortcode within a template file instead of with the content of a Post\/Page? You can add it with a below function<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php echo do_shortcode(\"&#091;vertical-scroll-image-slideshow-gallery dir=\"wp-content\/plugins\/vertical-scroll-image-slideshow-gallery\/VSslideshow\/\" imglink=\"#\" width=\"200px\" height=\"175px\" time=\"3000\"]\"); ?><\/code><\/pre>\n\n\n\n<p><strong>Plugin short code:<\/strong> Use plugin short code in the posts\/pages also in the widget to display this slideshow gallery.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;vertical-scroll-image-slideshow-gallery dir=\"wp-content\/plugins\/vertical-scroll-image-slideshow-gallery\/VSslideshow\/\" imglink=\"#\" width=\"200px\" height=\"175px\" time=\"3000\"]<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently asked questions<\/h2>\n\n\n\n<p><strong>Q1. I installed the plugin but can&#8217;t see it. What&#8217;s wrong?<\/strong><\/p>\n\n\n\n<p>Make sure the directory name is entered correctly on the settings page. if you are using short code, make sure the directory name is entered correctly on the shortcode parameter.<\/p>\n\n\n\n<p><strong>Q2. Where to upload my image?<\/strong><\/p>\n\n\n\n<p>wp-content\/plugins\/vertical-scroll-image-slideshow-gallery\/VSslideshow\/<br>Also you can change this folder location via widget configuration. (Best practice is don\u2019t upload your original images into this default folder instead you change this default path to some other folder path). In the short code there is an option to configure folder location.<\/p>\n\n\n\n<p><strong>Q3. How to upload my image?<\/strong><\/p>\n\n\n\n<p>After activating the plugin by default it will fetch images from the below location.<br>wp-content\/plugins\/vertical-scroll-image-slideshow-gallery\/VSslideshow\/<br>You have to change this folder location to some other location. Use the FTP to upload your images (or you can use cPanel or Plesk file manager module to upload your images)<\/p>\n\n\n\n<p><strong>Q4. Widget title appears in the widget but no photos appear below the title?<\/strong><\/p>\n\n\n\n<p>Make sure the directory name is entered correctly on the settings page.<\/p>\n\n\n\n<p><strong>Q5. Why is my image gallery out of range?<\/strong><\/p>\n\n\n\n<p>In the front end of the gallery area, if you see a gallery out of the area or invisible, it is because of the height and width of the\u00a0gallery, so you should arrange the width and height of the widget in the widget configuration area (or inside short code). By default I have fixed width: 200px and height: 175px.<\/p>\n\n\n\n<p><strong>Q6. Why does my slideshow not scroll properly or why does one image overlap another at the time of scroll?<\/strong><\/p>\n\n\n\n<p>Set the scroller width and scroller height to the width\/height of the LARGEST image in your slideshow!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Plugin official page<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/work\/2010\/07\/18\/vertical-scroll-image-slideshow-gallery\/\">http:\/\/www.gopiplus.com\/work\/2010\/07\/18\/vertical-scroll-image-slideshow-gallery\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Download location<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/work\/2012\/06\/03\/vertical-scroll-image-slideshow-gallery-wordpress-plugin-download-link\/\">http:\/\/www.gopiplus.com\/work\/2012\/06\/03\/vertical-scroll-image-slideshow-gallery-wordpress-plugin-download-link\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This plugin lets you showcase images in a vertical scroll style in the WordPress widget. Single image at a time and push one by one continually. The speed of the image movement is customizable.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[19,20,6,172,28,29,5],"class_list":["post-17","post","type-post","status-publish","format-standard","hentry","category-word-press-plug-in","tag-gallery","tag-image","tag-plugin","tag-slider","tag-slideshow","tag-vertical","tag-wordpress"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts\/17","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=17"}],"version-history":[{"count":0,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts\/17\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/media?parent=17"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/categories?post=17"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/tags?post=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}