Controlling Image Slider Gallery via both arrows and thumbnails

I stumped myself trying to figure out how to create an image gallery like I wanted so I thought I’d turn to the forum and see if anyone might be able to solve this problem. I’ll try and explain it clearly below.

I’m trying to create an image gallery where the images slide in and out of view horizontally. I want to be able to control this animation in two different ways and that presents a problem. I have the basic animation done. You create a group of images in a row. You place that Image Row group within a group only as wide as one image, and that top group, my “Mask” group, has content overflow hidden. The Image Row group is animated to move left and right to show the particular image needed at a particular moment.

With left and right arrows, one timeline can be made with the image row group animation, and a pause timeline action set at 15 frame intervals. The Image Row group animates by moving its horizontal position. The actions for Right Arrow are on mouse click Continue Timeline, and for Left Arrow on mouse click Continue Timeline -> Play in Reverse.

This works perfectly for the arrows.

Next, I created a grid of thumbnails to the left of my slider.
I don’t just want to attach a Go To Time in Timeline action to each thumbnail. I want clicking on a thumbnail to cause the Image to slide into place, the same way the arrows animate that Image Row. I did this by creating a relative timeline for each thumbnail, where on click causes the timeline to play, ending with the corresponding image sliding into view as the Image Row animates.

I can’t get both working at the same time. In other words, if I click on image thumbnail 6 it should slide to Image 6 from whatever image it’s currently on. Then, if I click the Right Arrow, it should slide to Image 7. If I then click image thumbnail 2, it should slide to Image 2. If I then click the Left Arrow, it should slide to Image 1. So, all image navigation buttons are working in conjunction with each other.

My ideal would be to achieve this without any custom javascript. I also don’t really want to do this with a different scene for each image, because that makes it pretty complicated. I’m hoping to have quite a number of images in this gallery. Making multiple timelines is not that bad, but multiple scenes, and then all sorts of actions within those scenes makes it really complicated. I believe there should be a way to do this in one scene. I feel like there’s a simple solution to get the various timelines working together.

Anyone want to take a crack at solving this?

Some JavaScript should make short work of this project. Hype has a JavaScript API for controlling timelines. It's great for making slideshows more dynamic.

1 Like

Can you post the project as you have it so far.

have a look over [here][1]
think of the pointers at the startscreen as your thumbnails …
it’s really minimal js-setup and the rest is via relative timelines
spitzenforschungNRW.hype.zip (1.6 MB)download
[1]: https://dl.dropboxusercontent.com/spa/3ftsuc9opmid3j4/Exports/spitzenforschungNRW/spitzenforschungNRW.html

2 Likes

I would prefer to use pure JS for this. It much simpler than having to setup a time line. With the new Getter/Setter API it becomes just a few lines of code.

In this example I created the images group and a view Group, since this that is the best way to slide images through a view without animating or calculating for each image. ( you only need to control the image group).

Each of my images are 600 px wide.
Each thumbnail has an number as an ID. from 0 - 5 ( six images)

In the thumbnail code I use the thumbnail id as a number and multiply it by 600.

So:
0 * 600 = 0
1 * 600 = 600
2* 600 = 1200
and so on.

I then make the images group move to a left position by minus the multiplied amount.

var images = hypeDocument.getElementById('images');
	var moveImages =  Number(element.id) * 600
	
	hypeDocument.setElementProperty(images, 'left', (- moveImages), 2.0, 'easeinout')

My thumbnail clicks now control the animation using the New API and with only three lines of code.


Arrows:

All we need to do here is workout the images group’s position left using the new API.

We do not want the group to move higher than 0 px left or beyond the max left which will be -3000 px left.

Our images are 600px wide so we will always move that distance either in the minus or in the plus.

Left Arrow Plus, Right Arrow minus.

We then move accordingly.

var images = hypeDocument.getElementById('images');
	
	var imagesLeft = hypeDocument.getElementProperty(images, 'left')
	
	var moveImages =  600;
	var max;
	
	
	if (element.id == "leftArrow"){
	var theMove = imagesLeft + moveImages
	max = 0
	
	 } else {
	 var theMove = imagesLeft - moveImages
	max = -3000
	
	 }
	
	
	if (imagesLeft != max){
	
	hypeDocument.setElementProperty(images, 'left', theMove, 2.0, 'easeinout')
	 
	 }

