Lightbox gallery proof of concept

[boxy]

Hello
I bought into Hype Pro a couple of days ago and just because I already have all the assets wanted to see if I could reproduce my current Rapidweaver made website (www.boxy.co.uk)

It is a simple as you can get, a plain portfolio site with thumbnail grids being the focus. I had an idea to try creating the same kind of lightbox image gallery in Hype by arranging each thumbnail as a textured button, then clicking each button sends to a separate scene for each image. This has some advantages in that I can not only click each image left/right to transition to the next image, but also use each scene's On Swipe left/right commands. To exit the light mode simply click outside the image.

A test site has been uploaded HERE But presently once the landing page loads only the 2D ART button is active. On that page scroll down to the thumb grid, Only the top row of 5 thumbnails currently work.

It works beautifully on my iMac, but it pretty sluggish on my iPad 3. I realise that is quite an old thing so perhaps I'm expecting too much. The large images and captions respond to browser resize but I haven't yet added any other responsive layouts.

So to the question! I can already see the downside to doing it this way is that I'll have to have 25 scenes per portfolio page, there's three of those, so there'll be something around 80 scenes in the finished site. Will this slow performance? Is there a faster way of implementing the gallery as it currently looks?

Thanks for any help

[h_classen]

what could be a right easy to manage solution is to use a strict name convention for thumbs and relating bigger pictures.
say all the thumbs are named somename-thumb.jpg and the bigger ones just somename.jpg.
in this case you could add a javascript onclick/ontouchstart to the thumb element:

var url = element.style.backgroundImage //url(someurl);
 bI = '${resourcesFolderName}' + '/' + url.substring(url.lastIndexOf('/')+1, url.lastIndexOf('-')) + '.jpg';

where bI should be the path to the corresponding bigger image in the resourcesfolder. don't preload those images. optimize them yourself.

onsceneload of the fullview run

element.getElementsByClassName('yourPicContainerClass_PleaseSetThis')[0].style.backgroundImage = "url('"+ bI + "')";

this should set the backgroundimage to of the first element of some class (your pic container)

it's just the basic setup. you'll need to add a least some css for the positioning of the backgroundimage

[boxy]

Wonderful, thank you for the info Hans, good to know there's a better way of doing this. I won't pretend I fully understand the code as I am not a coder at all, but you've kindly supplied so much info the principle is understandable and the code examples will help a lot in the learning process.
Cheers

[h_classen]

example.hype.zip (640.8 KB)

did a setup i guess any noncoder (even me ) can adapt it ... please ask if it's unclear

[boxy]

Wow Hans you are a star and an inspiration to non coders. Thank you so much, I'll play with that and let you know how I get on.
Cheers
Sav

[boxy]

I love how easy it is to add new thumbnails to the page, spot on!
I have 2 questions, one because I just don't get it, the other for a future time when I know more what I'm doing.

I notice you had different caption titles for the 2 big images in your example. I don't understand where you change the text and text style for each big image caption?

Once we enter a large image scene, it would be more convenient to have an option for click/swiping left/right to continue viewing large images without having to continually go back to the thumbnails. Will this be possible when I have more idea of what's going on? I'm already guessing the answer lies in learning javascript.

Thanks very much.

[h_classen]

source for the caption is the title of the thumbs (properties on the panel, may be it's called alternate text ...)

to have an option for click/swiping left/right to continue viewing large images without having to continually go back to the thumbnails.

yes of course, i'll have a look for it when i've got time ... the challenge is to involve less code and most setup with hype gui as possible so it's easy to use for everyone ...

[h_classen]

url

example.hype.zip (1.2 MB)

changes for setup: add a class 'gallery' to each thumb, add a index as class '01'etc to each thumb

[boxy]

Ah ok I just slapped my head for missing the obvious. I see now the caption text styling is also just as simple.

Wow you are fast!! That gallery class will be studied thoroughly, amazing! I can't tell you how valuable it is to have such tutoring when everything is new and unknown, thank you so much Hans, I will let you know how it goes.
Thanks again.
Sav