Gallery function

Hi,

I just want to create a gallery.
I've got a folder with about 15 pics and when I'm clicking in my menu on the gallery-button, I would be gladly to see the pics - perhaps 3-4 a row - minimzed to e.g. 200-160 (original up to 1440x900).

Haven't found anything like this in the forum, script archive or the tutorials.

Has anyone an idea or a similar project?

Thanks
Alexander

 

Here's a script that should do what you're looking for:

Code (csharp):

1. var imagesize = 100;
2. private var vscroll = 0.0;
3. private var maxscroll = 0.0;
4. var gallery : Texture[];
5. private var picture : Texture;
6. private var maxpic = false;
7.  
8. function OnGUI () {
9.     if (maxpic == false) {
10.         var xpos = 10;
11.         var ypos = 10;
12.         ypos -= vscroll;
13.         for (var element in gallery) {
14.             if (GUI.Button(Rect(xpos,ypos,imagesize,imagesize),element)) {
15.                 maxpic = true;
16.                 picture = element;
17.             }
18.            
19.             if (xpos+(2*imagesize)+40 < Screen.width) xpos += imagesize+10;
20.             else {
21.                 xpos = 10;
22.                 ypos += imagesize+10;
23.             }
24.         }
25.        
26.         if(ypos+vscroll+10+imagesize > Screen.height) maxscroll = ypos+vscroll-Screen.height+10+imagesize;
27.         else maxscroll = 0;
28.        
29.         vscroll = GUI. VerticalScrollbar (Rect (Screen.width - 30, 10, 100, Screen.height-200), vscroll, maxscroll/5, 0.0, maxscroll+(maxscroll/5));
30.         imagesize = GUI.VerticalSlider (Rect (Screen.width - 28, Screen.height-180, 100, 170), imagesize, 200, 50);
31.     }
32.    
33.     else { 
34.         GUI.Label(Rect((Screen.width-Screen.height)/2,0,Screen.height,Screen.height),picture);
35.         if (GUI.Button(Rect(10,Screen.height-40,70,30),"Back")) maxpic = false;
36.     }
37. }

It shows you a gallery, lets you resize the previews and you click on a picture to maximize it. Just drop the pictures in the gallery array.

Note: The pictures will only display as large as their resolution.

 

That's a very nice script!

 

Thank you TJB
I haven't got the time today, but sounds very good.
I will tell you if it's working as I want it.



have a nice weekend

 

Decided to add a new function. Now you can simply drop all your pictures in a folder on the web and they will load from there. Just do this:
-Rename your pics to be sequential eg) pic1.jpg, pic2.jpg
-Enable the boolean uploadpicsfromsite.
-Type the address of the folder the pics are in in galleryurl
-Type the tag in front of your pictures number into maintag
-Type the extension (with the dot) in picformat
-Set the gallery array size to the maximum number of pictures you ever want to view

Here's the new script:

Code (csharp):

