PDA

View Full Version : Ultimate Fade-in Slideshow - swiping permanently disables automatic default behaviour



Paul8888
06-29-2016, 05:15 PM
1) Script Title: Ultimate Fade-in slideshow (v2.6.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem:

(This problem can be observed on the official DD script page)

The official DD script page utilises the fadeslideshow.js script in conjunction with the optional jquery.touchSwipe.min.js script, which adds SWIPE functionality to the basic script.

When the slideshow loads and starts, the images automatically change every few seconds as expected.

However, if the images are optionally SWIPED (eg on a smartphone screen, or using mouse click and drag on a desktop), the act of using the swipe facility seems to permanently cancel the default automatic image change behaviour, and the slideshow remains static after the final swipe.

I had hoped that after a short wait without any further swipe activity, the script would revert to its default behaviour, with images automatically changing every few seconds once again. This is the behaviour I have most often seen with other popular slideshows scripts.

How is it possible to change the current script behaviour so that the slideshow reverts to default automatic image change behaviour a few seconds after swipe activity ceases?

Any advice much appreciated. This is such a nice, reliable script, and I would hate to change. But it's hard to justify this script behaviour to the average 'swiping' web user, unfortunately.

Many thanks!

Regards,

Paul

jscheuer1
06-30-2016, 03:02 AM
That's the intended behavior (also - if you click/touch next or previous, it exits auto mode - if auto mode was enabled to begin with that is, again - the intended behavior). See:

http://www.dynamicdrive.com/forums/entry.php?248-Extra-Buttons-for-Ultimate-Fade-in-slideshow

for an add-on script that allows for many options, one of which is a resume after x number of microseconds.

Any questions about/issues with its use, feel free to ask.

Paul8888
07-04-2016, 07:30 PM
John,

Many thanks for recommending your ExtraButtons add-on script for Ultimate Fade-In Slideshow. (Sorry for the delay in responding - I was away for a few days).

Your script is working perfectly and achieves exactly what I was looking for, ie to modify the (intended) default behaviour of Ultimate Fade-In Slideshow so that the slideshow resumes its automatic image changing sequence following a Swipe event (which, by default, terminates the automatic image changing sequence).

As I'm effectively only utilising a small part of your ExtraButtons functionality, I'll show below exactly what code I used to achieve the specific result I wanted. This might be helpful for someone with similar requirements.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js"></script>

<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>

<script type="text/javascript" src="extrabuttons.js"></script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [940, 350], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://www.xyzxyzxyz.co.uk/graphics/banner1.jpg"],
["http://www.xyzxyzxyz.co.uk/graphics/banner2.jpg"],
["http://www.xyzxyzxyz.co.uk/graphics/banner3.jpg"],
["http://www.xyzxyzxyz.co.uk/graphics/banner4.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:7000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1500, //transition duration (milliseconds)
descreveal: "none",
togglerid: "fadeshow1toggler",
extrabuttons: {pause: 7000, swiperesume: true}
})

</script>


For anyone with my own specific requirements, the important things to remember are to add the extrabuttons.js script call; insert something in the togglerid field (for my purposes it was not necessary to actually include div code in the CSS or HTML, as no visible buttons are being created); add the extrabuttons settings (pause and swiperesume) as shown.

Many thanks, John, for your great script and helpful advice!

Paul