Disable standard overlay animation

[florushj]

I'm trying to add an overlay to my slider and have this overlay make use of it's own animation, but it seems to always use the animation that's been set with data-cycle-fx. E.g. when I set the data-cycle-fx to fadeOut, no matter what I do the overlay will also use this animation (so changing it's opacity) on top of the other animations I'll set for this overlay.

Is there a way to disable this animation for the overlay?

My settings for the cycle:

data-cycle-fx="fadeOut"
data-cycle-slides="> div.slide"
data-cycle-speed="500"
data-cycle-timeout="7500"
data-cycle-caption-plugin="caption2"
data-cycle-overlay=".blog-slides-overlay"
data-cycle-overlay-template="<h2 class=blog-title>{{title}}</h2><p>{{desc}}</p><p><a href='' class='button'>Lees verder</a></p>"
data-cycle-prev="#blog-slides .cycle-prev"
data-cycle-next="#blog-slides .cycle-next"

I'm not using data-cycle-overlay-fx-out="slideUp" and data-cycle-overlay-fx-in="slideDown", because these are not the fx effects I'd like. I want them to slide in from left to right and back. I'm not sure if http://jquery.malsup.com/cycle2/api/advanced.php#transition will work on these settings? If so, could somebody give me an example how to achieve this?

[malsup]

Is your overlay a child element of the slideshow container? If so, then no, you can't escape the opacity changes of the parent element.

On Fri, Jul 19, 2013 at 7:45 AM, Floris notifications@github.com wrote:

I'm trying to add an overlay to my slider and have this overlay make use of it's own animation, but it seems to always use the animation that's been set with data-cycle-fx. E.g. when I set the data-cycle-fx to fadeOut, no matter what I do the overlay will also use this animation (so changing it's opacity) on top of the other animations I'll set for this overlay.

Is there a way to disable this animation for the overlay?

My settings for the cycle:

data-cycle-fx="fadeOut" data-cycle-slides="> div.slide" data-cycle-speed="500" data-cycle-timeout="7500" data-cycle-caption-plugin="caption2" data-cycle-overlay=".blog-slides-overlay" data-cycle-overlay-template="

{{title}}

{{desc}}

Lees verder

" data-cycle-prev="#blog-slides .cycle-prev" data-cycle-next="#blog-slides .cycle-next"

I'm not using data-cycle-overlay-fx-out="slideUp" and data-cycle-overlay-fx-in="slideDown", because these are not the fx effects I'd like. I want them to slide in from left to right and back. I'm not sure if http://jquery.malsup.com/cycle2/api/advanced.php#transition will work on these settings? If so, could somebody give me an example how to achieve this?

— Reply to this email directly or view it on GitHubhttps://github.com/malsup/cycle2/issues/248 .

[florushj]

I don't think it is. This is my HTML code.

<div id="blog-slides-wrapper">
  <div id="blog-slides">
    <div class="cycle-slideshow"
    data-cycle-fx="fadeOut"
    data-cycle-slides="> div.slide"
    data-cycle-speed="500"
    data-cycle-timeout="7500"
    data-cycle-caption-plugin="caption2"
    data-cycle-overlay=".blog-slides-overlay"
    data-cycle-overlay-template="<h2 class=blog-title>{{title}}</h2><p>{{desc}}</p><p><a href='' class='button'>Lees verder</a></p>"
    data-cycle-prev="#blog-slides .cycle-prev"
    data-cycle-next="#blog-slides .cycle-next"
    >
      <div class="slide" data-cycle-title="Lorem ac cursus" data-cycle-desc="Odio interdum lobortis. Phasellus mollis lorem ac cursus feugiat. Ut pellentesque mattis aliquet. Aliquam a mauris dictum, pharetra sapien sit amet, volutpat elit.">
        <div class="slide-image"><img src="<?php echo get_stylesheet_directory_uri() . '/assets/img/banners/testbanner3.jpg' ?>"></div>
      </div>
      <div class="slide" data-cycle-title="Proin ullamcorper mi" data-cycle-desc="Nunc eget adipiscing ligula. Proin ullamcorper mi eget odio interdum lobortis. Phasellus mollis lorem ac cursus feugiat. Ut pellentesque mattis aliquet. Aliquam a mauris dictum, pharetra sapien sit amet, volutpat elit.">
        <div class="slide-image"><img src="<?php echo get_stylesheet_directory_uri() . '/assets/img/banners/testbanner4.jpg' ?>"></div>
      </div>
    </div>
    <div id="progress"></div>
    <a href="#" class="cycle-prev"><i class="icon-angle-left icon-white"></i></a><a href="#" class="cycle-next"><i class="icon-angle-right icon-white"></i></a>
  </div>
  <div id="blog-slides-overlay-wrapper">
    <div class="blog-slides-overlay"></div>
  </div>
