Simple Slideshow

Simple Slideshow allows on to rotate a number of images within a Joomla article. Instead of displaying the images sequentially, Simple Slideshow uses dynamic HTML and CSS to display one image at a time, fading one out before fading another in.

You can install SimpleSlideshow like any other Joomla extension using the Joomla Extension Manager. One installed, please ensure that the plugin is enabled.

To use Simple Slideshow you must be using PHP5 and recent releases of Joomla 1.5. Simple Slideshow will not work on PHP4 or any version of Joomla 1.0.

Please feel free to ask questions about installation on the OurDataSolution Support Forum.

In order to use SimpleSlideshow, start by creating a DIV or P container within your article, and then insert the images into this element. Give the container a class of simpleslideshow and you're done.

The following HTML demonstrates how the final HTML should look.

<div class="simpleslideshow">
  <img src="/images/fruit/cherry.jpg" title="cherry.jpg">
  <img src="/images/fruit/pears.jpg" title="pears.jpg">
  <img src="/images/fruit/peas.jpg" title="peas.jpg">
  <img src="/images/fruit/strawberry.jpg" title="strawberry.jpg">
</div>
 
<p class="simpleslideshow">
  <img src="/images/food/bread.jpg" title="Bread">
  <img src="/images/food/bun.jpg" title="Bun">
  <img src="/images/food/coffee.jpg" title="Coffee">
  <img src="/images/food/milk.jpg" title="Milk">
</p>

Many of SimpleSlideshow's features depend on the JavaScript and Cascading Styling Sheet files that are installed into J/media/simpleslideshow/, where J represents the Joomla base installation path. To change any of the features, we recommend copying these files to new files, and then performing the modifications in the new files. When done, edit the SimpleSlideshow plugin via Joomla's Plugin Manager and select the new JS and/or CSS files.

After making the change, the new files should be viewable in the HTML source.

<link rel="stylesheet" href="http://host/media/simpleslideshow/simpleslideshow.css" type="text/css" />
<script type="text/javascript" src="http://host/media/simpleslideshow/simpleslideshow.js"></script>

Remember that the new files must be readable by the webserver. If file permissions prevent the file from being read, then it cannot be delivered to the web browser and SimpleSlideshow will not work. To test the the file permissions, try loading the stylesheet and scripts directly in the browser by passing the URL in the browser's address bar.

If you choose to modify the CSS file, please be aware that the images must use absolute positioning. Below is the default style defined in simpleslideshow.css .

.simpleslideshow {
	position:relative;
}
.simpleslideshow img {
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}

If you have questions about using SimpleSlideshow, please first browse the OurDataSolution Support Forum.