IMAGE GALLERY with Dynamically Loaded Images from Folder


#1

Hi all

Here is a project I’m just in the process of finishing. It’s a dynamic image gallery based on the images that are contained in the resources folder. If you add more images the image gallery adds those to the page and each image can be clicked and a lightbox appears with a larger version of the image.

EDIT - The whole project is responsive. So work’s well on all platforms tested.

NOTE This is done in Hype only. No external libraries involved and all Vanilla Javascript.
The lightbox is an animation. The file list is created dynamically using php (a simple file with a simple script)

It will be perfected soon and I will make the .hype document available very shortly after, here! with an update to this post so if you wanna see how I did it. Keep tracking this post.

Thanks

DBear


(Greg) #2

Are you saying that you can simply add new images to the resources folder and they will show up on the webpage?


(Freelancer) #3

Awesome! very nice @DBear

you can assign a filter using the name (or part) of the files?
it might be useful?

thanks


(Mark Hunte) #4

Huh, I thought I posted a project that does this a while back but i can only see the static one. The one I meant to post picks up the images from an external folder dynamically. Originally it picked them from the resouce folder but I changed it. I will have to post it as well.
It will be good to see how you did yours as PHP is very new to me. Pretty sure I can learn a lot there from yours

Mine is pretty basic compared to yours just slides.

Love that yours adds the thumbs :+1:t4:

http://markosx.com/hypeTests/galleryTest/galleryTest.html

I did not put an index.html in that link dir. As.I normally do so if you want you could download the files and restorable…


#5

Sure does Greg. As a test I’ve sent you a PM with log in details so you can upload your own images. :slight_smile:
A bit more clarification. If, for example, you imported this symbol (I’m making it this way ;)) and you added more images to your resources folder (within Hype) it would still pick up those images and show them. You cannot test it locally though (unless you follow the instructions in the JS files :)) which will become clear when I’ve finished and uploaded the source files.

Sure, Michael. That could be useful.

At the moment I’m going for a symbol so people can perhaps plug it in to their own Hype projects. Maybe I could make it simply a standalone add on. Not sure yet. :smile:

Hi Mark, Basic / Smashic.
It’s just another way to do it. Regarding your PM no worries. It may be a bit confusing because of the title here suggesting responsive and resources folder.
I’m gonna change the title so it makes it more of a generalisation.
Instead of: Responsive IMAGE GALLERY with Dynamically Loaded Images from Resource Folder
I’ll make it: IMAGE GALLERY with Dynamically Loaded Images from Folder


(Mark Hunte) #7

Nice one. :smile:


(Greg) #8

Very cool Darren


(Freelancer) #9

Yes! very cool Darren


(Warren Adams-Ockrassa) #10

Did you ever finalize the file? I’d be quite tickled to steal the heck out of it.


#11

##Update.
Sorry lost track of this post and hadn’t realised I didn’t add the resources. :slight_smile:

Here they are warts and all. I didn’t get round to tidying up a lot.

imageGallery-v2.0.zip (1.9 MB)


Independent image loading script
(Vina Melody) #12

Hi @DBear, I am trying to open the example file attached but I got this message:

This document cannot be saved, duplicated, or exported with the Standard edition of Hype. To unlock this document, upgrade to Hype Professional.

is there a way to open this using Standard edition…

I would like to achieve similar goal:

  1. there’s a folder containing image-1.jpg, image-2.jpg, and so on
  2. The scene should fade-in the image sequentially and then fade-out after few seconds

thank you!


#13

Hi @vina

Unfortunately, The document was made using Pro so it cannot be opened by Standard.

I can walk you through the steps if that helps. If I have time today I’ll post the workflow here


(Vina Melody) #14

Thanks @DBear … I would like to know if the sample gives me the clue to the feature I want.
and if it’s possible to achieve it using Hype Standard…

I’m currently trying to understand your project files too… looks like it’s not possible to use pure javascript to achieve it.


#15

@vina

To get the file list from a folder you need to use PHP. You can place a small PHP in your resources to get the files from the folder.

Here is an example of the PHP used in the above project:

<?php
$dir = ".";

$array = glob("*.jpg");
$list = json_encode($array);
echo ($list);
?>

You can use any plain text editor to create this. Once you do place it in the resources folder and it will create an array with any file that has the .jpg extension. (in the resources folder)

Once you have this encoded (JSON) array you can decode (parse) it within Hype and use it to create an iteration (loop) and get the contents of your images. You can use this to create a gallery. When you have this you can create a listener to listen for clicks and upon clicking any image play a timeline that animates a popup with the image in it.


(Rich) #16

Guyss… I am Dying… help me… I am total beginner with everithing… (from bootstrap html pages i started) and wanted to start the automatic uploading pictures from folder (bored to write it to exact code)

but i triedy to look on the html code of imageGallery-v2.0.zip180 , and http://hype-expert.uk/ page code…

i see its necessary to have php code somewhere where the pictures are…

but how to start the code ?
howcome and where the list of picture will be made ? in the html code ? automatically ?
(i am testing it in my pc only )

i am starving, i am dying, flowing deep into the ocean of … unawareness…

help :smile: