Slideshow creation from selected pictures

1

Hi all. I’m trying my best to create a slideshow of pictures where the user clicks a set of pictures from a home screen, then presses go and pictures related to this selection display in a interactive slideshow.

For example - I want people to be able to select pictures representing countries so on the home page they’ll see the flags of each country. When they’ve selected which flags they want the slideshow will automatically add the countries pictures from the selection.

Anyone know how I can achieve this?

Thanks,

Chris

2

Hey, I’d recommend taking a look at the Hypes gallery section and as well as Hype Docks.

1 Like
3

Thanks :blush:

4

Hi,

Anything particular you are referring to that answers the question?!

1 Like
5

Nothing in particular directly helped but using the information and links I got allowed me to think outside the box so I’m currently trialing a few things to add to my project :slight_smile:

6

Cool,

Here is also a quick example I knocked up.
Its all commented.

But we use a symbol for the thumbs ( no need to duplicate just copy)

The thumb symbol are then individually populated using ids and file names that match.

The check boxes are made with an input in the innerHTML of a small rect.

Each slide is just a scene with the name of its image file name.

Screen Shot 2017-12-17 at 12.53.19.JPG1452×826 98.9 KB

Screen Shot 2017-12-17 at 12.52.41.JPG1268×676 81.7 KB

Screen Shot 2017-12-17 at 12.52.10.JPG1552×638 96.8 KB

Slideshow_selector_MHv1.hype.zip (2.1 MB)

1 Like
7

Nice! :+1:

2 Likes
8

I forgot to mention,

Because we are programmatically setting the thumb image as a background image.

We would normally also have to set other properties for how the image sits in its holder. I.e. scale, no repeat. etc.

But a trick and what I did above is to place a blank image in the rect/image holder using the normal way in the hype ui to set an image background

Doing that sets up the correct properties saving a load of coding later.
Since the rect is in a symbol we only need to do this once.

9

I made a second Slide show that works much the same as the first But.

This is if you have a lot of images and do not want to be making tons of Scenes.

Here we have one scene that uses a sing rect to play the slides.

We use class name changes & CSS to transition the opacity when the image swap occurs.

    <style>

.ImageHolder {
	 opacity: 0 !important;
	 transition: all 2s linear!important;
}

.ImageHolder.is-visible {

opacity: 1!important;
transition: all 2s linear!important;
}

</style>

The opacity fade in and out needs enough time to complete before we swap to the next image.

I have also added a toggle for selecting all images.

You can still select individually.

The final accounting to what is to be shown is made at the time of the Slide show button being clicked.

Screen Shot 2017-12-18 at 16.43.55.JPG1516×690 99.5 KB

Slideshow_selector_MHv2.hypetemplate.zip (1.7 MB)

p.s, Thats me in the red glowing eyed robot head. :smile:

2 Likes
10

This is excellent! Thank you so much for your help with this. I create interactive projects for people with learning disabilities so this will be used for some up and coming things I’m working on :slight_smile:
Thanks again, Chris

3 Likes