Search…

X3 Photo Gallery Support Forums

Search…
 
metallissimus
Experienced
Topic Author
Posts: 136
Joined: 17 Oct 2019, 06:54

Navigation in content carousel

10 Mar 2021, 03:12

Hello,

is it possible to add navigation like in the carousel gallery layout to the content carousel as well?
I read https://owlcarousel2.github.io/OwlCarou ... tions.html and tried adding
Code
data-carousel-nav=true
 but it doesn't do anything (I assume because you didn't "translate" all the owl features to the data-carousel class).
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12880
Joined: 30 Sep 2006, 03:37

Re: Navigation in content carousel

10 Mar 2021, 03:26

I assume you are speaking of the ARROW navigation buttons? They are actually custom controls in the X3 gallery carousel, but looks like they weren't added to the X3 content carousel wrapper.

You could add the carousel directly using owlcarousel2 methods:
https://owlcarousel2.github.io/OwlCarou ... ation.html

That would include using  at bottom of content:
Code
<script>$(".owl-carousel").owlCarousel();</script>
Also, I'm not quite sure what styles will look like. You may need to add some custom CSS.
 
metallissimus
Experienced
Topic Author
Posts: 136
Joined: 17 Oct 2019, 06:54

Re: Navigation in content carousel

10 Mar 2021, 03:34

Thanks, I'll give it a shot.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
metallissimus
Experienced
Topic Author
Posts: 136
Joined: 17 Oct 2019, 06:54

Re: Navigation in content carousel

25 Mar 2021, 12:52

I think I'm just shy of making it work but there's a basic question I can't answer: Where do I put the setup code? (https://owlcarousel2.github.io/OwlCarou ... basic.html) I tried Settings > Custom > Custom Javascript but it didn't do anything, I have no idea where else it should go.

And somehow the script isn't triggered on initial page load, only when I navigate to a folder and back again.

BTW: You have the following in the skin CSS which was really irritating at first because there was simply nothing showing up.
Code
.owl-carousel{
   display:none;
}
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12880
Joined: 30 Sep 2006, 03:37

Re: Navigation in content carousel

26 Mar 2021, 00:23

metallissimus wrote:I think I'm just shy of making it work but there's a basic question I can't answer: Where do I put the setup code? (https://owlcarousel2.github.io/OwlCarou ... basic.html) I tried Settings > Custom > Custom Javascript but it didn't do anything, I have no idea where else it should go.
My original idea was to simply place it at the bottom of your page content, but I see now that would cause an error on initial load as it would trigger before jQuery is loaded. Therefore, you should place it in page settings > Page > Advanced > Page Javascript (without the <script> tag).
metallissimus wrote:And somehow the script isn't triggered on initial page load, only when I navigate to a folder and back again.
The above would solve that, as it triggers javascript on a per-page basis. Javascript added globally will only trigger on initial (first) page load.
metallissimus wrote:BTW: You have the following in the skin CSS which was really irritating at first because there was simply nothing showing up.
I understand that was frustrating. Keep in mind, that style is used for the X3 gallery carousel, and I can't anticipate users piggy-backing the OwlCarousel with their own implementations, especially considering there already exists a "content carousel" option.
 
metallissimus
Experienced
Topic Author
Posts: 136
Joined: 17 Oct 2019, 06:54

Re: Navigation in content carousel

26 Mar 2021, 06:12

Thanks, it's working now.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography