Control slider gallery using JavaScript

scrolling

(Frans Hanekom) #1

I am building a gallery using relative timelines and all seem to working fine in terms of moving between the timelines using buttons. There are 5 timelines assigned to 5 navigation buttons, to easily move between timelines. The issue I am having is with the left and right arrows on the side, needing to move left and right between these relative timelines, depending on which timeline I am on.

Inside my JavaScript I’ve assigned variables to each timeline and declared an if statement on one of the buttons (the right arrow), to move to the next timeline. This functions more or less how I want to, moving to the second timeline from the first. Once declaring a second if statement to move from the second timeline to the third, it seem to overwrite the second timeline completely moving directly to the third timeline. *I hope this makes sense, see attached file: scr5_gallery_prototype.zip (1.2 MB)

I just want to know how I can move backward and forward on these timelines using the left and right arrows within JavaScript. Please assist.


(Jonathan Deutsch) #2

Based on your JavaScript, I think I understand what you’re trying to do. There’s a few issues with your code:

  • the albumXTime lookups are done at the start of the call, but should be done on click to get the accurate time
  • for getting the current time, you need to use the symbol instance and not the hypeDocument as that is where your timelines are located
  • starting the timeline should be based on the timelines that are at 0

Here’s code that seems to do the trick for the right arrow:

function startTimeline(hypeDocument, element, event) {

	var simfyGalInstance = hypeDocument.getSymbolInstanceById('simfyGal');
	
	simfyGalInstance.startTimelineNamed('album1', hypeDocument.kDirectionForward);

	var arrow_left = document.getElementById("arrow_left");
	var arrow_right = document.getElementById("arrow_right");
	
	arrow_right.addEventListener("click", function () {
		var album1Time = simfyGalInstance.currentTimeInTimelineNamed('album1');
		var album2Time = simfyGalInstance.currentTimeInTimelineNamed('album2');
		var album3Time = simfyGalInstance.currentTimeInTimelineNamed('album3');
		var album4Time = simfyGalInstance.currentTimeInTimelineNamed('album4');
		var album5Time = simfyGalInstance.currentTimeInTimelineNamed('album5');

		//alert(album1Time);
		if(album1Time == 0) {
			simfyGalInstance.startTimelineNamed('album1', hypeDocument.kDirectionForward);
		} else if(album2Time == 0) {
			simfyGalInstance.startTimelineNamed('album2', hypeDocument.kDirectionForward);
		} else if(album3Time == 0) {
			simfyGalInstance.startTimelineNamed('album3', hypeDocument.kDirectionForward);
		} else if(album4Time == 0) {
			simfyGalInstance.startTimelineNamed('album4', hypeDocument.kDirectionForward);
		} else if(album5Time == 0) {
			simfyGalInstance.startTimelineNamed('album5', hypeDocument.kDirectionForward);
		} else {
			return;
		}
	});
}	

It also continues to work with the little naviagation dots.

Note: there may be easier ways to do this (like using a timeline with pause points).