{"id":69,"date":"2011-07-16T16:23:08","date_gmt":"2011-07-16T16:23:08","guid":{"rendered":"http:\/\/www.gopiplus.com\/extensions\/?p=69"},"modified":"2021-09-23T14:50:34","modified_gmt":"2021-09-23T14:50:34","slug":"translucent-image-slideshow-joomla-module","status":"publish","type":"post","link":"http:\/\/www.gopiplus.com\/extensions\/2011\/07\/translucent-image-slideshow-joomla-module\/","title":{"rendered":"Translucent image slideshow Joomla module"},"content":{"rendered":"\n<p><strong>Translucent image slideshow<\/strong> gallery Joomla module will create an image slideshow on the website with a translucent effect. It&#8217;s not a simple image display. Images are animated from the left\/bottom edge, with a translucent effect applied during the process. Each image can be optionally hyperlinked. It retrieves images from the specific folder, we can change this folder location in the administrator section.<\/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 installation.<\/li><li>Easy slide show size (width &amp; height) override option.<\/li><li>Slideshow automatically pauses on mouse over.<\/li><li>Option to change the speed and effect delay.<\/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 style=\"padding-bottom:10px;\">Live Demo<\/h2>\n<script src=\"http:\/\/www.gopiplus.com\/extensions\/my-plugin\/demo\/mod_translucent_image_slideshow.js\" type=\"text\/javascript\"><\/script>\n<script type=\"text\/javascript\">\nvar TISG=new TISG_translideshow({\n\tTISG_wrapperid: \"myslideshow_1\",\n\tTISG_dimensions: [700, 450],\n\tTISG_imagearray: [[\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/700x450\/700x450_1.jpg\", \"http:\/\/www.gopiplus.com\/work\/\", \"_self\"],\n[\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/700x450\/700x450_2.jpg\", \"http:\/\/www.gopiplus.com\/work\/\", \"_self\"],\n[\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/700x450\/700x450_3.jpg\", \"http:\/\/www.gopiplus.com\/work\/\", \"_self\"],\n[\"http:\/\/www.gopiplus.com\/work\/wp-content\/uploads\/pluginimages\/700x450\/700x450_4.jpg\", \"http:\/\/www.gopiplus.com\/work\/\", \"_self\"]],\n\tTISG_displaymode: {type:'auto', pause:3000, cycles:15, pauseonmouseover:true},\n\tTISG_orientation: \"h\", \n\tTISG_persist: true, \n\tTISG_slideduration: 400\n})\n<\/script>\n<div><div id='myslideshow_1'><\/div><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Module installation<\/h2>\n\n\n\n<p>1. Download the <strong>Translucent image slideshow<\/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=\"menu extensions 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=\"menu extensions 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>Translucent image slideshow<\/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 <strong>New<\/strong> button. The new module should be listed among the types available, select <strong>Translucent image slideshow<\/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 <strong>Manage<\/strong>, <strong>Site Modules<\/strong>, and select the <strong>Translucent image slideshow<\/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_translucent_image_slideshow\/mod_translucent_image_slideshow.png\" alt=\"Translucent image slideshow\"\/><\/figure>\n\n\n\n<p><strong>Image folder:<\/strong> Path to the image folder relative to the site URL.<br><strong>Link:<\/strong> A URL to redirect to if the image is clicked upon. (e.g. http:\/\/www.gopiplus.com)<br><strong>Width:<\/strong> Enter the width of the slideshow. (e.g. 200)<br><strong>Height:<\/strong> Enter the height of the slideshow. (e.g. 150)<br><strong>Slideshow speed:<\/strong> Enter the speed of the slideshow. (e.g. 400)<br><strong>Slideshow delay:<\/strong> Enter the slideshow delay. (e.g. 3000)<br><strong>Slideshow effect:<\/strong> h= horizontal effect, v = vertical effect.<br><strong>Add jQuery:<\/strong> Select NO if your theme already has jQuery script<\/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\/translucent-image-slideshow-joomla-module\/\">http:\/\/www.gopiplus.com\/extensions\/2011\/07\/translucent-image-slideshow-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\/translucent-image-slideshow\/\">https:\/\/extensions.joomla.org\/extension\/translucent-image-slideshow\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This module will create a image slideshow on the website. It\u2019s not a simple image display. Images are animated in from the left\/bottom edge, with a translucent effect applied during the process. Each image can be optionally hyper-linked.<\/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":[18,7,8,11,17],"class_list":["post-69","post","type-post","status-publish","format-standard","hentry","category-joomla-plugin","tag-image","tag-joomla","tag-module","tag-slideshow","tag-translucent"],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/posts\/69","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=69"}],"version-history":[{"count":0,"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/posts\/69\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/categories?post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gopiplus.com\/extensions\/wp-json\/wp\/v2\/tags?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}