View Slideshow with different effects on the same view

Question

I want to create a slideshow with caption using Views Slideshow. I've set up a view with image | description fields, but everything slide at the same time. How can I set different effects for different field? Should I use different views and attach them together?

Answer 1

If you want to implement different effect for each slide, then you can use views fractionslider module to implement same.

jQuery plugin for image/text-sliders. It allows you to animate multiple elements per slide. Set different animation methods like fade or (from) left, delays and easing for each element, or simple set some defaults in the plugin options. You also have full layout/design control through html and css (every html-element can be animated). Its also fully responsive.

Answer 2

It may cost you some money but this seems to be a very nice Drupal module http://codecanyon.net/item/mega-slider/4313171?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=megadrupal

Answer 3

Making a view attachment works, except the controls aren't linked and they can get out of sync with each other.

I've been trying to accomplish something similar. I'd like one field to fade and another to slide. The method I'm trying to duplicate is on www.bluecadet.com, but I'm guessing they're using a custom slider they made in-house.

I'm exploring overriding the views slideshow tpl files, but I'm quickly getting lost.

Answer 4

If you're using the jquery cycle plugin you can use the advanced options to apply some jquery to the elements within each individual slide. I found it easiest to do this inside of a custom js file, rather than doing it from the views configuration page.

the before and after settings are what you'll need to use. So your custom js file could have some code similar to this:

$('YOUR_SLIDESHOW_WRAPPER_DIV_NAME_HERE').cycle({
     fx: 'fade',
     speed: 'slow',
     timeout: 0,
     before: onBefore,
     after: onAfter,


    });


 function onBefore(curr, next, opts){
    // Code to do stuff before the slide changes
       $('.slide_description_wrapper').slideUp();
    }


 function onAfter(curr, next, opts){
   // Code to do stuff after the slide changes
    $('.slide_description_wrapper').slideDown();
}

You can see an example of this here... it's a bit more complex than what's in the code above, but it gives you a good idea of how you can trigger custom jquery events on elements within each slide.

Answer 5

In your view slideshow format setting under the avanced jquery option select the fx option under advanced option value you can enter the various effect seprate by comma.this operation require the json2.js.you should but this file in sites/all/libraries/json2 for jQuery Cycle Plugin - Option Reference-http://malsup.com/jquery/cycle/options.html