Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
EtienneOuellet
Experienced
Topic Author
Posts: 46
Joined: 14 Mar 2011, 16:31

Home page slideshow help

25 May 2015, 11:46

Hi,

2 questions :

1- Is there a way to make the home page slideshow randomize the pictures in the folder?

2- Is there a way to hide the overlaying controls on the homepage? I think it's ok on a cumputer but it kinda annoys me on a smaller screen like my phone. So I would remove it all together.

Thanks
Image
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13999
Joined: 30 Sep 2006, 03:37

Re: Home page slideshow help

25 May 2015, 13:13

EtienneOuellet wrote:1- Is there a way to make the home page slideshow randomize the pictures in the folder?
Add the tag "shuffle" to the page's gallery setting.
Code
gallery: shuffle slideshow ...
EtienneOuellet wrote:2- Is there a way to hide the overlaying controls on the homepage? I think it's ok on a cumputer but it kinda annoys me on a smaller screen like my phone. So I would remove it all together.
The demo pages in the example folder are your best friend. Try navigating to examples/5.slideshow/ from your panel, and you will find some extensive information on how to change the slideshow module. If you deleted the examples folder, you should re-upload it ... Just rename it from "3.examples" to "examples", so that it is hidden.
Code
# SLIDESHOW LAYOUT
# The slideshow is a powerful gallery method that supports touchscreen gestures (swipe), keyboard nav, thumb nav, autoplay, fullscreen, video and much more. The slideshow method comes with comprehensive settings to account for a variety of layout combinations. The slideshow layout method is only avaiable for the GALLERY module, but not FOLDERS. Simply add 'slideshow' to the gallery module to achieve the default slideshow layout.

# SETTINGS
# slideshow:[width],[height],[ratio],[nav],[fit],[transition],[duration],[captions],[loop],[autoplay],[interval],[startFullscreen]
# width // [100, 100%, 100px] : default 100%
# height // [100, 100%, 100px] : default 100%
# ratio	// Nullifies height, and sets the ratio : [4/3, 1.33] : default null
# nav // nav interface // [dots, thumbs, false] : default false
# fit // Image scale method // [cover, contain, scaledown, none] : default cover
# transition // [slide, crossfade, dissolve] : default slide
# duration // transition duration // [500] : default 500
# captions // [true, false, hover] : default false
# loop // [true, false] : default false
# autoplay // [true, false, 5000] : default false
# interval // slider autoplay interval // [3000] : default 3000
# startFullscrees // [true, false] : default false
# toggleplay: show toggleplay buttoin // [true, false] : default false

# NB! When applying the settings, you can use '0' to leave items at default value.

# EXTRAS
# You can add several settings simply by class name, instead of adding the settings string above. Also, there are a few additional utlities that are appropriate for the slideshow:

# dots, thumbs // Adds slideshow navigation.
# cover, contain, scaledown, none // Sets image scale method.
# slide, crossfade, dissolve // Sets transition.
# captions, captions-hover // Show captions method.
# loop // loop the slideshow.
# autoplay // Start autoplay on page load.
# startFullscreen // Starts the slideshow in fullscreen (not native browser).
# toggleplay // Displays the toggleplay button.
# scrollTo // Automatically scroll to slideshow on page load.
# scrollbutton // Adds a scroll button elegantly scroll slideshow into full view.
# wide // Use in module for full width slideshows (defaults to grid max width).
# frame // Adds a frame around the slideshow. Does not like good with 'wide'.
# hidetimer // Hides the timer element when slideshow is autoplaying.

# EXAMPLES
# slideshow // default slideshow
# slideshow:0,0,16:9 // Creates the slideshow with a 16:9 ratio.
# slideshow:0,80% // Creates the slideshow at 80% of screen height.
# slideshow:0,0,0,thumbs,contain,crossfade // Sets thumbs, contain and crossfade.
# slideshow thumbs contain crossfade // Same as above, but applied with names.
# slideshow autoplay captions startFullscreen // Autplay with captions, start full.
 