That again is only twelve lines of code and very simple to understand and use.

SlideGallery (15MB)

2 Likes

@MarkHunte hello Marc your link-url is broken …

1 Like

@h_classen, Thanks, Link fixed.

As Always I like to change thinks a little.

This one works on all the same principles but I have added a thumbnail marker using the same methods.

I have the mark disappear and re appear as I thing that is less distracting then making it slide along the thumbnails. But it is an easy change if you want that.

slideGalleryv2 (15mb)

I will post my project in the next day or so, but I believe I solved the problem.

I would like to become more adept with javascript but being as I’m not coming from a coding background my first inclination is to find a non-coding solution, which is really what Hype is made for. It’s not that the coding solution is more time-consuming, but I preferred creating multiple timelines to achieve the effect.

I needed two things to happen. One, a click on a thumbnail would slide the row of images as much horizontal distance as required to get to the image selected. Two, a click on an arrow would advance the row of images by just one image at a time. I just didn’t immediately understand how to connect them.

Relative timelines worked for the thumbnail timelines. I made each thumbnail its own relative timeline, and animated the “row of images” group, starting with the last image (in the row) in view and animating to reveal (through the “mask” group) the image corresponding to the thumbnail selected, ending on that image. The action is on click ->start timeline.

I also created the main timeline, animating the image row from the first image to the last, with timeline actions pausing the timeline every half second. The action on right arrow is on click->continue timeline->Main Timeline; and left arrow on click ->continue timeline->play in reverse->Main Timeline.

My breakthrough solution was to put timeline actions at the end of each of the thumbnail timelines.

The timeline action is: Go to Time in Timeline->Main Timeline->(The timecode corresponding to the pause time when that particular image is in view). First image is: 00:00.00, second image is 00:00.15, third image is 00:01.00, and so on. So, when we jump to that main timeline, a click on an arrow advances the row of images group in one direction or the other, one image at a time. Going back to clicking on a thumbnail plays that thumbnail’s relative timeline, advancing the row to show that image, and then (unbeknownst to the user) jumping back to the same image in the Main timeline, allowing the one by one image advancement.

Slider.hype.zip (709.2 KB)

Okay, please download this file and let me know what you think, whether you think it’s a great technique or if there are criticisms. If anyone uses it as a template, please let me know, I’d love to see what you do with it.

1 Like

@elcalibano
you did with Hype the app linked in the template?
very nice!

I got the game and will play when the rain subsides!

That’s a lovely, and very comprehensible, piece of work you’ve done there. I’d like to use it as part of an image portfolio on my site, and I’d like to credit you with the design; do you have a website preference or anything else I can offer as a linkback on my page?

Warren, here’s an improved version. The active thumbnail highlight/border works now. I like to check “Make Background Transparent” and then drop the gallery on top of whatever the background of the site or div is. You can credit me as elcalibano in the short term. I’m working on an update to my portfolio website, and for now it’s offline, but one day when it’s up and running, I’ll post a link on this thread. Thanks for the compliment, btw. SliderTemplate_improved.hype.zip (1000.8 KB)

1 Like

Good gravy, that is a hell of an improvement. Superbly well done, and thanks.

I hadn’t thought of transparentizing the background - I’m going to go with all-white anyway - but that’s a great suggestion. The highlight is nifty too; I’ll be able to adjust it to the color palette I’m using quite easily.

Thanks for the followup! Let me know where you need the link to go. :smile:

great work, how would I tweak this so that when an arrow is clicked, the slider goes directly to the next or previous image without delay, so it would be hopping down the timeline at 00:00:15 increments ?

Instead of running a continue timeline action, you would Run JavaScript and use the Hype API to go to the time in the timeline that is 0.5 seconds head or behind.

	var currentTime = hypeDocument.currentTimeInTimelineNamed('Main Timeline');
	hypeDocument.goToTimeInTimelineNamed((currentTime + 0.5), 'Main Timeline');

For the left arrow, change the plus to a minus in the above code.