Sunday, 22 November 2015 20:48

Full Width Slideshow

Written by 
Rate this item
(1 Vote)

There are times when you need to implement full width slider or slideshow in gantry framework for Joomla. It is not complicated but requires some work. First you need to edit index.php to add module position within body tag. This is very important part because you choose location of your full width sidebar. You are placing it among existing module positions. I have placed it just above showcase positions. See below how I have it done:

 

 

<?php /** Begin FullwidthSlider **/ if($gantry->countModules('fullslideshow')): ?>
<div id="rt-fullslideshow">
<div class="rt-container">
<?php echo $gantry->displayModules('fullslideshow','standard','standard'); ?>
<div class="clear"></div>
</div>
</div>
<?php /** End FullwidthSlider **/ endif; ?>
<?php /** Begin Showcase **/ if ($gantry->countModules('showcase')) : ?>

Second you need to add module position to templateDetails.xml. Part easy to forget...

You need to decide where in your design place this slideshow. Next you need some CSS styles to make it fit with your page. I use LESS, but there is easy to convert it to css and place in templatenName-custom.css. This file may not exits, you must create it, to make sure your changes are safe from future gantry updates.

#rt-fullslideshow{
width:100%;
height:500px;
z-index: 999;
overflow: hidden;
.rt-container{
position: fixed;
top: 0px;
left: 0px;
width:100%;
height: 100%;
.rt-block{
width:100%;
margin:0;
padding:0;
.module-surround{
overflow: hidden;
width:100%;
}
}
.rt-grid-12{
width:100% !important;
}

}
}

 

Now just select this position in your module manager.

I use custom template. If you are about to modify built in gantry default template im may be good to work with duplicate to avoid disappointent after update. Another thing worth mentioning is that gantry already have built-in fullwidth position, although not listed in template manager layout tab,. It is accessible through module manager,

Read 2292 times