Hi,

I've been setting up the views slideshow slider on my companies website. It's replacing an older hacked up version of this same module that didn't work very smoothly. My problem is that I can't get the view to change as I scroll from left to right. It only changes the view after I let go of the ui-slider-handle.

The example website changes as you scroll through the items. I'm guessing that there is something in the javascript that I am missing. Or maybe in the advanced settings.

Also in the example, the slider effects each node represented by the yellow box under the scroll bar. Are those yellow bars part of a view, or are the hard coded in that particular page.

I'd also like for the slider to snap to the next view, but haven't been able to get that to work either without seriously overhauling the javascript.

This is for a timeline type of slideshow. Here is the page:
http://www.ullico.com/page/test-new-timeline

Any help would be greatly appreciated. Thanks!

Comments

EWB’s picture

EWB commented

I have the same question... and would love some direction. thanks

peter_’s picture

peter_ commented

Hi,

I'm looking for the same functionality in 6.x-2, when you slide the slider the view only changes when you release the mouse, have any of you managed to get it working where the view changes as you drag the slider (without releasing the mouse button)?

Regards

peter_’s picture

peter_ commented

Hi,

I have been looking at this for the last hour or two and I must put a warning on this since I am no programmer. I read the jquery-ui documentation for the slider (jquery-ui-1.7.3/jquery-ui-1.7.3/docs/slider.html) and found there is an event called slider, so I edited the file (views_slideshow_slider/views_slideshow.js) and added the "slide:" function below:-

Drupal.behaviors.viewsSlideshowSlider = function (context) {
$('.views_slideshow_slider_main:not(.viewsSlideshowSlider-processed)', context).addClass('viewsSlideshowSlider-processed').each(function() {
var fullId = '#' + $(this).attr('id');
var settings = Drupal.settings.viewsSlideshowSlider[fullId];
settings.targetId = '#' + $(fullId + " :first").attr('id');

// Attach the slider before we create the slideshow so the
// after callback in the cycle can find the slider.
var slider = $('#views_slideshow_slider_slider_' + settings.id);
slider.slider({
orientation: settings.orientation,
value: 0,
min: 0,
max: settings.num_divs - 1, // We start from 0.
range: "min",
animate: true,
step: 1,
change: function(event, ui) {
if (event.originalEvent) { // On machine update this is undefined.
$(settings.targetId).cycle(ui.value);
// Restart the cycle, otherwise we end up with flicker.
$(settings.targetId).cycle('stop');
settings.opts.startingSlide = ui.value;
$(settings.targetId).cycle(settings.opts);
}
},
slide: function(event, ui) {
if (event.originalEvent) { // On machine update this is undefined.
$(settings.targetId).cycle(ui.value);
// Restart the cycle, otherwise we end up with flicker.
$(settings.targetId).cycle('stop');
settings.opts.startingSlide = ui.value;
$(settings.targetId).cycle(settings.opts);
}
}
});

Now when I drag the slider along the images / text changes to the next view. I hope this helps or at least puts someone on the right track, maybe an explanation or someone can correct what I have done above if I have introduced a new problem?

Regards

snufkin’s picture

snufkin commented

I think you are on the right track. Originally the code only supported the 'change' event, which only happened when someone clicked on the slider, moved it and released it. Slide on the other hand is triggered without the slider being released. It might make sense to remove the change event and replace it with slide.

jitka’s picture

jitka commented

Hi peter_ and snufkin,

I tried to do that on 7.x-3.0 but it won't work...Any help would be greatly appreciated.