Album Creation using scroll view and scrollableView in Titanium

Hi......

In this post we are going to create Image Album for both thumbnail and fullview.

Design Goal:

            The list of images are displayed in thumb size which are loaded into scroll view. when user clicks the particular Thumbnail Image the Image is loaded into Fullview mode.


Start to Code:

           1. First create a window object and add a scroll view that should by in  "horizontal' Layout and width is "100%".

            2. Now construct the for loop and Load Images in scrollView.

                          
                            var self = Ti.UI.createWindow({
                             backgroundColor:'#ffffff',
                             navBarHidden: true,
                              fullscreen:true,
                              width:'100%'
                                  
                            });
                           var ThumbAlbum=Ti.UI.createScrollView({
                                  layout:'horizontal',
                                  width:'100%'
                           });
                           self.add(ThumbAlbum);
                           var totalcount=5;
                           for(var i=0;i<totalcount;i++)  
                              {
                                 var thumb = Titanium.UI.createImageView({
                                 left: 10,
                                  top : 10,
                                 width : 100,
                                 height: 100,
                                  imageID:i,
                                  image:''http://ic.i.tsatic-cdn.net/1213/105_99/29fce_1213904.jpg''
                              });
                        ThumbAlbum.add (thumb);
                           }
                          self.open();
                  3. Next write fullImageView code in imageview's click event.

                                ThumbAlbum.addEventListener('click',function(e){

                                              var FullView=require("fullviewWindow");

                                               var win=FullView(e.source.imageID,e.source.image,totalcount);

                                                win.open();

                                 });
                     4. Now create fullviewWindow.js file
                            function fullviewWindow (imageID,imageurl,totalcount)
                             {
                               var self = Ti.UI.createWindow({
                             backgroundColor:'#ffffff',
                             navBarHidden: true,
                              fullscreen:true,
                              width:'100%'
                                  
                            });
                         var headerLbl=Ti.UI.createLabel({
                               width:'100%',
                                height:30,
                                backgroundColor:'#000',
                                text:  imageID+' of ' +totalcount
                          });
                        var fullimage = Titanium.UI.createImageView({
                                 left: 0,
                                  top : 30,
                                 width : '100%',
                                 height: '90%',
                                 image:imageurl
                              });
                              self.add(fullimage); 
                              self.open();
                              
                             }
                           module.exports=fullviewWindow;

                   5. Run the Program in Emulator/Simulator
                
Thankyou......