My Imagegallery

talk design
1

I’d like to have a word from you about the image gallery I made.

http://dkozar.com/flash/imagegallery/

  • It’s entirely dinamic: pictures are being upload (and folders created) through the HTML interface.
  • After the upload, pictures are being resized to a 800x600 (or 600x800) format (depends of the portrait/landscape orientation) and thumbnails are automaticaly generated.
    Rotation by the steps of 90 degrees is available after download, thumbnails are then re-generated.
  • Flash browses the folders communicating with simple PHP script (using LoadVars.sendAndLoad). PHP returns the content of that particular folder to flash.
  • There are no limitations on the folder structure - the folder can have a sub-sub-subfolder at any depth

I was deffinitely inspired by that Sephiroth image gallery, so I made my own - but without AMFPHP, without any folder depth restrictions and with some keyboard-functionality added.
The photos are not all mine, some of them are from all-around-the-web -> for testing purposes only.
After I fix a few bugs, I intend to put the installation on my site for a free download. :angel:

2

Good work !!

Could use some customisation features like skins etc. Yes and you have a few bugs to fix like Clicking on Back should take you to the folder and not to root folder.
A scrollbar also would have been nice.

on the admin side, a flash only solution would have been perfect.

Once again. Overall

Good work !!

3

BACK means “one folder up” or “parent folder”!
Clicking on SHOW THUMBS on the top of the screen (while in big picture mode) takes you to folder view.
Using SPACE key:

  • in big picture mode, SPACE means “show thumbs”
  • in thumbs mode space means “folder up”

Thx for tips :sure:

4

normally back means goto the last page / last view

in your case,
instead of SHOW THUMBS maybe you can put back and
instead of back , parent folder

5

I love it! It’s so great! I’m working on something like this for a client. Was it super hard to create? My only suggestion is perhaps create a small icon for the folders so it’s easier to tell that they are folders.

6

very nice work

7

I started from Macromedia image slide show example and came this far… no, it wasn’t hard, but it takes knowing many tips and tricks. First you try loading vars from a static .txt file, then you turn this .txt file it into .php script which browses dir… Then you put some sorting in it…

I can’t because I decided that folder browsing will be multi-level (Acdsee-ish tipe of).

8

Thanks, I definitely keep that in mind! I already have the load vars thing down, but I guess I have to figure out how to get the sorting and how many images to display from the variables. We’re stuck using asp, but we can get it working just the same :slight_smile:

Another quick question (sorry if I bother). What did you use to find out how many pages to display? Did you just use multiple keyframes(therefore creating a maximum of images/folders) or did you load/display all the images/movies in dynamically?

9

Let’s start with a PHP side - here’s what PHP script outputs (in this case for the root folder): >Click here!<

Just analyze this output and you will notice [COLOR=Navy]the pattern[/COLOR]:

name, date, size, type,
name, date, size, type,
name, date, size, type,
…
…
and at the end, the last variable is [COLOR=Navy]TheNumberOfFiles[/COLOR] <—IMPORTANT

[COLOR=Indigo](Oh, a little lesson in Croatian:
ime = name
datum = date
tip = type (dir or pic)
broj fajlova = number of files)[/COLOR]

So, that TheNumberOfFiles variable tells Flash how many screens it has to display for that particular folder.

[COLOR=DarkRed]numberOfScreens = int (numberOfFiles / numberOfObjectsPerScreen) + 1[/COLOR]

In this case:
Number of objects per screen = 20
Number of objects (files) found in folder = 42
numberOfScreens = int(42 / 20)+1 = 2+1 = 3

Get it?

So, when you are on the first of that three screens, you load thumbs from 1 to 20, on the second screen you load thumbs 21-40, on third 41-42.
You have to play with this, use some math… :tb:

When you hit NEXT, first you destroy all the thumbs holders on screen, and then create new ones, which then load new thumbs…

And you have to play with previous/next buttons visability too:

  • if only one screen - there’s no buttons
  • if many screens:
  • on the first screen there’s no PREVIOUS button
  • on the last screen there’s no NEXT button[list]
    [/list]
    One more thing… when you enter into a folder, flash puts the previous folder name on the STACK and sends that folder name to PHP to browse it. The STACK (push-pop array) is handy solution for this - when you hit FOLDER UP button, you POP the folder name which was last PUSHED on the stack. :beer:
10

Okaaay - as I prommised - here’s download of my ImageGallery:

> CLICK HERE: imagegallery.zip (33k) <

Installation:

You gotta have PHP and MySQL (IG uses one table in one database - for user administration only).

  • extract this .zip in some folder on your local hard disk
  • FTP it to your web server
  • with **ControlPanel ** or similar prog. change permissions for file **config.php ** and for folder upload to [COLOR=Red]777[/COLOR]
  • create a MySQL database (but not neccessary - you could use the existing one) (A)
  • create a MySQL user (B) with password ©
  • add this user to database with rights **ALL ** (SELECT+INSERT+**DELETE ** will do)
  • put the http address of your folder + “/install” into your browser (http://your_server/your_folder/install)
  • a form will apear. Insert your MySQL connection data:
    [INDENT]+ Host name: **localhost ** (if DB on the same server as scripts)
  • Database: (A)
  • Username: (B)
  • Password: ©
  • Table: give table a name. The table will be deleted if already exists![/INDENT]
  • click Submit. Is everything OK? Installed?
  • if yes, delete dir **install ** from the server
    It’s done! :rabbit:

Administration (HTTP upload of images):

  • put the http address of your folder + “/admin” into your browser (http://your_server/your_folder/admin)
  • log in with user/pass: test/test
  • create your user(s) and delete **test ** user

Epilogue:

  • Administrators can upload and delete, users can only upload files.
  • Error Call to undefined function: imagecreatefromjpeg() in … \upload.php indicates the absence of gd2.dll extension in your php installation (check out your php.ini!)

So… that’s wery much it! You can use my ImageGallery everywhere you like… :beer:

I’d like to hear from you about this installation!

Danko Kozar, DKOZAR.COM :stuck_out_tongue:

11

WOW!!!
How about the flash file so that we can change the look of it??? Man great work, love it :thumb:

12

No… no fla… for now.

btw. I forgot to say that you can use my IG unless you don’t change the copyright and linking to my site!

You can check for updates on this address: > Click here! <

Now I’m thinking about **skins ** :smiley:
In the next version I’ll make an attaching of a custom GIF/JPEG from outside .swf as a custom logo! :rabbit: Some other graphic stuff as well…
Some buggy stuff (as this BACK button logic) will be repaired too…

The only thing that shouldn’t be changable is that CODED BY text in the bootom-right corner, and tiny window that it opens.

13

aww man :crying: :frowning:

14

why no FLA?

15

this looks great. gratz.