Joomla – DS Banner Slider – Free Banner Module by DS

StumbleuponDelicious

Joomla – DS Banner Slider, Scroll your banner! So why do we need to create another banner slider, well we know there’s just so many banner slider out there that can do the tricks for you, but sometimes we would just love to use the banner component as a purpose of slideshow for simple use of unlink slideshow. This module was inspire by open-lab:Matteo Bicocchi, special thanks for his jquery mb.scrollable plugin, we had modify his code a bit and transform it into joomla modules.

Downloads
Known Issues and Bugs
Demo
Version Changelog

DS Banner Slider – Features

Enable to multi-select Banner Clients in Selection Box
Enable to Set banner Limit
Enable to multi-select Banner Categories in Selection Box
Enable to select banner ordering

Enable to set Unique id for each banner, multi banner sliders on 1 page.

Enable to Hide/Show Banner Description
Enable to Change Description Font Color
Enable to Change Font Size
Enable to Position the Description Text
Enable to do Text Align

Enable to Hide/Show Banner Control
Enable to Hide/Show Previous and Next Button
Enable to Hide/Show First and Last Button
Enable to Hide/Show Number Indexing
Enable to Hide/Show Start and Stop Button

Enable to disable all banner links incase of slideshow purpose only.

DS Banner Slider – Information


DS Banner Slider on Joomla Extension Page
Demo

Be Sure to Subscribe to our feed or follow us on twitter to get the latest updates/patches

This Module work best with DS Busuit – Joomla Premium Free Template

Simply download and install it your joomla site.
Download DS BUSUIT TEMPLATE from here

Before you download this template. Please take a vote on the following poll.

Next Free Joomla Development Selection

  • DS Mega Shop Template - Virtuemart (63%, 138 Votes)
  • DS Premier Template - Blog (37%, 81 Votes)

Total Voters: 219

Loading ... Loading ...

Version Changelog:

Version 0.4.1b Bug Fix on Multi Clients Selection Problem, and placing the CSS to the header through Joomla “addCustomTag”.

Code change in mod_ds_banner_slider.php

Original Code

$where = "\n AND cid IN ( ".implode(',', $clientids)." )";

Replace it with

$where = "\n AND cid IN ( ".(is_array($clientids) ? implode(',', $clientids) : $clientids)." )";

Original Code

$uniqueid = "ajaxb_".$uniqueid;

Replace it with

$uniqueid = "dsbs_".$uniqueid;

Original Code

<style type="text/css">
<!--
#<?php echo $uniqueid; ?>horizontal{height: <?php echo $height; ?>px; width: <?php echo $width; ?>px; *overflow:hidden;}
#<?php echo $uniqueid; ?> div.description {width: <?php echo $width - $desrigpad - $deslefpad; ?>px;}
#<?php echo $uniqueid; ?> img {border:0;}
#<?php echo $uniqueid; ?> .description {<?php echo $deshide; ?> position: absolute;font-family:sans-serif;font-size:<?php echo $dessize; ?>; color:<?php echo $descolor; ?>;padding:<?php echo $destoppad; ?>px <?php echo $desrigpad; ?>px <?php echo $desbotpad; ?>px <?php echo $deslefpad; ?>px;text-align:<?php echo $desalign; ?>;width:<?php echo $desinnerwidth; ?>%;}
#<?php echo $uniqueid; ?> .scrollEl {}
#<?php echo $uniqueid; ?><?php echo $controls; ?> {position:relative; padding:0 10px; margin-top:-50px; <?php echo $controls_hide; ?> text-align:<?php echo $controlfloat; ?>;}
#<?php echo $uniqueid; ?><?php echo $controls; ?> div {font-family:sans-serif;margin-top:5px;background:#fff;display:inline-block;padding:6px;cursor:pointer; zoom: 1; *display:inline; filter:alpha(opacity=<?php echo $opacity; ?>); -moz-opacity:<?php echo $opacity / 100; ?>;-khtml-opacity: <?php echo $opacity / 100; ?>;opacity: <?php echo $opacity / 100; ?>;}
#<?php echo $uniqueid; ?><?php echo $controls; ?> .sel {color:black !important;font-weight:bold;}
#<?php echo $uniqueid; ?><?php echo $controls; ?> .disabled {color:gray;}
#<?php echo $uniqueid; ?><?php echo $controls; ?> .page {padding:5px;color:gray;}
-->
</style>

Replace it with

