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
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 ...Downloads
Version: 0.4.1b – 02/03/2010 DS Banner Slider – Free Banner Module by DS 0.4.1b (5161)
Version: 0.4b – 02/02/2010 DS Banner Slider – Free Banner Module by DS 0.4b (373)
Version: 0.3.1b – 01/27/2010 DS Banner Slider – Free Banner Module by DS 0.3.1b (1542)
Version: 0.3b – 01/22/2010 DS Banner Slider – Free Banner Module by DS 0.3b (663)
Version: 0.2b – 01/21/2010 DS Banner Slider – Free Banner Module by DS 0.2b (219)
Version: 0.1b DS Banner Slider – Free Banner Module by DS 0.1b (706)
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 Ro – Pending 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!
Good post, thanks. Just wondering, what theme did you use for the site? I like it a lot.
Thanks for the support, the theme was self made. If you like it, we can make this download-able later.
Still there's a lot of tweak we are still working on.
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
Thanks Jenny,
Thanks for submitting to our feed.
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;
Hi Mark,
you can email me at vincent@designersandbox.com
Just released the bug fix version which clear the mootools conflict problem.
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.
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?
Hi. Nice blog. Certainly
Good article…I will use some of these design principles myself…more good info please…
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)
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
Thank you
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
Excellent works a treat. Thank you for the fast response. I look forward to future releases.
Hi,
i install the module in joomla 1.5, but the control buttons dont work in safari and chrome.
what i can do?
Hi Sergio,
Which version are you referring to?
we had test this banner slider on all browser.
Can you send your link by email and I can help you out on it. vincent@designersandbox.com
Be sure to download the latest version, and see if this had fixed your problem.
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)
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.
Hi Hristo Yanev,
You can input a different unique id "Unique ID for this AJAX Banner" in this field.
ie. rotator1, rotator2, rotator3, and so on…
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
Hi Huw,
Please set the height for your banner with a number,
as IE need the height for this banner to able to show properly.
Also try to resize all your banner/logo to the same width and height so the image won't got deform.
Hi Guys,
Thanks for that. Settinga value instead of auto for the hight was it. I will also resize the images to the same height and width.
Many thanks.
Kind regards,
Huw
Hi Huw,
Good to know that it work for you.
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!
Sorry Kondzik,
the effect are not include yet.
We are also waiting for the script originate author to release the next version.
Don´t show Flash (swf) banners?
Sorry, not in the current version.
Will add that into our roadmap.
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?
This could be a css problem, can you show me the link?
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
Hi cincilator,
Simply in the "Elements In Page" type in 1 to only show 1 banner.
You may also want to set "Elements Margin" to 0.
Have fun
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
Surely you can do this with css
Let me think of this a hack or tuts for you later.
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.
I have check on all version of brower on your site.
http://www.seasunset.nl/
and found that IE6 is not working properly throughout your whole site.
I found that ie7 is working properly. am i looking at the wrong site?
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.
Hi George Bezerra,
Please send me the link so that I can further investigate.
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
Hi Sergio Susa,
Try setting the elementMargin: from 4 to 0
and also set a fix height for the banner as well.
Regards
Vincent
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.
Hi Val,
Yes this is going to be available in a later build.
Because this script are base on a script from the jquery community.
I am also waiting for the Original Author to release the next improve version.
Once he confirmed the date, we will then converted into this module.
Original Script are by Matteo Bicocchi at open-labs.com
http://pupunzi.open-lab.com/mb-jquery-components/...
Regards,
Vincent
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