2nd image automatically slides off screen, and loads first image

[jmp909]

Hi,

I am launching swipebox with no options. I have 4 images set with eg

<a data-rel="product_gallery" href="/img/image1.jpg" class="swipebox">...</a>
<a data-rel="product_gallery" href="/img/image2.jpg" class="swipebox">...</a>

if i load anything but the first image, the image slides off. if i click the 2nd image then when swipebox launches the first image appears, slides off and is replaced with the 1st image. (but the navigation arrows suggest it's still on the 2nd image). if i click the 3rd or 4th images, then the image slides off and are replaced with a blank slide.

if i click on the 4th image. which slides off and is replaced by a blank slide, then click left on the navigation, the 3rd image slides on from right to left

also if i set useCSS : false, i get blank slides

I'm using jQuery 2.1.0 and the master branch of swipebox

thanks for any advice J.

[jmp909]

turns out it's a conflict with jquery.animate-enhanced (https://github.com/benbarnett/jquery-animate-enhanced)

for some reason the transform is being removed at the end.

it should have this if i launch my 4th image

transform: translate3d(-300%, 0px, 0px)`

but it's not there

<div id="swipebox-slider" style="display: block; opacity: 1; transition-property: transform; transition-duration: 0.4s; transition-timing-function: ease;">

i had to make this amend to the source to stop the transform being removed (but that removes the fade in)

if ( isFirst ) {
  //slider.fadeIn();
  slider.css({'opacity': 1, 'display': 'block'});
}

that or remove jquery animate enhanced from my site, until a resolution can be found

thanks j

[jmp909]

I believe this works as a temporary fix

$( '.swipebox' ).swipebox({
  beforeOpen: function() { $.setDisabledByDefault(true) },
  afterClose: function() { $.setDisabledByDefault(false) },
});

[tonybyng]

@jmp909 Many thanks for your temporary fix. It works wonders. It was conflicting with a "jssor" slider plugin which i guess must be using the jquery animate-enhanced library as it was fine on other pages. You saved my sanity. Thanks.