User avatar
EtienneOuellet
Experienced
Topic Author
Posts: 46
Joined: 14 Mar 2011, 16:31

Re: Home page slideshow help

25 May 2015, 13:46

Hi Karl,

Well thanks. I didn't notice the slideshow page in the examples! My bad. I was browsing the beta documentation instead.

I was able to shuffle my slideshow and have it to crossfade but I can't seem to figure out how to remove the controls overlaying. They keep appearing whenever the mouse is moved. Most importantly, they're still present on the smaller screen version as they never ever disappear at all. How am I suppose to use the "toggleplay" value?

Thanks again
Image
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13999
Joined: 30 Sep 2006, 03:37

Re: Home page slideshow help

25 May 2015, 23:32

Did you remove the "togglePlay" tag from your gallery setting? May I please see a link to your page?

Please can you include the settings you have for your page "gallery:"? It would help a lot.
 
User avatar
EtienneOuellet
Experienced
Topic Author
Posts: 46
Joined: 14 Mar 2011, 16:31

Re: Home page slideshow help

25 May 2015, 23:35

:arrow: x3.petitspois.ca

I did remove the toggleplay setting.

Have a look :
Code
title 		: PetitsPois.ca
label		: Accueil
description	: Photographie Familliale dans votre quotidien
date		: 
image		: 
menu		: 
body		: menu-absolute-20 no-pad
layout		: items:gallery,context,folders
context		: separator
folders		: 
gallery		: wide assets:portfolio/accueil slideshow autoplay loop shuffle crossfade
Image
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13999
Joined: 30 Sep 2006, 03:37

Re: Home page slideshow help

26 May 2015, 00:16

When setting "autoplay", it will automatically add the toggleplay button ... don't you find it annoying when a slideshow is running and the user can't stop it? I do ...

You can use the advanced slideshow settings string to force custom options:
Code
slideshow:null,null,null,false,null,null,null,null,true,false
Setting null just means you want to keep the default setting. In the above, I am only setting loop and autoplay.
Code
slideshow:[width],[height],[ratio],[nav],[fit],[transition],[duration],[captions],[loop],[autoplay],[interval],[startFullscreen]
 
User avatar
EtienneOuellet
Experienced
Topic Author
Posts: 46
Joined: 14 Mar 2011, 16:31

Re: Home page slideshow help

26 May 2015, 00:40

It kinda worked... The play button disappeared but the nav arrows were still present. If I clicked the slideshow it would pause but I couldn't resume it. I went back to normal behaviour.
mjau-mjau wrote: don't you find it annoying when a slideshow is running and the user can't stop it? I do ...
I believe it's because I think of the homepage slideshow as a showcase more than a slideshow. I just want it to play without nothing interfering. Not even the user. IMAO, Not being able to stop it would be more annoying if the slideshow was buried somewhere else in the gallery than the homepage.

I would just like to have the controls fade away on the small screen version just like on the desktop.

Thanks anyways
Image
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13999
Joined: 30 Sep 2006, 03:37

Re: Home page slideshow help

26 May 2015, 01:52

I will have to look into it in regards to the nav-arrows ... There are many many gallery options in X3 with many many options each, and I can't remember always how each item is hardwired. The thing with the arrows, is that this is after all an interactive slideshow, and without arrows how is the user supposed to be able to interact? I do understand that you just want it simple on the startpage, but I wonder how bad it can be if there are subtle arrows available allowing the user to view the images that they want to view ...

For now, I have this "fix" for you ... go to your admin panel -> custom/css/, add the following at the very bottom:
Code
.fotorama__toggleplay, .fotorama__arr { display: none !important; }
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13999
Joined: 30 Sep 2006, 03:37

Re: Home page slideshow help

26 May 2015, 01:54

PS! I am not sure what mobile device you are using, but this is how it works on most mobile devices: Touch devices do not have mouse move/hover, so it cannot display the interface based on that event. Instead, the interface controls will toggle display/hide on tap(touch), and timeout eventually removes the interface.