</div>

[malsup]

Hmm, seems like it should work. Maybe you could post a fiddle?

On Fri, Jul 19, 2013 at 10:02 AM, Floris notifications@github.com wrote:

I don't think it is. This is my HTML code.

— Reply to this email directly or view it on GitHubhttps://github.com/malsup/cycle2/issues/248#issuecomment-21251127 .

[florushj]

It's the first fiddle I ever created, so hope this works. http://jsfiddle.net/Lwg8a/2/

I changed the code a bit to simplify my example, but basically this is how it works right now. After trying to disable the standard animation the overlay now happens to have, I will try to slide this overlay left in and out of the slide on the left (blog-slides-overlay-wrapper has overflow: hidden, so that the overlay will seem to disappear behind the slide.)

I'll probably have to make this work like so.. (Haven't tested this yet.)

$( '#blog-slides .cycle-slideshow' ).on( 'cycle-before', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    $(outgoingSlideEl).parent().parent().siblings("#blog-slides-overlay-wrapper").find(".blog-slides-overlay").animate({
         left: "-350px"
      });
  });

  $( '#blog-slides .cycle-slideshow' ).on( 'cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
   $(incomingSlideEl).parent().parent().siblings("#blog-slides-overlay-wrapper").find(".blog-slides-overlay").animate({
      left: "0px"
    });
 });

[malsup]

I think you probably don't need to include the caption2 plugin, since you're writing your own fx for the overlay.

On Fri, Jul 19, 2013 at 10:32 AM, Floris notifications@github.com wrote:

It's the first fiddle I ever created, so hope this works. http://jsfiddle.net/Lwg8a/2/

I changed the code a bit to simplify my example, but basically this is how it works right now. After trying to disable the standard animation the overlay now happens to have, I will try to slide this overlay left in and out of the slide on the left (blog-slides-overlay-wrapper has overflow: hidden, so that the overlay will seem to disappear behind the slide.)

I'll probably have to make this work like so.. (Haven't tested this yet.)

$( '#blog-slides .cycle-slideshow' ).on( 'cycle-before', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) { $(outgoingSlideEl).parent().parent().siblings("#blog-slides-overlay-wrapper").find(".blog-slides-overlay").animate({ left: "-350px" }); });

$( '#blog-slides .cycle-slideshow' ).on( 'cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) { $(incomingSlideEl).parent().parent().siblings("#blog-slides-overlay-wrapper").find(".blog-slides-overlay").animate({ left: "0px" }); });

— Reply to this email directly or view it on GitHubhttps://github.com/malsup/cycle2/issues/248#issuecomment-21252941 .

[florushj]

Lol.. sure it is THAT simple, like it always is.. Daaaaayyss I've been trying to fix it, then this solution. ;-).. Thanks a lot for your support and keep going on with all you've been doing for Cycle and Cycle2! I removed this line

data-cycle-caption-plugin="caption2"

To be complete and so this topic can be closed here's the full jsfiddle with the in and out going overlay.

http://jsfiddle.net/Lwg8a/5/

[malsup]

Glad to hear it. The simplest solutions are always the best! :-)

On Fri, Jul 19, 2013 at 10:47 AM, Floris notifications@github.com wrote:

Lol.. sure it is THAT simple, like it always is.. Daaaaayyss I've been trying to fix it, then this solution. ;-).. Thanks a lot for your support and keep going on with all you've been doing for Cycle and Cycle2! I removed this line

data-cycle-caption-plugin="caption2"

To be complete and so this topic can be closed here's the full jsfiddle with the in and out going overlay.

http://jsfiddle.net/Lwg8a/3/

— Reply to this email directly or view it on GitHubhttps://github.com/malsup/cycle2/issues/248#issuecomment-21253876 .