restarting Ultimate fade in slide show on mobile

[grantiago]

1) Script Title: Ultimate fade in slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: Not a problem but a feature. The script works great. Thank you. However on android a swipe will stop the slideshow. It now is swipe only. I can't figure out how to get it to resume the slideshow other than reloading the page.

I've included the jquery.touchSwipe.min.js but have set no options for it. To say the least his documentation is a bit obtuse. And here I am asking for help.

[jscheuer1]

First try adding "extra buttons" - you can add only the pause play option if that's all you want. See:

http://www.dynamicdrive.com/forums/e...e-in-slideshow

Demo:

http://jscheuer1.com/garden/

If you need help after viewing the options' explanations included in the distribution file, just let me know.

[grantiago]

Thanks. I would like to hide the numbered image buttons. Depending on the run there are around 60 images. The numbered image buttons are distracting -- overwhelming. I only need the play/pause, status and toggle buttons. If I alter the divs and spans it seems to kill the status div and the pause/play button. same with changing the pend option.

[jscheuer1]

If you're working from my garden demo, in the init where you have:

extrabuttons: {pend: '.bob', navfade: 0.65, navbutonly: true},

either set pend to false and get rid of the rest in there (change to):

extrabuttons: {pend: false},

Even if you're not using my demo as a template, simply changing 'pend' to false will probably do the trick, of course if you do that and still have navfade: 0.65, navbutonly: true, those parts can be removed. You can of course keep any other options that you might have besides those if they're working well for you.

Or, if you don't like those results, get rid of the buttons with style (place in a style section or stylesheet for the page):

.extrabutspan {display: none !important;}

For more information:

In the distribution archive, there are usage instructions (distro/extrabuttons_usage.htm), load it in the browser to read it.

If you want more help, please supply a link to your page or post your init and markup.

[grantiago]

I was using the demo.htm in the distro. I copied the garden demo and both the init or the css corrections work. Thanks. Then I copied the html over to the ...demo.htm and all is fine.

I had tried both those options before posting. But in the ...demo.htm they killed the play/pause button as well as the slideshow.

Is there a css option to change the player background to white? I have fiddled around and can't get it done on the page itself. I've done it by editing the .js. I imagine there is a better option.

if I had any js skills at all I would replace the numbered boxes with a slider or progress bar. ;-)

[jscheuer1]

To change background in style, use:

#fadeshow1 .gallerylayer {background-color: white !important;}

where fadeshow1 is the wrapper id for the slideshow.

A progress bar doesn't seem too difficult. I'll have to think about adding that. A slider, one that you could drag to control the images is probably doable, but seems daunting even to me. I know there's basic code for that already (jQuery UI has some, likely others) though, just needs to be adapted to the slideshow.

[jscheuer1]

Mmm, I actually found a nice touch friendly slide control that I was able to make work with this. It requires a very slightly modified extrabuttons.js, some external scripts and an external css file, some added markup, and some code added to the slideshow init. If you're interested, let me know.

[styxlawyer]

To change background in style, use:

#fadeshow1 .gallerylayer {background-color: white !important;}

where fadeshow1 is the wrapper id for the slideshow.
.
.
.

John, thanks for that tip. I have been using this slideshow for several years (usually having multiple slideshows in each month's magazine page) and have also hacked the .js file to get a white background. I did try to find a way of adding background colour to the settings for each slide show but failed to make it work, so the CSS solution is very helpful.

[jscheuer1]

Here's a demo with the slide controller:

http://jscheuer1.com/garden/index_slide_control.htm

It's somewhat customized so as to be responsive (to different screen sizes for this particular sideshow, I have a simpler version). There are a few options to play with if you want/need to both with the slider:

https://refreshless.com/nouislider/

and how it's integrated into the slideshow. Most of which is controlled in the extrabuttons_add_noUiSlider.js file. Look and feel is controlled to an extent in css. Again, to do this you need:

1.) noUiSlider css and js (either the min or non-min versions, available at the above link)

2.) the updated extrabuttons.js:

http://jscheuer1.com/garden/extrabuttons.js

3.) and the extrabuttons_add_noUiSlider.js file:

http://jscheuer1.com/garden/extrabut..._noUiSlider.js