{"id":55,"date":"2011-07-16T07:51:56","date_gmt":"2011-07-16T07:51:56","guid":{"rendered":"http:\/\/www.gopiplus.com\/extensions\/?p=55"},"modified":"2021-09-23T15:12:58","modified_gmt":"2021-09-23T15:12:58","slug":"vertical-scrolling-images-joomla-module","status":"publish","type":"post","link":"https:\/\/www.gopiplus.com\/extensions\/2011\/07\/vertical-scrolling-images-joomla-module\/","title":{"rendered":"Vertical scrolling images Joomla module"},"content":{"rendered":"\n<p>This Joomla module will create the vertical scroll image slideshow on your website. This slideshow scrolls the images like reel. Images will scroll like reel from bottom to top gradually. This is a simple JavaScript slideshow and no jQuery is used in this slideshow. You can optionally hyperlink all the images in this slideshow. It retrieves images from the specific folder; we can change this folder location in the administrator section. And width and height of this slideshow are changeable in the admin.<\/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<!-- Joomla Page Center 1 - 336x280 -->\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=\"6090998934\"><\/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<!-- Joomla Page Center 2 - 336x280 -->\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=\"7338131803\"><\/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<ul class=\"wp-block-list\"><li>Easy to customize.<\/li><li>Support all browser.<\/li><li>Vertical image scroll gallery.<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Module <strong>live demo<\/strong> available in this page. You may also be interested in <a href=\"http:\/\/www.gopiplus.com\/extensions\/2011\/07\/drop-in-image-slideshow-gallery-joomla-module\/\">Drop in image slideshow gallery<\/a> Joomla 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<\/h2>\n\n\n\n<p>1. Download the <strong>Vertical scrolling images<\/strong> module from the <a href=\"http:\/\/www.gopiplus.com\/extensions\/download\/\">download<\/a> location. Select the correct ZIP file depends on your Joomla version.<br>2. Login into the administrator section of your Joomla site.<br>3. In the menu, Go to <strong>System<\/strong>, <strong>Install<\/strong> and then click the <strong>Extensions<\/strong> menu.<br>4. Click <strong>Browse<\/strong> and select the module you downloaded, then click <strong>Upload &amp; Install<\/strong> button.<br>5. When your Joomla module has been uploaded and installed successfully, you will see a confirmation message.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Admin screen for Joomla 3.7<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/extensions\/my-plugin\/screens\/joomla\/common\/joomla_3.6_menu_extensions_module.png\" alt=\"Vertical scrolling images module\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Admin screen for Joomla 4.2<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/extensions\/my-plugin\/screens\/joomla\/common\/joomla_4.2_menu_extensions_module.png\" alt=\"Vertical scrolling images Joomla module\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a new module instance<\/h2>\n\n\n\n<p>In your Joomla administrator section go to the <strong>Site Modules<\/strong> (System, Manage in your admin menu). You should see the module <strong>Vertical scrolling images<\/strong> listed among the others. Simply click on the module name to open the module editor.<\/p>\n\n\n\n<p>If you cannot find an instance of your new module, click the &#8216;new&#8217; button. The new module should be listed among the types available, select <strong>Vertical scrolling images<\/strong> which will create a new instance.<\/p>\n\n\n<div class=\"ads-row\">\n\t<div class=\"ads-column0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<!-- Joomla Page Center 3 -->\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=\"4975101454\"><\/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\">Module configuration<\/h2>\n\n\n\n<p>In your Joomla administrator section go to Manage, Site Modules, and select <strong>Vertical scrolling images<\/strong> module from the list then click Module tab to add\/update default configuration.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/extensions\/my-plugin\/screens\/joomla\/mod_vertical_scrolling_images\/mod_vertical_scrolling_images.png\" alt=\"Vertical scrolling images Joomla module\"\/><\/figure>\n\n\n\n<p>Title: It is essential to set a title for the module.<br>Position: The position on the page where the module will be displayed.<br>Status: The module needs to be published in order for it to display.<br>Image folder: Path to the image folder relative to the site URL. (e.g. modules\/mod_vertical_scrolling_images\/images)<br>Link: A URL to redirect to if the image is clicked upon.(e.g. http:\/\/www.gopiplus.com)<br>Display no of images: Display no of images at the same time in the scroll. (e.g. 3)<br>Height: Each image height in the scroll. (e.g. 80)<br>Module class suffix: Create a unique suffix name for each module<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Module official page<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/extensions\/2011\/07\/vertical-scrolling-images-joomla-module\/\">http:\/\/www.gopiplus.com\/extensions\/2011\/07\/vertical-scrolling-images-joomla-module\/<\/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\/extensions\/download\/\">http:\/\/www.gopiplus.com\/extensions\/download\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Joomla page<\/h2>\n\n\n\n<p><a href=\"https:\/\/extensions.joomla.org\/extension\/vertical-scrolling-images\/\">https:\/\/extensions.joomla.org\/extension\/vertical-scrolling-images\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vertical scrolling images joomla module will create the vertical scroll slideshow on the website. This will create the slideshow like reel. The images will scroll like reel from bottom to top.<\/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":[16,7,8,6,12],"class_list":["post-55","post","type-post","status-publish","format-standard","hentry","category-joomla-plugin","tag-images","tag-joomla","tag-module","tag-scrolling","tag-vertical"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/posts\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":0,"href":"https:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/posts\/55\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/media?parent=55"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/categories?post=55"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/tags?post=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}