Show a specific slide on load, pause and then scroll through all slides and start at the beginning with Timeline.js

I am building a corporate website and one section is a “History” page. I am using Timeline JS to do so. I’ve been very successful in getting it work by pulling a JSON feed from my WordPress install; however, there’s one thing that I can’t figure out. My client wants to show a “cover image” and say something like: “Explore our History”, wait a few seconds and then have the timeline auto-scroll to the very first slide at the beginning of the company’s history.

I’ve read in the docs that I can specify a start slide and I can have the timeline start at the end, but I need to write some kind of callback function that runs after it starts on the slide I want it to. I am thinking I might be able to do that in the start_at_slide option, but I’m not sure how to go about it:

Read More
var timeline_config = {
  width: "100%",
  height: "580",
  source: "/plugins/timeline/timeline.json",
  start_at_slide: $(function(){
     // some code that says, start at the last slide, delay and then scroll to slide 1
  });,
  hash_bookmark: true,
  start_zoom_adjust: "2",
  css: "/plugins/timeline/css/themes/font/Helvetica.css"
}

Another option might be to write a separate function outside of the timeline_config that overrides the normal behavior, but before I go down that rabbit hole, I wanted to see if you guys have any suggestions.

Once I get this up and running, I plan to release this as a WordPress plugin since the options out there for TimelineJS and WordPress are less than ideal.

Thanks for your help!

Related posts

Leave a Reply

1 comment

  1. Make a use of

    this.setSlide = function(n) {
            goToSlide(n);
        };
    

    on /complied/js/timeline.js
    I just took a look into the js file and I think manipulating this would do the trick.
    I’ll try to do what you want when I get some time tomorrow.