1. var imagesize = 100;
2. var maxsize = 200;
3. var minsize = 50;
4. private var vscroll = 0.0;
5. private var maxscroll = 0.0;
6. var gallery : Texture[];
7. private var picture = 0;
8. private var maxpic = false;
9.  
10. var uploadpicsfromsite = false;
11. var galleryurl = "www.mypage.com/pics/";
12. var maintag = "pic";
13. var picformat = ".jpg";
14.  
15. function Start () {
16.     if (uploadpicsfromsite) {
17.         var picnum = 1;
18.         var picnumstr = "";
19.         for(var element in gallery) {
20.             picnumstr = picnum.ToString();
21.             var pic = new WWW (galleryurl+maintag+picnumstr+picformat);
22.             yield(pic);
23.             element = pic.texture;
24.             picnum++;
25.         }
26.     }
27. }  
28.  
29. function OnGUI () {
30.     if (maxpic == false) {
31.         var xpos = -imagesize;
32.         var ypos = 10;
33.         ypos -= vscroll;
34.        
35.         vscroll = GUI. VerticalScrollbar (Rect (Screen.width - 30, 10, 100, Screen.height-200), vscroll, maxscroll/5, 0.0, maxscroll+(maxscroll/5));
36.         imagesize = GUI.VerticalSlider (Rect (Screen.width - 28, Screen.height-180, 15, 170), imagesize, maxsize, minsize);
37.        
38.         elemnum = 0;
39.         for (var element in gallery) {
40.             if (element.width > 10) {
41.                 if (xpos+(2*imagesize)+40 < Screen.width) xpos += imagesize+10;
42.                 else {
43.                     xpos = 10;
44.                     ypos += imagesize+10;
45.                 }
46.                 if (GUI.Button(Rect(xpos,ypos,imagesize,imagesize),element)) {
47.                     maxpic = true;
48.                     picture = elemnum;
49.                 }
50.                 elemnum++;
51.             }
52.         }
53.  
54.         if(ypos+vscroll+10+imagesize > Screen.height) maxscroll = ypos+vscroll-Screen.height+10+imagesize;
55.         else maxscroll = 0;
56.     }
57.    
58.     else { 
59.         GUI.Box(Rect(0,0,Screen.width,Screen.height),gallery[picture]);
60.         if (GUI.Button(Rect(10,Screen.height-40,70,30),"Back")) maxpic = false;
61.         if (GUI.Button(Rect(90,Screen.height-40,40,30),"<")  picture>0) picture--;
62.         if (GUI.Button(Rect(140,Screen.height-40,40,30),">")  gallery[picture+1].width>10) picture++;
63.     }
64. }

There's a couple other tweaks. Let me know if you have any problems... haven't tried it outside of the editor yet.

 

Nice Add-On.
But my pics will be saved local at the hdd.

But I will test this - sounds interesting for special live ticker-functions...

thx again

 

update:

hi

modified TJBs code to following:

Code (csharp):

1.  
2.     var haupt : Texture = gallery[0];
3.     Label(Rect(10, 7, 820, 625), haupt);
4.  
5.     if (maxpic == false) {
6.         var iImageCount = gallery.length;
7.  
8.         scrollPosition = BeginScrollView (Rect (832, 10, 192, 620), scrollPosition, Rect (0, 0, 170, (imagesize*iImageCount + 10*(iImageCount+1) + 2)));
9.  
10.         Box (Rect (0,0,170,(imagesize*iImageCount + 10*(iImageCount+1))), "");     
11.  
12.  
13.         var xpos = 170/2 - imagesize/2;
14.         var ypos = 10;
15.        
16.  
17.         for (var element in gallery) {
18.             if (Button(Rect(xpos,ypos,imagesize,imagesize),element)) {
19.                 print(element.name);
20.  
21.                
22.                 //maxpic = true;
23.                 //Label(Rect(10, 17, 820, 625), element);
24.                 //haupt = gallery[1];
25.                 //Label(Rect(0, 0, 820, 625), element);
26.                 //haupt = picture;
27.             }
28.  
29.             if (xpos) {
30.                 xpos = 170/2 - imagesize/2;
31.                 ypos += imagesize+10;
32.             }
33.         }
34.         EndScrollView ();
35.     }
36.  
37. }
38.  

These lines are only a little part of the the whole code. So ignore the brackets...

When I'm clicking on a preview-button it should be shown, this element from the gallery-array in the "haupt"-label.
For testing if it goes in the "if"-part, I'm printing the element's name of the preview-picture... and it comes in the console... But not the picture.
The picture in the "haupt"-part is still standing on the first picture of the gallery-array, which I allocated in the first 2 lines.

I've commented my trys out.
I also tried to retrieve per extern functions.


SendMassage("bla",element)

function bla(haupt:Texture){
print("blubb");
and so on

An all I get is "blubb"... :-(
Somebody's got an idea?

 

It works!!!

With an awake() - function, where the first allocation stands.