-
Posts
-
Hi, I’m wondering if there’s a way to link to a specific milestone in the timeline, say, via ID? Thus, if I have a milestone with an ID assigned, can I create a link to jump to that specific slide along the lines of
<a href="#slide-two">Slide Two</a>so it will jump to show that particular slide? Thank you.To provide some more clarity here- I’m wondering if it’s possible to jump to sections in a *horizontal* timeline? See this timeline as an example (which uses the WP Timeline plugin) — http://centenary.ufh.ac.za/timeline/ Note how the periods (e.g. 1900-1903) allow one to scroll to that portion of the timeline. Is this possible w/ the Avia timeline component? Thank you.
I just did some digging in the theme source, and I’m seeing two JS files that drive the timeline slider:
timeline.jsandslideshow.js. Withinslideshow.jsI see ago2method, that appears to accept an index (corresponding to slide number?) that would allow jumping to a specific slide in a horizontal timeline, but I can’t get it working; here is what I have tried so far, within a click function:$('.avia-timeline-container').avia_sc_timeline('go2', 7)
(nothing happens)$('.avia-timeline-container').avia_sc_timeline.go2(7)
(go2 is not a function)Any ideas here? Thanks.
*Bumping this again- please advise on how to jump to a specific slide in the timeline component. Thank you.
Hi,
Have you tried using Tab Container element? I think it would be easier to create such layout with Tab Container element. You can set transition to slide in Advanced tab and use dot icon as points.
Best regards,
YigitHi Yigit- I have not tried that element, but can give it a shot; however, I’ve spent a good deal of time building out the timeline using the timeline component- is there really no method in the slider function that allows jumping to a given index number? Did your team develop the Avia Layout Builder and components? And if so, would one of the theme developers be able to field this question? Thank you.
I’ve set up a demo page here- http://prj.nickpish.com/exp/timeline/ – and I’m trying to get the “Jump to 2020” button to allow navigating to that specific slide in the timeline, i.e. index number 4 (assuming the first slide is 0). I’ve enqueued a tools.js file that contains the click function below, and I can’t seem to engage the go2 method to navigate to the slide- any help here is most appreciated!
// tools.js
jQuery(document).ready(function($) {
if ($.AviaSlider) {
// get timeline object
var timeline = $(‘.avia-timeline-container’).avia_sc_timeline();
console.log(timeline)var btn = $(‘.btn-jump a’);
// go to slide index on click
btn.on(‘click’, function(e) {
e.preventDefault();
console.log(‘clicked!’);
$(‘.avia-timeline-container’).avia_sc_timeline(‘go2’, 4);
// $(‘.avia-timeline-container’).avia_sc_timeline.go2(4);
// timeline.go2(4);
// $(‘.avia-timeline-container’).avia_sc_timeline(‘go2’, 04);
// $(‘.avia-timeline-container’).avia_sc_timeline(‘next’);
// $(‘.avia-timeline-container’).avia_sc_timeline.next();
});
}
});Hi Yigit- any thoughts on the above? It looks like the method exists in the timeline function (go2), I just can’t seem to get it working. Thanks.
Hi,
Sorry for the late reply and thanks for the example page, your script is working for me, I tested with Chrome & Firefox and clicking the “Jump to 2020” button goes to that slide. Did you sort this out?Best regards,
MikeHi Mike- thanks for your response. I have not actually managed to get it working, as the “fix” on that test page is something of a hack, and doesn’t perform consistently. If you click around in the timeline, using the next/previous buttons then click on the “Jump to 2020” button at top, it will sometimes go to the wrong position or not move the timeline at all (the click function driving the behavior is in this file: http://prj.nickpish.com/exp/wp-content/themes/enfold-child/js/tools.js?ver=1.0.0 . It seems the go2 function is somewhat broken, and can’t properly track the index numbers of the slides. I’m contemplating disabling the default Avia slider function altogether and manually attaching to Slick slider instead; unless of course there’s a possibility of having that function fixed to allow navigating to a specific slide index? Slick has a “slickGoTo” method that does exactly what I’d like- see here for example: https://codepen.io/vilcu/pen/ZQwdGQ
Hi,
I see, your test page worked for me, but I can understand your concern, so perhaps the plugin is the best approach.Best regards,
MikeAs I mentioned, that solution on the test page does not work consistently, so cannot be used. For anyone else who might encounter this issue/question, my recommendation is to disable the default timeline function (programmatically via JS) and instead bind the container to a different library like Slick Slider, so that you can use the same markup for the timeline component. Maybe one day the theme developers will build out that go2 method so it works properly.
Hi,
Sorry for the late reply, very good then, unless there is anything else we can help with on this issue, shall we close this then?
For anyone thinking of using the Slick Slider js, here is a video that explains how to use it pretty well.Best regards,
Mike
- You must be logged in to reply to this topic.