Fading and scrolling effects?
ktleow - July 5, 2008 - 01:07
| Project: | Rotor Banner |
| Version: | 6.x-1.x-dev |
| Component: | User interface |
| Category: | feature request |
| Priority: | normal |
| Assigned: | mrfelton |
| Status: | closed |
Description
It would be even better if these two features were implemented in the banner rotor.
- When it changes the images/banner after X seconds, the whole banner fades out, fades in the second banner
- Example of scrolling type is something similar to the html marquee, but when you mouse-over, the banner stops and vice-versa.

#1
Perhaps the fading could be implemented with the excellent innerfade javascript library (http://medienfreunde.com/lab/innerfade/)
#2
This would be a great feature and http://medienfreunde.com/lab/innerfade/ would be a good way to go about it because it's in jquery. Wouldn't be hard to implement, just a matter of editing rotor.js
I also like http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm what is also done in jQuery.
#3
or, http://malsup.com/jquery/cycle/
#4
Thanks mrfelton, I think jQuery cycle is the best option so far.
If anyone wants to make other suggestions I'll take a look and we can make a decission on which one to implement.
#5
I've put together a patch which enables a fading effect using the jquery cycle library. It adds an option to the administration page to control the speed of the fade. I used the minified version of the jquery library and embedded it right within rotor.js (I'm not sure if this is the right way to go about adding the external library). Seems to be working for me - please test.
This could be quite easily extended to provide addition effects and configuration options, but I wanted to keep it simple for now.
#6
Nice work :)
I noticed a post at http://groups.drupal.org/node/10866#comment-35837 about minified, it was in reference to the future of Drupal because they're looking to put minifying into core. All I can say is there's nothing worse than wanting to change some code and it's minified. In saying that people shouldn't technically be making changes to the cycle script.
Personally I would have a seperate cycle.js file and have it minified and if they put minifying into core for Drupal 7 we can then include the unminified version. The other advantage of having a seperate cycle.js file is quick drop in updates when a new version of cycle comes out.
Also just something to keep in mind; as of Cycle 2.23 it requires jQuery 1.2.3 or later.
Drupal 5 has jQuery 1.0.x so if this feature was back ported Rotor Module would need to depend on the jQuery Update 2.x module.
Drupal 6 is OK because it has at least 1.2.3
Haven't had a chance to test it just yet, let me know what you think about a seperate cycle.js
#7
Yeah, I think you're absolutely right about including it in a separate cycle.js. Good call.
With the cycle.js library, there is actually a lite version too which is only 3k minified (7k uncompressed) - but with that version you're limited to fading only, and adding the 'selected' class to the currently selected tab name isn't possible. The version I included is the core only, so if we do want to use additional effects (and I think it would be great to add some of these in with appropriate config options in the admin page) we will need to include the full library, or possibly a cut down version of the transition pack in addition to the core. - see http://malsup.com/jquery/cycle/download.html
Regarding backporting - I'm not touching Drupal 5 anymore, sorry!
ps. Did you see I also added a patch to do randomization :) see http://drupal.org/node/286671
--
Tom - Kirkdesigns
#8
Yeah I think a cut down version might be best. We could choose the most popular transitions.
I wish I didn't have to touch Drupal 5 but I have an e-commerce site for a client and they want this module, I'll also be using it on my own sites on Drupal 6.
I was just thinking in regards to your random image patch, a random transition would be cool as well.
#9
Attached is a reworked patch.
The module now depends on the jquery_plugin module to pull in the cycle javascript. I've added support for a load more effects in the admin page.
I have also added the option to specify the size of the adverts - this was necessary in order for the cycle effects to work nicely, since all the images must be loaded onto the page in a visible state before the effect kicks in. Knowing the width/height allows us to wrap it in a div with overflow:hidden. The module also now includes a small css file to handle this.
Please test/give feedback.
Tom
#10
Awesome, can't wait to test it, it's 1:30am here so I better test it in the morning.
I was just wondering does this now mean you need to use the same size images? Because I was thinking it'd be possible to pull the image size via javascript to remove this limitation. Might be easier for the general crowd who are a little less tech savy.
#11
Yes that's true. it would be nice to use JS to pull the image size. I guess it would need to scan all the images and choose the size of the largest (or smallest?) one though. People should really be using images of the same size, but you never know. Also I just noticed the currently when tabs are enabled and NOT grouped, they appear WITHIN the designated size, meaning that if you have defined the size as the size of the images, then the bottom of the image will be cut off.
#12
Yeah I can think of a few instances where I'd have different size images because I'm just using it for promoting things on my own site and sometimes the banner won't be as tall as another.
Can you let me know why you used jQuery plugins, I might understand better using jQ (http://drupal.org/project/jq), I think it's important to minimze dependencies if possible but also make sure we use the dependencies where they could improve the module. Just trying to get my head around it.
So I just tested your patch but my banner isn't rotating, just need to test a few things.
#13
Ok, needed to clear my cache, working great :) just testing all effects.
#14
All the effects look GREAT, this is awesome, good work. I tested it in IE7, Firefox 3, Safari, Opera, looks fine.
I found a post talking about detecting image size with Javascript:
http://www.webdeveloper.com/forum/archive/index.php/t-98502.html
Just gotta watch getting the image size if the image isnt yet loaded as mentioned on the last post. I was thinking a solution to this could be checking if the image was loaded using javascript and then runnign the function.
Also, I know I mentioned the ability to have a random effect but I'm starting to think a multiple select for the effect select box would be best, then people can just select the effects they want to use.
Also what do you think about adding
pause: 1,inside :
$('.rotor-items').cycle({It would stop the rotation if the user pauses over the top. Great if there's something to read.
#15
Found a bug:
If you use the "Group tabs" option and you click on the title of a tab it's supposed to go to that tab but instead it rotates through the first two and stops auto rotating. Haven't had a chance to look at whats causing this.
#16
Now I'm guessing that it's because when group tabs is on, the tabs are defined as the pager for the cycle - I did this to cater for the addition of the 'selected' class easily, but clearly negated the fact that it will now be used as the pager for the cycle!
+1 for pause: 1;
I used jquery_plugin because that's what I found - that's what was being used in http://drupal.org/project/slideshow_creator - never heard of http://drupal.org/project/jq. I'm kinda struggling to see what the difference is between the two actually. It seems that with jq, you would need to register the cycle plugin, whereas with jquery_plugin, it's already done (and I think is built ontop of jq).
#17
Yeah I couldn't tell the difference either. I'll look into it when I have time because I like the idea behind jq, it allows developers to import any jQuery plugin they may need.
#18
Yeah I couldn't tell the difference either. I'll look into it when I have time because I like the idea behind jq, it allows developers to import any jQuery plugin they may need.
#19
Try this one - it should fix the tab issue, add the pause on hover option & tidy up the admin page a little
#20
Nice :) it works.
I really like the added fieldsets. How about making them collapsible, just seems to be a Drupal default. I was going to write a patch but probally isn't worth the time. Just a matter of putting the following in the fieldsets of the next patch.
'#collapsible' => TRUE,'#collapsed' => FALSE,
#21
done :)
I'm hope I'm not going to be told off for doing too much in one patch!
#22
Maybe a cooperation with this module?
Check it out..
http://ddblock.myalbums.biz/node/18
#23
Yeah it would be awesome to merge these modules. Are you the author of that one wuf31?
#24
seems like a good idea to me. That module already seems to have slightly more functionality than this one, although some of it is done in a done slightly differnetly - kinda wish I'd found that before I started hacking away at the rotor module but it seems it's only just been released. Perhaps I'll try and get in tough with the author - unless that's you wuf31. BTW. SeanBannister - are you, or do you know the module author for rotor?
#25
No I don't know him his nick is nestor.mata http://drupal.org/user/208711
#26
Hi,
I am one of the co-authors of the Dynamic display block (ddblock).
We are currently still developing the module but..... will release it today on drupal.
see u soon in the issue queue with bugs, feature requests etc. etc.
Will see how long it takes to release a module. It's our first one to release to drupal.
so, work to do....
#27
Hi ppblaauw,
I just had a look at Dynamic Display Block and I'm pretty sure it does everything this module does apart from "tabs".
If we could add the functionality of tabs we could merge both these modules because Dynamic Display Block has many extra features. Tabs give you the ability to quickly click between each item, the title of the tab would be the name of the node that was used or the name of the image that was used.
Please post a link when you make a release on Drupal.
#28
I am not sure what you main by tab (is this the same as a pager in the dynamic display block module but them with image name/ node name as the pages).
Dynamic display block module released on drupal.
Just waiting for the tarball (once every 12 hours)
http://drupal.org/project/ddblock
#29
Oh yes, sorry forgot you had the pager. Yes if instead of the numbers it was the name of the node that would be great.
#30
This is fixed in CVS. Will release a new dev snapshot later tonight.
--
Tom
codegobbler.com - web design and development
#31
Automatically closed -- issue fixed for two weeks with no activity.
#32