Sample Sidebar Module

This is a sample module published to the sidebar_top position, using the -sidebar module class suffix. There is also a sidebar_bottom position below the menu.

Sample Sidebar Module

This is a sample module published to the sidebar_bottom position, using the -sidebar module class suffix. There is also a sidebar_top position below the search.
S5 Media Player

Search our Site

Details
Category: Frontpage
Hits: 1535

The S5 Media Player is a very powerful, responsive, free to use, html5 audio and video player that will work on any device! It is based on the MediaElement html5 script, and comes loaded with features! Because this player is html5 based that means it will work on all devices, including Apple products. Setup is a breeze, with absolutely no programming knowledge needed at all. Please see some working examples below. Click Read More for a full list of options available.

At the bottom of this page you will see three example sermon blog posts using this plugin. This easily setup through the default blog category structure of the CMS itself.

MP4 Example:


The video above can be downloaded from http://www.creationswap.com/media/12703 for your use. It is not being re-distributed by shape5.com. This plugin does have the ability for a Download button for both audio and video.

Details
Category: Frontpage
Hits: 1749
The S5 Photo Showcase module is demo'd on the homepage. This module is an image display module that presents images and text in a sliding motion, while providing a sneak peek of the next and previous images. This is a great way to showcase your site's images and content. It comes with many great features that allow you to easily customize the look of the module and what content you would like to show.

The new version of this module includes the ability to pull in Joomla articles from categories you specify. Each slide will function just like a Joomla article. You can change order, display according to publish date, have unlimited number of slides, etc. The module also has the ability for the user to submit plain text and the module will stylize the content with default settings or you can enter your own custom html. The plain text option is great for users with limited css understanding and the html setting is for advanced users.

Module Features

1. Easily switch between article and html/plain text mode. The module will provide styling for plain text mode and html module allows you to enter your own custom html.
2. Content is totally option for each slide.
3. Publish an unlimited amount of pictures by using the article method. Publish up to fifteen pictures in total using the html/plain text mode.
4. Uses core Jquery calls to avoid javascript conflicts.
5. Set the width of the fluid width of the active image and the max width so that the active image will not get any larger than what is specified.
6. Set the number of seconds you would like each slide to show for.
7. Control style settings such as colors, font size, spacing, etc. for plain text mode.
8. In article mode choose to only show articles set to featured

Details
Category: Frontpage
Hits: 2605
The typed text extension will display text as shown below. You can add any HTML like a strong, href, etc tag to style the output. We've created 2 classes to place on the text so that the animated typing will only show on desktops. The reason for this is that the text doesn't wrap down to the next line on mobiles and other small screen devices. So you'll see the class "s5_typedstring_desktop" which hides the animation on mobile. And then then class "s5_typedstring_mobile" which shows alternate text in the animated text area for mobile:

We help you achieve the best outcome We help you achieve the premier outcome We help you achieve the most excellent outcome for your project

We help you achieve the
most excellent outcome for your project



The code used for this is below:

<div class="s5_typedstring s5_typedstring_desktop">
<span>We help you achieve the best outcome</span>
<span>We help you achieve the premier outcome</span>
<span>We help you achieve the most excellent outcome for your project</span>
</div>
<span id="typed" class="s5_typedstring_desktop" style="white-space:pre;"></span>
<h1 class="s5_typedstring_mobile s5_pc_center">We help you achieve the<br> <span class="s5_highlight1">most excellent outcome</span> for your project</h1>


Line 1 Line 2 Line 3


How to use?

You can use any of the sample code above but basically the script works as follows. Anything inside the first DIV with the class "typed1" is what the script will use to output as typed text. Then the span with the id="typed1" on it is where the script will output these lines of text and animate them. Both the class and id of "typed1" are set in the plugin admin area. You can set them to whatever you want. Just be sure to change both typed1 to whatever you enter in the plugin admin. You can see in our second example we did "typed2". Again this is just what we made up and entered in the admin of the plugin.