Create a Video Slideshow with OSYouTube and Flexslider in Joomla

OSYouTube[1] is a very useful Joomla plugin that allows you to embed videos easily. Flexslider is a jQuery plugin to create slideshows.

By using both of these together, plus template overrides, you can create a video slideshow.

In this tutorial, I'll show you how to combine FlexSlider and OSYouTube to display your video embeds inside a slideshow.

Step #1. Download and Install OSYouTube

7
  • Install through Extensions > Manage > Upload and Install

Step #2. Create the content

First, let's create a category. In my example I'm going to call it "Videos":

  • Content > Categories > Add new category

Now, let's create articles assigned to the new category:

  • Content > Articles > Add new article
  • Set a title
  • In the body, paste the URL of a YouTube video
8
  • Assign the article to the new category.
  • Save when you're done.

Create as many articles you need. Each article should include a single video.

Step #3. Create a template override

  • Go to Extensions > Template manager > Templates
  • Go to the "Create overrides" tab.
  • Click mod_articles_news
newsflash joomla
  • This will create a set of files in /templates/yourtemplate/html/mod_articles_news/
newsflash joomla

Step #4. Integrate Flexslider 2

  • Download Flexslider[2] from the developer's page
  • Decompress the zip file
  • Look for the jquery.flexslider-min.js file and move that inside your /templates/yourtemplate/js/ folder
  • Look for the flexslider.css file and move that inside your templates/yourtemplate/css/ folder
  • Look for the fonts folder and move that inside your templates/yourtemplate/css/ folder

Step #5. Customize the override

  • Create a new PHP file named slideshow.php
  • Save it inside templates/yourtemplate/html/mod_articles_news/
newsflash joomla
<?php
defined('_JEXEC') or die;
$app = JFactory::getApplication();
JHtml::_('stylesheet', 'templates/' . $app->getTemplate() . '/css/flexslider.css');
JHtml::_('script', 'templates/' . $app->getTemplate() . '/js/jquery.flexslider-min.js');
?>

<div class="newsflash flexslider <?php echo $moduleclass_sfx; ?>">
    <ul class="slides">
        <?php foreach ($list as $item) : ?>
            <li><?php require JModuleHelper::getLayoutPath('mod_articles_news', '_item'); ?></li>
        <?php endforeach; ?>
    </ul>
</div>

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('.flexslider').flexslider({
        animation: "slide",
        slideshow: false
    });
});
</script>

Take a look at this part of the code below. This code loads the new Javascript and CSS files.

JHtml::_('stylesheet', 'templates/' . $app->getTemplate() . '/css/flexslider.css');
JHtml::_('script', 'templates/' . $app->getTemplate() . '/js/jquery.flexslider-min.js');

This code below executes the jQuery plugin in the elements with the flexslider class and prevents the slideshow from autoplaying.

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('.flexslider').flexslider({
        animation: "slide",
        slideshow: false
    });
});
</script>

Note: if your template doesn't use jQuery, add this line before loading flexslider.css:

JHtml::_('script', 'media/jui/js/jquery.min.js');
JHtml::_('script', 'media/jui/js/jquery-noconflict.js');

Step #6. Create a Newsflash module

  • Go to Extensions > Module manager > New
  • Choose Articles - Newsflash
  • Select the category
  • In Advanced > Alternative layout choose slideshow

Set the params as in the screenshot below:

9

Step #7. The end result

Go to the front of your site to check out how it looks, the content will update automatically thanks to the Newsflash module:

6

 


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.


References

  1. ^ OSYouTube (www.alledia.com)
  2. ^ Download Flexslider (flexslider.woothemes.com)

Read more

© 2023 Extly, CB - All rights reserved.