Transitions and Pause on Hover Patches
CandC540 - March 13, 2009 - 19:34
| Project: | Views Rotator |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | CandC540 |
| Status: | needs review |
Description
These patches add the following bug fix/features
- Fixed the Pause rotation when the mouse is over the area bug
- Updated JQuery Cycle to version 2.56
- Added JQuery Cycle transitions
- Added Transition selection box to the Views Rotator configuration in Views
I've done some basic testing today and so far so good. Please test this and let me know if you have any issues.
| Attachment | Size |
|---|---|
| views_rotator.module.patch | 1.03 KB |
| views_rotator_style_plugin.inc.patch | 2.22 KB |
| views-rotator.js.patch | 35.16 KB |
#1
I think the end of the patch got cut off for some reason...
patch: **** malformed patch at line 51: \ No newline at end of file
#2
I used NetBeans to create the patches. Does anyone have a better method for making patches in Windows? I'll try to make them again, but don't have time now. Hopefully I'll get the patches uploaded soon, but until then, here's the files already patched for testing.
#3
http://drupal.org/patch/create.
The transition effect select on the views ui works well. The Prev button does not reverse the direction of the effect though...
edit: my bad, the reverse does indeed work...
#4
it may be cool to touch bases with the jquery plugin guys and them to update to the latest version of cycle and use that api instead of including your own version of jquery.cycle.js http://drupal.org/project/jquery_plugin
#5
It also might be nice to have an option to just show the navigation elements without having to hover over the images. Also adding a views pager doesn't seem to work (at least in a block), so the option to show a pager using the cycle plugin would pretty much complete the feature set...
http://www.malsup.com/jquery/cycle/pager11.html
$(function() {
$('#slideshow').cycle({
fx: 'scrollHorz',
timeout: 0,
prev: '#prev',
next: '#next',
pager: '#nav',
pagerAnchorBuilder: pagerFactory
});
function pagerFactory(idx, slide) {
var s = idx > 2 ? ' style="display:none"' : '';
return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>';
};
});
#6
Here's the latest files with the JQuery Plugin API call added to the views-view-rotator.tpl.php file and I removed the cycle plugin from the views-rotator.js file. I also added JQuery Plugin to the dependency list. Included is the full set of files with changes (because I still can't make proper patches).
About the other changes/feature requests, we'll have to talk about those in more detail before I can begin to try to tackle them.
#7
FYI, this module is going to be integrated with the other cycle based modules when there is time. Hopefully all of this stuff can be fixed at that point.
Sorry for the delay.
#8
Great additions. These fit nicely. I did have one issue however that I'm trying to address. For some reason, the updated files add 5 pixels to the height of the container. I looked through the code and found this:
<div class="views-rotator-item" style="position: absolute; top: 0px; left: 0pt; display: block; z-index: 3; opacity: 1; width: 878px; height: 243px;"><div class="views-field-field-imageupload-imceimage-path">
<span class="field-content"><img height="239" width="878" id="imceimage-field_imageupload-0" alt="" src="/GLTDev/sites/default/files/splashImg/splash1.jpg"/></span>
</div>
</div>
Notice the height of the image is 239px, but the generated style information is 4px more, 243px. My problem is I cannot find where this style code it highlighted. Can someone direct me to where this style code is generated? I'd like to remove the excess 4px if possible. Its interferring with the page theme.
I understand this isn't officially supported, but I appreciate any help!
UPDATE: Figured it out for those interested...you just need to declare the width and height of the container in your theme CSS using:
div.views-rotator-item,div#views-rotator {
width: xxx;
height: xxx;
margin: 0;
padding: 0;
}