<?php
    $document = & JFactory::getDocument();
    $document->addCustomTag('
	<style type="text/css">
	<!--
	#'.$uniqueid.'horizontal{height: '.$height.'px; width: '.$width.'px; *overflow:hidden;}
	#'.$uniqueid.' span.description {width: '.($width - $desrigpad - $deslefpad).'px;}
	#'.$uniqueid.' img {border:0;}
	#'.$uniqueid.' .description {'.$deshide.' position: absolute;font-family:sans-serif;font-size:'.$dessize.'; color:'.$descolor.';padding:'.$destoppad.'px '.$desrigpad.'px '.$desbotpad.'px '.$deslefpad.'px;text-align:'.$desalign.';width:'.$desinnerwidth.'%;}
	#'.$uniqueid.' .scrollEl {}
	#'.$uniqueid.$controls.' {position:relative; padding:0 10px; margin-top:-50px; '.$controls_hide.' text-align:'.$controlfloat.';}
	#'.$uniqueid.$controls.' div {font-family:sans-serif;margin-top:5px;background:#fff;display:inline-block;padding:6px;cursor:pointer; zoom: 1; *display:inline; filter:alpha(opacity='.$opacity.'); -moz-opacity:'.($opacity / 100).';-khtml-opacity: '.($opacity / 100).';opacity: '.($opacity / 100).';}
	#'.$uniqueid.$controls.' .sel {color:black !important;font-weight:bold;}
	#'.$uniqueid.$controls.' .disabled {color:gray;}
	#'.$uniqueid.$controls.' .page {padding:5px;color:gray;}
	-->
	</style>
    ');
?>

Original Code

echo '<div class="description'.(empty($banner->imageurl) ? '_noimage' : '').'">'.$banner_text.'</div>';

Replace it with

echo '<span class="description'.(empty($banner->imageurl) ? '_noimage' : '').'">'.$banner_text.'</span>';

Version 0.4b Bug Fix on Multi Clients Selection Problem, and Added Controller Transparent setup.

Code change in mod_ds_banner_slider.php

Original Code

$controls_hide	= trim( $params->get( 'controls_hide' ) );
$first_last 	= trim( $params->get( 'first_last' ) );

Replace it with

$controls_hide	= trim( $params->get( 'controls_hide' ) );
$opacity        = intval($params->get( 'opacity', 100 ) );
$first_last 	= trim( $params->get( 'first_last' ) );

Original Code

if ( $clientids != '' ) {
    $where = "\n AND cid IN ( $clientids )";
}

Replace it with

if ( $clientids != '' ) {
    $where = "\n AND cid IN ( ".implode(',', $clientids)." )";
}

Code change in mod_ds_banner_slider.xml

After this code

<param name="controls_hide" type="list" default="" label="Hide Control" description="Option to show or hide the control.">
	<option value="">Show</option>
	<option value="display:none!important;">Hide</option>
</param>

Add the following code

<param name="opacity" type="list" default="100" label="Controller Opacity" description="Controller Opacity">
	<option value="10">10%</option>
	<option value="20">20%</option>
	<option value="30">30%</option>
	<option value="40">40%</option>
	<option value="50">50%</option>
	<option value="60">60%</option>
	<option value="70">70%</option>
	<option value="80">80%</option>
	<option value="90">90%</option>
	<option value="100">No Transparency</option>
</param>

Version 0.3.1b Bug Fix on css IE6 Padding Problem, IE6 Display Problem, Description Display Not Aligning center

Original Code

$elementMargin	= intval($params->get( 'elementMargin', 4 ) );

Replace it with

$elementMargin	= intval($params->get( 'elementMargin', 0 ) );

Original Code

#horizontal{height: px; width: px;}
# div.description {width: px;}

Replace it with

#horizontal{height: px; width: px; *overflow:hidden;}
# div.description {width: px;}

Version 0.3b Bug Fix on css IE6 and IE7 display inline-block problem

Original Code

# div {font-family:sans-serif;margin-top:5px;background:#fff;display:inline-block;padding:6px;cursor:pointer;}

Code we had replaced

# div {font-family:sans-serif;margin-top:5px;background:#fff;display:inline-block;padding:6px;cursor:pointer; zoom: 1; *display:inline;}

Version 0.3b Bug Fix on IE6 and IE7 spacing problem

Original Code


<div class="first">first</div>
'; } ?>

<div class="prev">prev</div>
<div class="next">next</div>
'; } ?>

<div class="last">last</div>
'; } ?>

'; } ?>

<div class="start">start</div>
<div class="stop">stop</div>
'; } ?>

Code we had replaced


<div class="first">first</div>
'; } ?>
<div class="prev">prev</div>
<div class="next">next</div>
'; } ?>
<div class="last">last</div>
'; } ?>

'; } ?>
<div class="start">start</div>
<div class="stop">stop</div>
'; } ?>

Version 0.2b Bug Fix on jQuery conflict with mootools

Original Code

$(document).ready(function() {
        $("#").mbScrollable({

Code we had replaced

jQuery.noConflict();
jQuery(document).ready(function() {
        jQuery("#").mbScrollable({

If you are using this module, be sure to send me a link or give me some comments.
This will help us in the future release or development.

Known Bugs / RoadMap

Bug Report

  • N/A

Bug Fixed

  • IE6 Padding Problem – Fixed and available on version 0.3.1b
  • IE6 Display Problem – Fixed and available on version 0.3.1b
  • Description Display Not Aligning center – Fixed and available on version 0.3.1b
  • Currently Multiple client are not supported, when multi client are selected it will generate a error. – Error was found by RoPending and will work on it in the beginning of February. – Fixed and available on version 0.4b

RoadMap

Function(s) coming up for the next release

  • W3C – Putting the css to the template header
  • Change the div to span from the a tag
  • Adding the alt tag to the image
  • You can set the controller in transparent mode – We had done it in the demo page. But we still need to code it in, so user can manage it from the module admin panel. – Completed and available on version 0.4b

Special Thanks To

Michael Wai, from Hong Kong
Miguel Tuyaré, alias Tux Merlin, from Argentine

Be a link sponsor for this page now


I hope you have enjoyed this post, be sure to subscribe to my rss feed by click the subscribe button at the top.

Good Luck!

Be Sure to Subscribe to our feed or follow us on twitter to get the latest updates/patches
End of Article, Thanks for reading.
You can leave a response, or trackback from your own site.
StumbleuponDelicious

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

47 Responses to “Joomla – DS Banner Slider – Free Banner Module by DS”

  1. R. Lynde says:

    Good post, thanks. Just wondering, what theme did you use for the site? I like it a lot.

  2. Hi,

    You have a Great Blog, I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep it up.

    Jenny

  3. mark says:

    HI, this module looks encouraging. I like the setup and management. I'm having two problems and didn't know where else to ask.

    The use of the module changes the formatting of my Superfish menu. If you like, I'll work with you via private mail to troubleshoot.

    Also, I get several error messages when loading. The issue seems to point to the mod_ds_banner_slide.php file at line 154.

    $imageurl = $baseurl."images/banners/".$banner->imageurl;

  4. Dan says:

    hey
    ive set this up on my site however its not displaying any images
    its not pulling the images from the images/banners folder
    should the images be somewhere else
    thanks for any help you can give

    • Did you use the Joomla Default Banner Component to setup the banner?
      This module will load the banner category or client when you had set it up.

      • KKN says:

        Hi, mine also does not show pull any images from the images/banners folder. Yes, those banners are created from the default Joomla Banner Component. Do I need to unpublish those already active banners?

  5. FRANK REED says:

    Hi. Nice blog. Certainly

  6. Good article…I will use some of these design principles myself…more good info please…

  7. Can you tell me more how this is not working.
    Because we had tested on all browser and seems it's working.
    Do you have a link, screen shot or source for me to take a look at?
    Most of my client using this doesn't have the problem.
    Browser that we had test this on:
    IE6, IE7, IE8, FireFox3, FireFox3.5, SAFARI3, SAFARI4, Chrome3.0
    Know issue with FireFox2.0(display inline, block problem with the controller)

  8. Mike says:

    I would like to set the controls to transparent so that they don't appear so prominent. How would I do that.

    Also is there any plans to have different transitions such fade in fade out.

    • Yes, this is going to be our next next release.
      You can set the transparent on the css for the controller.
      are you familiar with css?
      But this wont' work on ie6 and ie7

    • Hi Mike,
      To set the contorller div block to a transparent state. Simple open your module file
      mod_ds_banner_slide.php
      File locate at: moduels/mod_ds_banner_slide.php
      Find where #<?php echo $uniqueid; ?><?php echo $controls; ?> div
      Before the closing } add in the following code.
      filter:alpha(opacity=20); -moz-opacity:0.2;-khtml-opacity: 0.2;opacity: 0.2;

      This should work across all browser.
      I will add this transparent function into my next release.
      Thanks for the great idea

      The Best Is Yet To Come
      DesignerSandbox

  9. Sergio Susa says:

    Hi,

    i install the module in joomla 1.5, but the control buttons dont work in safari and chrome.

    what i can do?

  10. milan says:

    Excellent work,

    I just love the template. However, I have one issue I can't solve. I always get this notice:

    "Notice: C:wampwwwmysitemodulesmod_ds_banner_slidemod_ds_banner_slide.php 136"

    This results in having 12 navigation buttons (and 12 banners, 10 of which are empty), instead of the only two banners I used. On the *empty* banners, I get the notice I quoted.

    Any suggestions? Thanks in advance

    • Hi Milan,
      Be sure to download the latest version of the banner.
      If problem persist, please send me a email of your site, I can help you take a look to it.
      Regards,
      Vincent (vincent@designersandbox.com)

  11. Hristo Yanev says:

    Hello there,
    I really like the module, excellent job. I have a question about the following thing: I want to make the module control my other 2 slots of banners on the same page. Can you help me with this issue? Please!

    Thank you in advance.

  12. Huw says:

    Hi Guys,
    I have installed your DS Banner module, which works fine in Firefox, Google Chrome, Opera and Safari but does not in Microsoft IE 8 or in Microsoft IE8 in compatability mode. I m using the latest .04b version of the module. The web site I am using the module on is http://www.ospreysailing.org.uk.

    Look forward to hearing from you guys. Thanks for the excellent module.
    Huw

  13. Kondzik says:

    Wow, great stuff guys, really usefull, i'm gonna donate if I win my next project. And a question: is it possible to aply different effect than sliding for example fading? I mean in an easy way without waiting for a next release.
    Thanks!

  14. Don´t show Flash (swf) banners?

  15. Tomas says:

    Excellent module but unfortunately i cannot use it…

    the problem is that banners do not rotate but rather appear on vertical order… No rotating, no active buttons no nothing…

    probably a conflict with my template? Any suggestions?

  16. cincilator says:

    Hy, I need help
    I put 4 banners in user4 beez tempalte, but they overlap on each other

    I dont know how to fix this
    http://www.centar-pramac.hr

  17. dman says:

    Hi, Thanks for this module. I'd like to change appearance of navigation buttons eg to standard playback, fwd/ bckwd symbols. I'd appreciate any tips. Cheers

  18. Robert says:

    Hi, I like DS-Banner and it works great!
    It works with Chrom, Firefox, however ofcourse ofcourse NOT with IE7. IE7 displays just an image of 1px. (Don't know about IE6/8 yet). I enter this report before I start digging for hours/days…you might have seen this phenomenom already. Any help would be fantastic.

  19. George Bezerra says:

    Great extension, I looked all around for something like that and couldn't find anywhere else. Banners rotate perfectly, and the controls and options are excellent! I was able to use CSS to customize it to my needs.

    However, I had a problem. If I use the module with no custom settings at all (no CSS or anything), default options and 2 banners, it works like a charm on IE and Firefox. However, Safari 4 and Chrome shows all buttons except for the numbering buttons. Instead, they show a tiny blank box where the "pageIndex" div should be.

    I have a guess that Safari 4 and Chrome don't understand something at the jQuery you used to create the "page index" (numbering buttons), but it's just a guess.

  20. Sergio Susa says:

    hi,

    i have a problem with the extension when i see it in google chorme, itns work, the next prev bottom dosnt move the images.

    look at

    http://www.metalbogota.net

    the big banner.

    thank for any help

  21. Val says:

    Hi, great plugin, thanks for sharing!

    I was wondering if there was a way to stop the slideshow displaying the banners in a "start to end, end to start, start to end…" loop?

    At the moment it plays banner 1, 2, 3, 4, 5, and then goes back 5, 4, 3, 2, 1, then again 1, 2, 3, 4, 5.
    Is there a way to have it jump directly to the first slide? Like 1, 2, 3, 4, 5, 1, 2, 3, 4, 5…

    Thanks in advance if you can help.

  22. Rajesh says:

    Hi, I have installed "mod_ds_banner_slide" module into the template( http://wavingattrains.com/beep15/ ) and this module position is set to the Header position.
    Now i am facing one problem. i.e, when i am trying to place the mouse cursor on the menus, The drop down menu list is hiding with ds_banner_slide module article / image.

    Can suggest me any one you, how to solve this problem.

    • Hi rajeshlab,

      I believe this is a template problem.
      I think this problem only exist on certain browser like IE.
      You can try to define the z-index for your #nav to be higher.
      should be in your menu.css file. Try to tweak this file and see if you can get the problem fixed

Leave a Reply