{"id":1697,"date":"2017-04-18T10:53:47","date_gmt":"2017-04-18T10:53:47","guid":{"rendered":"http:\/\/www.gopiplus.com\/extensions\/?p=1697"},"modified":"2021-09-27T14:45:46","modified_gmt":"2021-09-27T14:45:46","slug":"drupal-module-vertical-image-scrolling","status":"publish","type":"post","link":"http:\/\/www.gopiplus.com\/extensions\/2017\/04\/drupal-module-vertical-image-scrolling\/","title":{"rendered":"Drupal module Vertical Image Scrolling"},"content":{"rendered":"\n<p>Vertical Image Scrolling module will create the vertical scroll image slideshow on your drupal BLOCK LAYOUT. the module will create a slideshow gallery similar to the reel. The images will scroll one by one from bottom to top. Each image slide can be optionally hyperlinked. Options available in BLOCK configuration to set the images in random order. also, we have the option in the configuration section to change the scrolling speed.<\/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<!-- Drupal Module Middle -->\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=\"3286266642\"><\/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<!-- Drupal Module Middle 2 -->\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=\"8528923427\"><\/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 module<\/h2>\n\n\n\n<p>1. Easy to customize. Thus, no coding knowledge is required.<br>2. Support all latest browsers.<br>3. Hyperlink option to each image. So that, we can redirect the page on image click.<br>4. Random order image display option.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Vertical image scrolling module <strong>Live Demo<\/strong> available in this page. You may also be interested in Drop in image <a href=\"http:\/\/www.gopiplus.com\/extensions\/2017\/02\/drupal-module-tiny-carousel-slider\/\">tiny carousel slider<\/a> Drupal module.<\/p><\/blockquote>\n\n\n<div class=\"livedemo\">\n<h2>Live Demo<\/h2>\n<script language=\"javascript\" src=\"http:\/\/www.gopiplus.com\/extensions\/my-plugin\/demo\/mod_vertical_scrolling_images.js\" ><\/script>\n<div style=\"padding-top:1px;padding-bottom:1px;\">\n  <div style=\"text-align:left;vertical-align:middle;text-decoration: none;overflow: hidden; position: relative; margin-left: 1px; height: 333px;\" id=\"ivrss_holder1_1\">\n    <div class='cas_div' style='height:107px;padding:2px 0px 2px 0px;'> <a style='text-decoration:none' target='_blank' class='cas_div' href='http:\/\/www.gopiplus.com'><img border='0' src='http:\/\/www.gopiplus.com\/extensions\/my-plugin\/myimages\/336x100\/336x100_1.jpg'><\/a> <\/div>\n    <div class='cas_div' style='height:107px;padding:2px 0px 2px 0px;'> <a style='text-decoration:none' target='_blank' class='cas_div' href='http:\/\/www.gopiplus.com'><img border='0' src='http:\/\/www.gopiplus.com\/extensions\/my-plugin\/myimages\/336x100\/336x100_2.jpg'><\/a> <\/div>\n    <div class='cas_div' style='height:107px;padding:2px 0px 2px 0px;'> <a style='text-decoration:none' target='_blank' class='cas_div' href='http:\/\/www.gopiplus.com'><img border='0' src='http:\/\/www.gopiplus.com\/extensions\/my-plugin\/myimages\/336x100\/336x100_3.jpg'><\/a> <\/div>\n  <\/div>\n<\/div>\n<script type=\"text\/javascript\" language=\"javascript\">\nvar ivrss_array\t= new Array();\nvar ivrss_obj\t= '';\nvar ivrss_scrollPos \t= '';\nvar ivrss_numScrolls\t= '';\nvar ivrss_heightOfElm = '105';\nvar ivrss_numberOfElm = '3';\nvar ivrss_scrollOn \t= 'true';\nfunction ivrss_createscroll() \n{\n    ivrss_array[0] = '<div class=\\'cas_div\\' style=\\'height:107px;padding:2px 0px 2px 0px;\\'><a style=\\'text-decoration:none\\' target=\\'_blank\\' class=\\'cas_div\\' href=\\'http:\/\/www.gopiplus.com\\'><img border=\\'0\\' src=\\'http:\/\/www.gopiplus.com\/extensions\/my-plugin\/myimages\/336x100\/336x100_1.jpg\\'><\/a><\/div>';\n    ivrss_array[1] = '<div class=\\'cas_div\\' style=\\'height:107px;padding:2px 0px 2px 0px;\\'><a style=\\'text-decoration:none\\' target=\\'_blank\\' class=\\'cas_div\\' href=\\'http:\/\/www.gopiplus.com\\'><img border=\\'0\\' src=\\'http:\/\/www.gopiplus.com\/extensions\/my-plugin\/myimages\/336x100\/336x100_2.jpg\\'><\/a><\/div>';\n    ivrss_array[2] = '<div class=\\'cas_div\\' style=\\'height:107px;padding:2px 0px 2px 0px;\\'><a style=\\'text-decoration:none\\' target=\\'_blank\\' class=\\'cas_div\\' href=\\'http:\/\/www.gopiplus.com\\'><img border=\\'0\\' src=\\'http:\/\/www.gopiplus.com\/extensions\/my-plugin\/myimages\/336x100\/336x100_3.jpg\\'><\/a><\/div>';\n\tivrss_obj\t= document.getElementById('ivrss_holder1_1');\n    ivrss_obj.style.height = (ivrss_numberOfElm * ivrss_heightOfElm) + 'px'; \n    ivrss_content();\n}\n<\/script> \n<script type=\"text\/javascript\">\nivrss_createscroll();\n<\/script> \n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Module installation steps<\/h2>\n\n\n\n<p>The first step is to download the module zip file from the download page and check the module version, it must be compatible with your Drupal version. That is, download the module ZIP file that specific to your version. For example, if you are using Drupal version 9.0, download the ZIP file that supports the Drupal 9.0 version.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method 1:<\/h2>\n\n\n\n<p>Extract the folder: To unzip the zipped folder, press and hold (or right-click) the folder, select the <strong>Extract<\/strong> option, and then follow the instructions. Finally, extract the <strong>vertical_image_scrolling<\/strong> folder from the downloaded ZIP file.<\/p>\n\n\n\n<p>Upload the folder: Using FTP (or Plesk\/cPanel), Upload the folder module folder into your server. You should upload the file into the modules directory in the Drupal core.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method 2:<\/h2>\n\n\n\n<p>If you face any difficulty in method one, follow this 2nd method to install your module. This is an easy method. However, you have to enable the <strong>Update manager module<\/strong> from your module list in order to get the <strong>Install new module<\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/extensions\/my-plugin\/screens\/drupal\/vertical_image_scrolling\/vertical_image_scrolling_install_new_module.png\" alt=\"vertical image scrolling drupal module installation\"\/><\/figure>\n\n\n\n<p>1. log in to your Drupal administration section and go to the <strong>Extend<\/strong> menu.<\/p>\n\n\n\n<p>2. On the <strong>Extend<\/strong> page click the Install new module button. if you cannot find the button, enable the <strong>Update manager module<\/strong> from your module list. now you can see the Install new module button on the page.<\/p>\n\n\n\n<p>3. Select the browse button on the upload page and upload the downloaded ZIP file to install the module.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Module configuration<\/h2>\n\n\n\n<p>1st step is to enable the module on your website. For that, Log in to your website and go to the Site Administration (Refer to the screen) and click Extend menu. Now you can see all the available modules. In the module list, find the module <strong>Vertical Image Scrolling<\/strong>, and then select its checkbox. Scroll to the bottom of the webpage, and then click the Install button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/extensions\/my-plugin\/screens\/drupal\/vertical_image_scrolling\/vertical_image_scrolling_enable_module.png\" alt=\"How to enable vertical image scrolling drupal module \"\/><\/figure>\n\n\n\n<p>2nd step is to place the block, navigate to the Structure menu and click the Block layout page. This is called the block placement page. On this page, you can see all the available placement (That is, all available regions specific to your theme to place the block).<\/p>\n\n\n\n<p>For example, if you want to add a Vertical Image Scrolling in your First Sidebar section, click the Place Block button near your First Sidebar title. It will open the small window to add the block. In that window, again click the Place Block button near the module. This action adds the module to your First Sidebar section.<\/p>\n\n\n\n<p>Finally, open your website front end and see this module in the selected location. Navigate to the configuration page of the module, and updates the default module setting. Refer to the below screen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Block layout configuration<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/extensions\/my-plugin\/screens\/drupal\/vertical_image_scrolling\/vertical_image_scrolling_configure_block.png\" alt=\"vertical image scrolling drupal module block configure\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Download location<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/extensions\/2017\/04\/drupal-module-vertical-image-scrolling-download-link\/\">http:\/\/www.gopiplus.com\/extensions\/2017\/04\/drupal-module-vertical-image-scrolling-download-link\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Module official page with live demo<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/extensions\/2017\/04\/drupal-module-vertical-image-scrolling\/\">http:\/\/www.gopiplus.com\/extensions\/2017\/04\/drupal-module-vertical-image-scrolling\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Drupal page<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.drupal.org\/project\/vertical_image_scrolling\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.drupal.org\/project\/vertical_image_scrolling<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vertical Image Scrolling module will create the vertical scroll image slideshow on your drupal BLOCK LAYOUT. the module will create a slideshow gallery similar to the reel. The images will scroll one by one from bottom to top. Each image slide can be optionally hyperlinked. Options available in BLOCK configuration to set the images in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41],"tags":[40,18,8,6],"class_list":["post-1697","post","type-post","status-publish","format-standard","hentry","category-drupal-module","tag-drupal","tag-image","tag-module","tag-scrolling"],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/posts\/1697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/comments?post=1697"}],"version-history":[{"count":0,"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/posts\/1697\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/media?parent=1697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/categories?post=1697"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/tags?post=1697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}