Photo Gallery Forums

I saw in the showcase the website http://www.thinkingpixels.com.

Can somebody tell me how to configure the page that the pictures of the slideshow are under the menu like on this page?
Also the dots as navigation elements are in the picture and not under the picture. How can I realize this?
Thanks in advance.

Hi!

Vulcano wrote: I saw in the showcase the website http://www.thinkingpixels.com.

Can somebody tell me how to configure the page that the pictures of the slideshow are under the menu like on this page?
Also the dots as navigation elements are in the picture and not under the picture. How can I realize this?

That website home page is in fact not X3. That website uses X3 for it's /galerie/ section:
https://thinkingpixels.com/galerie/

Of course, you can still used a SLIDESHOW intro for the home page (or any page), like in our demo page and at mjau-mjau.com.

Do you still wish to find out how to add "slideshow intro"? At it's most basic: 1) Upload photos to index page 2) Go to the page settings > gallery, choose "slideshow" layout. 3) Under the slideshow settings, choose "use as intro", which means it will move the slideshow up from the page, to the very top, under the menu.

As for the "dots", they normally display below the slideshow in X3's slideshow layout. If you need to display them on the home page, and really need them moved, it might be possible to achieve with some custom CSS code. But first things first?

Hi Karl,
thanks for your fast answer.

I saw at the source code and you‘re right, it seems to be a WordPress page. Also thanks for the explanation how to set a slideshow, but this was not a problem for me. I must say, that the whole Administration of X3 is really easy. Great work from you!

If you could help me with the custom css code for the moving dots in the slideshow pictures, that would be great. Of course it’s not a „Need“, but for me this is looking much better.

Sorry that I don‘t want to mention my website adress in the Public, this is because in the moment I am only preparing the page for my works. I only uploaded pictures, which are made not on the best circumstances and so they are not as sharp as they should be for the slideshow. If you want I can send you my link in a private message.

Vulcano wrote:If you could help me with the custom css code for the moving dots in the slideshow pictures, that would be great. Of course it’s not a „Need“, but for me this is looking much better.

Possible you can send me a link in PM to your slideshow with dot navigation? I need to inspect the html/css and see what can be done. You simply want it moved up overlaying the images?

Ok, following are some instructions to customize the dots location. Keep in mind, the X3 slideshow is based on another plugin (which we may replace in the future), and this customization is basically a "hack". One thing to note, is that this slideshow generates its HEIGHT from the slideshow area PLUS the dots navigation area ... Since we are moving the dots "UP", the slideshow will basically takes 30 px LESS than 100% (or whatever height you set).

Add the following code to Settings > Custom > Custom CSS: If you want to change the color of the dots like in my screenshot below, also include this: Feel free to adjust the top, left and border color values.


Full CSS code would be:

Hi Karl,

mjau-mjau wrote: Full CSS code would be:

Code Select all

.fotorama__nav--dots {
  text-align: left;
  top: -30px;
  left: 10px;
}
.fotorama__dot {
  border: 1px solid white;
}

This is working mostly perfect, how I wanted to display the dots navigation. Big Thanks! :thumbsup:

mjau-mjau wrote:One thing to note, is that this slideshow generates its HEIGHT from the slideshow area PLUS the dots navigation area ... Since we are moving the dots "UP", the slideshow will basically takes 30 px LESS than 100% (or whatever height you set).

Thanks for your very good explanation, so I am understanding why the picture is not on the whole page.

mjau-mjau wrote: Ok, following are some instructions to customize the dots location. Keep in mind, the X3 slideshow is based on another plugin (which we may replace in the future), and this customization is basically a "hack"

I hope the new plugin will also include an option or a possibility to place the dots.