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?
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.
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 )
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.
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.
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:
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.
Add a code (The same you have in the file you share here) to the head in hype
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>