So close....crossfade anyone?
gdkt11 - April 3, 2009 - 19:54
| Project: | Views Slideshow |
| Version: | 6.x-2.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Description
I've got this so close to working as I need it to. The only question that remains is, is it possible to override part of the javascript so that the images crossfade? Or perhaps, instead of fading to white, fade to another color?
#1
Hello. Great module. I really wanted the cross fade style, so I've gone ahead and made a patch that accomplishes that. Have a look. It's made against the 1.0-beta1. Most of the work was in the .js file, but there was a little css and I removed the fade value setting, as it was no longer being used.
Tested in a couple themes and in Firefox and IE7.
Let me know what you think.
Cheers!
Jamie.
#2
gdkt11: If you'd like to have the images fade to a color other than white, all you need to do is set the CSS background color of one of the slideshow's container elements. For example, I set my container background color to #cccccc, so images fade to gray.
JamieR: Thanks for the patch, but it seems to be failing for me. When I run patch < views_slideshow.patch, I receive the following messages from patch:
patching file views_slideshow.cssHunk #1 FAILED at 1.
1 out of 1 hunk FAILED -- saving rejects to file views_slideshow.css.rej
can't find file to patch at input line 29
Perhaps you should have used the -p or --strip option?
The text leading up to this was:
--------------------------
|diff -upr views_slideshow_orig/js/views_slideshow.js views_slideshow/js/views_slideshow.js
|--- views_slideshow_orig/js/views_slideshow.js 2008-09-30 13:10:22.000000000 -0700
|+++ views_slideshow/js/views_slideshow.js 2009-04-08 00:11:45.000000000 -0700
--------------------------
File to patch:
Once I type in "js/views_slideshow.js" at the input, the other files are patched correctly. I then patch views_slideshow.css manually. When I reload my slideshow view after making all the changes, the module's behavior isn't quite as expected. In Firefox 3 and Safari 3 on Mac OSX, my image appears for 5 seconds, and then fades to white (disappear) for 5 seconds before fading back in to another image. It looks to me like the module is successfully crossfading, but it's always crossfading to and from white, instead of the next image.
Hopefully this helps! I'll play around with the code a bit more to see if I can get it working for me. I'd love to see this implemented as an option in future releases of Views Slideshows.
#3
Hmmm... sorry the patch didn't apply correctly. I'll see what I can do to fix that. I've also downloaded the newest stable release and will apply against that - unless you'd rather have it against the development trunk? Let me know. I'll have another patch soon. Thanks! Jamie.
#4
Okay, here's another patch that is just the bare minimum changes.
I think it still needs some work to finish the implementation...
We won't need the fade_value setting any more - it's not being used at all now. I suggest that we change this to be a setting for the time between the fade in and the fade out. That would allow people to have either a cross fade, or a fade to background - or anything inbetween. The setting could be just applied as a setTimeout() around line 82 in the .js file. I haven't done this, as it's all up to you and I'd like your thoughts. :)
Let me know if you can get this new patch to work. This time it's done from the 6.x-1.0-beta2 version. Again, let me know if you'd rather have it done off 6.x-1.x-dev.
Thanks!
Jamie.
#5
One other issue is poping up for me with the crossfade... since the block is being set to absolute positioning it's height isn't being kept, and anything below it will be overlapped. The fix is to have the views_slideshow_main class assigned a height. However that doesn't automatically scale to the correct height, and we would need a setting perhaps to assign the block height. :(
#6
I tried to commit the patch jamie but it wasn't applying well. I'd written some standalone JS for crossfading views, so I thought I would try and port it into this module.
Here is what I came up with. I've probably accidently overwritten some optional stuff however it seems to work for me. Obviously testing is much needed.
// $Id: views_slideshow.js,v 1.2 2008/09/30 20:10:22 aaron Exp $
// store the timer and current div data
slideshow_data = new Array();
// this stores all our static data
function views_slideshow_data(num_divs, timer_delay, sort_order, fade, fade_speed, fade_value) {
// this._divs = divs;
this._num_divs = num_divs;
this._timer_delay = timer_delay;
this._sort_order = sort_order;
this._fade = fade;
this._fade_speed = fade_speed;
this._fade_value = fade_value;
this._current_div = 0;
this._pause = false;
}
// set the timer on or off
function views_slideshow_timer(slideshow_main, slideshow_status) {
// stop the current timer
clearTimeout(slideshow_data[slideshow_main]._timer_id);
// start a new timer, if slideshow_status is true, unless we're currently paused
if (slideshow_status && !slideshow_data[slideshow_main]._pause) {
// our timer will call views_slideshow_switch, which fades out the current slide
slideshow_data[slideshow_main]._timer_id = setTimeout("views_slideshow_switch('" + slideshow_main + "', views_slideshow_next_div('" + slideshow_main + "'))", slideshow_data[slideshow_main]._timer_delay);
}
}
function views_slideshow_pause(slideshow_main) {
slideshow_data[slideshow_main]._pause = true;
views_slideshow_timer(slideshow_main, false);
}
function views_slideshow_resume(slideshow_main) {
slideshow_data[slideshow_main]._pause = false;
views_slideshow_timer(slideshow_main, true);
}
// fade out to the new div indicated
function views_slideshow_switch(slideshow_main, new_div) {
// get the id for the main element
var current_div = slideshow_data[slideshow_main]._current_div;
_main_div = "#views_slideshow_div_"+slideshow_main+"_"+current_div;
_new_div = "#views_slideshow_div_"+slideshow_main+"_"+new_div;
var depth = $(_main_div).css("z-index");
if(depth == 'auto')
{
$(_main_div).css("z-index", 5);
$(_new_div).css("z-index", 3).show();
}
// turn off our timer
views_slideshow_timer(slideshow_main, false);
// check to see if we fade or not
if (slideshow_data[slideshow_main]._fade) {
// fade out -- at the end, switch to the next slide in the slideshow
$(_new_div).css("z-index", 4);
$(_main_div).fadeOut("slow", function() {
$(_new_div).css("z-index", 5);
$(_main_div).css("z-index", 3).show();
slideshow_data[slideshow_main]._current_div = new_div;
views_slideshow_timer(slideshow_main, true);
});
}
else {
// if we don't have a fade, then just switch without fading
$(_new_div).css("z-index", 5);
$(_main_div).css("z-index", 3).show();
slideshow_data[slideshow_main]._current_div = new_div;
views_slideshow_timer(slideshow_main, true);
}
}
// get the next node div in our sequence
function views_slideshow_next_div(slideshow_main) {
if (slideshow_data[slideshow_main]._sort_order) {
// select the next div, in forward or reverse order
new_div_number = slideshow_data[slideshow_main]._current_div + slideshow_data[slideshow_main]._sort_order;
if (new_div_number >= slideshow_data[slideshow_main]._num_divs) {
new_div_number = 0;
}
else if (new_div_number < 0) {
new_div_number = slideshow_data[slideshow_main]._num_divs - 1;
}
}
else {
// select a random div, but make sure we don't repeat ourselves, unless there's only one div
do {
new_div_number = Math.floor(Math.random() * slideshow_data[slideshow_main]._num_divs);
} while (slideshow_data[slideshow_main]._num_divs > 1 && (new_div_number == slideshow_data[slideshow_main]._num_divs - 1));
}
return new_div_number;
}
As for CSS I've just got:
.views_slideshow_main
{
position: relative;
height: 354px;
width: 646px;
}
.views_slideshow_main > .views_slideshow_teaser_section > div
{
position: absolute;
}
You definitely need views to be consistent with height and width when it comes to crossfading. I can't really think of instances when you wouldn't want this to be the case.
Feedback welcome.
#7
I have been trying to apply this patch to the latest version 6.x-1.0-beta2, but no luck. Can someone post a working patch to the crossfade?
#8
@agoel96: You can try the patch in #463254: Lots of progress migrating to contrib/plugin architecture, transition to cycle plugin if you'd like -- it migrates to jquery, includes lots of different effects. 'Sync' - which means doing the in and out transitions at the same time, such as a cross fade, is an option, enabled by default.
The patch is off the latest -dev package.
#9
Since #463254: Lots of progress migrating to contrib/plugin architecture, transition to cycle plugin has been committed it should work in 2.x
#10
Automatically closed -- issue fixed for 2 weeks with no activity.