{"id":2463,"date":"2021-12-25T12:49:02","date_gmt":"2021-12-25T12:49:02","guid":{"rendered":"http:\/\/www.gopiplus.com\/extensions\/?p=2463"},"modified":"2022-01-22T14:58:09","modified_gmt":"2022-01-22T14:58:09","slug":"moving-image-slider-joomla-module","status":"publish","type":"post","link":"http:\/\/www.gopiplus.com\/extensions\/2021\/12\/moving-image-slider-joomla-module\/","title":{"rendered":"Moving image slider Joomla module"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Moving image slider Joomla module moves the image within the fixed frame. This script will create an attractive image slider on the page and get the user attraction easily. We can easily set the random effect &#8220;zoom-in&#8221; or &#8220;Zoom-out&#8221; or &#8220;Pan Up&#8221; or &#8220;Pan Left&#8221; to add flare in the slider, with an optional description on the image. This Joomla module is using the JQuery script for the slider and this is a responsive slider that supports all the latest browsers and devices.<\/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\">Live Demo<\/h2>\n\n\n<div class=\"livedemo\">\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/www.gopiplus.com\/work\/my-plugin\/demo\/moving-image-slider.css\"  \/>\n<style>\n.mislider_container{\n\twidth: 100%;\n\theight: 480px;\n\tposition: relative;\n\toverflow: hidden;\n}\n<\/style>\n<script src=\"http:\/\/www.gopiplus.com\/work\/my-plugin\/demo\/jquery-moving-image-slider.js\"><\/script>\n<script>\n\tjQuery(function() {\n\t\tjQuery(\"#mislider_images\").smoothslider(\"install\", {\n\t\t\t\"playlist\":[\n\t\t\t\t\t\t{\"url\":\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/720x480\/1.jpg\", \n\t\t\t\t\t\t \"caption\":\" Moving image slider joomla module - demo image 1\",\n\t\t\t\t\t\t \"slide\":{\"z1\":1, \"z2\":1.5}},\n\t\t\t\t\t\t {\"url\":\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/720x480\/2.jpg\", \n\t\t\t\t\t\t \"caption\":\" Moving image slider joomla module - demo image 2 \",\n\t\t\t\t\t\t \"slide\":{\"z1\":2, \"z2\":1}},\n\t\t\t\t\t\t {\"url\":\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/720x480\/3.jpg\", \n\t\t\t\t\t\t \"caption\":\" Moving image slider joomla module - demo image 3 \",\n\t\t\t\t\t\t \"slide\":{\"y1\":0, \"y2\":200}},\n\t\t\t\t\t\t {\"url\":\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/720x480\/4.jpg\", \n\t\t\t\t\t\t \"caption\":\" Moving image slider joomla module - demo image 4 \",\n\t\t\t\t\t\t \"slide\":{\"x1\":0, \"x2\":20, \"z1\":1}},\n\t\t\t\t\t\t  {\"url\":\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/720x480\/5.jpg\", \n\t\t\t\t\t\t \"caption\":\" Moving image slider joomla module - demo image 5 \",\n\t\t\t\t\t\t \"slide\":{\"y1\":0, \"y2\":200}},\n\t\t\t\t\t\t],\n\t\t\t\"onimage\":function(caption, image_url) { \n\t\t\t\t\tvar area= jQuery(\"#mislider_message\").find(\"span\");\n\t\t\t\t\tarea.animate({\"opacity\": 0}, 500, \"swing\", function() {\n\t\t\t\t\t\tarea.text(caption);\n\t\t\t\t\t\tarea.animate({\"opacity\": 1}, 500);\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\"loops\": 10,\n\t\t\t\"loading\":jQuery(\"#mislider_loading\"),\n\t\t});\n\t});\n<\/script>\n<div class=\"mislider_container\">\n\t<div id=\"mislider_loading\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/my-plugin\/demo\/loading.gif\"><\/div>\n\t<div id=\"mislider_images\"><\/div>\n\t<div id=\"mislider_message\"><span><\/span><\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Module installation instruction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. Download the <strong>Moving image slider<\/strong> Joomla module from the download location. Selecting the correct ZIP file depends on your Joomla version.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Login into the administrator section of your Joomla site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. In the menu, Go to <strong>System<\/strong>, <strong>Install<\/strong> and then click the <strong>Extensions<\/strong> menu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">4. Click <strong>Browse<\/strong> and select the module you downloaded, then click <strong>Upload &amp; Install<\/strong> the module.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">5. When your Joomla module has been uploaded and installed successfully, you will see a confirmation message.<\/p>\n\n\n\n<img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/extensions\/my-plugin\/screens\/joomla\/common\/joomla_4.2_menu_extensions_module.png\" alt=\"Joomla menu for extensions module\" width=\"1100px\">\n\n\n\n<h2 class=\"wp-block-heading\">Creating a new module instance<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In your Joomla admin go to the <strong>Site Modules<\/strong> (<strong>System<\/strong>, <strong>Manage<\/strong> in your admin dashboard). You should see the module <strong>Moving image slider<\/strong> listed among the others. Simply click on the module name to open the module editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you cannot find an instance of your new module, click the <strong>new<\/strong> button. The new module should be listed among the types available, select the <strong>Moving image slider<\/strong> which will create a new instance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Module configuration<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In your Joomla administrator section go to the <strong>Site Modules<\/strong> (<strong>System<\/strong>, <strong>Manage<\/strong> in your admin dashboard) and select the <strong>Moving image slider<\/strong> module from the list then click the <strong>Module<\/strong> tab to add\/update scroll configuration.<\/p>\n\n\n\n<img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/extensions\/my-plugin\/screens\/joomla\/mod_moving_image_slider\/mod_moving_image_slider.4.0.png\" alt=\"Moving image slider Joomla module admin screen\" width=\"1000px\">\n\n\n\n<h2 class=\"wp-block-heading\">Frequently asked questions<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q1. How to upload images in this module<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the module admin, we have the option to update the images folder location, upload the images via FTP to your server and use the image folder location in the module admin. and this module loads the image directly from the given folder location.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q2. How to change the width and height of the slider window?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We have the option in the admin to change the slider width and height. This slider supports a responsive option. Thus, slide width is configured in the percentage value.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q3. Is this module using a jQuery script?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yes, this module is using jQuery script in the admin we have the option to include\/exclude the jQuery library from the module.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q4. How to show the image description on the image slider?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We do not have the option to enter the image description. However, This module has the facility to show the image name on the slider window. Just enable the description option in admin and it starts to display in the image name on the slider.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Module official page<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"http:\/\/www.gopiplus.com\/extensions\/2021\/12\/moving-image-slider-joomla-module\/\">http:\/\/www.gopiplus.com\/extensions\/2021\/12\/moving-image-slider-joomla-module\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Module download location<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"http:\/\/www.gopiplus.com\/extensions\/2021\/12\/moving-image-slider-joomla-module-download-link\/\">http:\/\/www.gopiplus.com\/extensions\/2021\/12\/moving-image-slider-joomla-module-download-link\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Joomla Page<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/extensions.joomla.org\/extension\/photos-a-images\/moving-image-slider\/\">https:\/\/extensions.joomla.org\/extension\/photos-a-images\/moving-image-slider\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Moving image slider Joomla module moves the image within the fixed frame. This script will create an attractive image slider on the page and get the user attraction easily. We can easily set the random effect &#8220;zoom-in&#8221; or &#8220;Zoom-out&#8221; or &#8220;Pan Up&#8221; or &#8220;Pan Left&#8221; to add flare in the slider, with an optional description [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[18,7,8,43],"class_list":["post-2463","post","type-post","status-publish","format-standard","hentry","category-joomla-plugin","tag-image","tag-joomla","tag-module","tag-slider"],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/posts\/2463","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=2463"}],"version-history":[{"count":0,"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/posts\/2463\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/media?parent=2463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/categories?post=2463"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/tags?post=2463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}