X3Photo Gallery Forums

nicolashodee · 03 Sep 2020, 11:25

Hi everyone! :slight_smile:
Just playing around with X3 for my website....

I would like to replace the provided scroll button on the intro plugin with my own version for a more visible and versatile call to action.
(like a "Learn more" button that could send you somewhere below in the page).
Here is the link: http://www.nicolashodee.com/photo/
And here is a capture of what I am trying to achieve:

: button-help.jpg (881.01 KiB) Viewed 1660 times

I've tried using anchor links and a bit of custom JS (that I barely understand) but the expected effect is not as clean and smooth as the original button (especially on my Mobile where the smooth scrolling is not working with the anchor link). Which brings 2 questions:

How to reproduce the X3 scroll button effect?
How to customize it to scroll even further in the page?

Looking at the console I am pretty sure this can be achieved with basic JS or Jquery, but I am still new to this :disappointed:.
Thanks in advance for your help! :punch:

Nicolas

04 Sep 2020, 00:43

Hi Nicolas,

A few things first: The "Prestations" button seems to point to another page, am I right? In this case, it would not scroll of course, but simply load the new page. A note about this, since you are using a native JS function for this, it will not inherit X3's own ajax-navigation. Couldn't you just use a normal link here, styled the same as the button? For example:

<a href="/photo/services/" class="...">Prestations</a>

The above, when using native href and with relative url, it would not reload the page, but load it smoothly with X3's own ajax navigation.

As for the "Portfolio" button, it already seems to almost work, right? As for location, you can basically target any element on page by using #id. Keep in mind, it's like you want to make sure there is some margin above the target element, because this element would be aligned to top of screen after the scroll. X3 has a native scroll mechanism that you could perhaps use instead of manually adding the #id. Where exactly do you want it to scroll to?

nicolashodee · 06 Sep 2020, 09:29

Hello Karl !
Thanks for your quick answer. :smile:

The "Prestations" button seems to point to another page, am I right?

Indeed, I finally decided to create a second page to not mix to much information at the same time in this case.
--

As for the "Portfolio" button, it already seems to almost work, right?

The anchor links are working indeed, but partly. The smooth scrolling is not working on iOS and I can't figure out why. It works on Android though... =_=.
(The native X3 button works smoothly on both). Thanks for the tip about the margin by the way 🤟:first_place:.
--

X3 has a native scroll mechanism that you could perhaps use instead of manually adding the #id. Where exactly do you want it to scroll to?

That would be the easiest way indeed. Depending on the page I would like to point to the top of the content (like the existing one to skip the intro), to the gallery or the folders. If you have a tip to scroll directly to these elements that would be perfect.

Thanks so much for your support on this forum.
Have a good Sunday!

06 Sep 2020, 22:58

I'm not actually sure why it even works now, but I assume it's X3's own mechanism to scroll to link#hashtag, which you included in the location.href. Modern browsers now support animated scroll without using animation libraries, although that is not supported in iOS.
https://developer.mozilla.org/en-US/doc ... patibility

I would probably try X3's velocityJS scroll:
http://velocityjs.org/#scroll

Change your button to the below. Notice I removed the HREF and "scroll" class (which did not have any function), and added ID "portfolio-scroll".

<button id="portfolio-scroll" class="white-btn  animate__animated animate__fadeInLeft animate__delay-1s">Portfolio</button>

Then in page settings > Page > Advanced > Page Javascript, assign the click event:

$('#portfolio-scroll').click(function() {
  $('.folders').velocity('scroll', { offset: -50, duration: 500 });
});

I haven't tried the effect, and you may want to adjust offset, duration, as well as the easing function used.
http://velocityjs.org/#scroll

nicolashodee · 08 Sep 2020, 08:47

Working perfectly. :ok_hand:
Thanks so much for your help :) !

X3Photo Gallery Forums

Scrolling button5 posts

Scrolling button

Re: Scrolling button

Re: Scrolling button

Re: Scrolling button

Re: Scrolling button