Interactive Photographic Slideshow

Animation
1

I’m new to Hype, so apologies if this is a basic question…

I’d like to be able to create a photo gallery that ‘floats’ above a webpage, along similar lines to this webpage.

http://jeremycowart.com/portfolio/women/

So when the user clicks an image, the webpage darkens and the images enlarge and can be advanced using arrows on the images themselves.

I’ve searched high and low on Google and reviewed the tutorials but have been unable to find anything close in terms of how this could be achieved in Hype. Is this possible to do and does anyone have any guidance, tutorials or pointers as to how this an be achieved?

Many thanks

2

This is going to be quite complex. Maybe a bit difficult for a newbie. I think there might be some attempts at a lightbox for an image gallery here in the forums. Have a search for image gallery here.

http://forums.tumult.com/search?q=image%20gallery

3

I agree with @DBear,

But as an example to explore, using one of my hype Image Gallery examples.

This edited version shows an idea of how to get the blurring.

The idea is to place an empty group between the gallery and all the other elements you want to blur.
Then set the empty group to fill the scene and it's back drop filter to blur.

The Blur group and the image gallery group are set be hidden at the start and the show when the thumb is clicked.

This is only a quick example to give you an idea..

slideGalleryWithBlur.hype.zip ( note that I removed a lot of the original code so the gallery in this example probably does not work fully as it should, the example is as I say to show the blur idea )

4

you’re looking for something like fancybox.
you can use it within hype. be sure to check ‘css-positioning’ in scene-setup …

5

Hi Hans,

This is exactly what I’m looking for, all I have to do is to figure out how on earth to do integrate it into Hype. Being a complete newbie doesn’t help…

Are there any pointers you can provide or even a sample of how to go about integrating this as I’m not even sure where I would start.

Many thanks

6

Hi DBear,

Thanks for the links, I’ll take a look through some of the samples to see if this is going to give me what I’m looking for and then see if I can follow the examples…

I’ll report back once I’ve had a chance to review.

Many thanks

7

Hi Mark,

Likewise, thanks for your reply, I’ll take a look and see if this gives me what I need…

Many thanks

8

here an example with Prettyphoto, quite similar

PrettyPhoto.hype.zip (279.1 KB)

1 Like
9

first: read their licencemodell

then:

  1. download their *.zip and expand …

  2. open a new hypefile

  3. copy jquery to the resources folder

  4. copy files from the sourcesfoder to your resourecs folder

  5. for the sample copy the files from demo-folder to your resources-folder

  6. place ‘1_s.jpg’ to your scene

  7. add a behaviour for the placed image which runs a few lines of code:

    $.fancybox.open([
    {
    href : ‘${resourcesFolderName}/1_b.jpg’,
    title : ‘1st title’
    },
    {
    href : ‘${resourcesFolderName}/2_b.jpg’,
    title : ‘2nd title’
    },
    {
    href : ‘${resourcesFolderName}/3_b.jpg’,
    title : ‘3rd title’
    }
    ], {
    padding : 10
    });

so this’ll be working example :slight_smile:

1 Like
10

Thanks Hans…

I’ll take a look and see if I can get this to work. I’ll come back to you once I’ve been able to play :smile:

11

Hi Michel,

Thanks for this, I’ll take a look and see if it will do the job…

12

Hi Michael,

How do you get this to work?

I just tried to duplicate that but the images loads outside the default space (Please see the screen capture, in red rectangle you see the space document in hype, but the image loads outside of it)

This is what I did:

  1. I drag three files to the resource panel (jquery-1.6.1.min.js, jquery-prettyPhotos.js and prettyPhotos.css) as downloaded from PrettyPhotos web page.

  2. Add a code (The same you have in the file you share here) to the head in hype

  3. Add an square and edit with: <a href="${resourcesFolderName}/BMX0.jpg" rel="prettyPhoto" title="Estado actual de la pista de BMX"><img src="${resourcesFolderName}/BMX0.jpg" width="50" height="40"></a>

Help please