Remote Image Grid Gallery

You must Login before you can answer or comment on any questions.

Hi, merry christmas {if you're reading on post date}. I have some code, based on here: http://developer.appcelerator.com/question/125998/codeboxed-image-gallery-with-json-file . Basically, my problem is, that every time i load my app from new, it downloads all the images somewhere/somehow {i can tell, because my app become very very large over time} Is it possible to somehow use these images when booting the app from new, or to maybe delete them, i do knot know where they are located. Many Thanks for any help,

— asked 1 year ago by Steve Thorne
2 Comments
  • I have not seen code but basically what you are looking for is to use image again from local file if it is already downloaded than i think you have to keep track of your all downloaded images and check whether image is available in local directory or not.

    — commented 1 year ago by Yogin Bhungalia

  • yes, basically, yes, thanks,

    — commented 1 year ago by Steve Thorne

2 Answers

For caching of images I'am using the following code:

var cachedImageView = function(imageDirectoryName, url, imageViewObject, hires) {
    var filename = url.split('/');
    filename = filename[filename.length - 1];
    var file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, imageDirectoryName, filename);
 
    if (file.exists()) {
        imageViewObject.image = file.nativePath;
    } else {
        var g = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, imageDirectoryName);
        if (!g.exists()) {
            g.createDirectory();
    };
    var xhr = Ti.Network.createHTTPClient();
    xhr.onload = function() {
        if (xhr.status == 200) {
            file.write(xhr.responseData);
            imageViewObject.image = file.nativePath;
        };
    };
    xhr.open('GET', url);
    xhr.send();
};

— answered 1 year ago by Rainer Schleevoigt
answer permalink
3 Comments
  • thanks for the response :) sorry i am new to JavaScript and Titanium platform, how would i integrate this into my current code? sorry, heres my photos.js main code:

    var isAndroid = false;
     
    if (Ti.Platform.name == 'android') {
        isAndroid = true;
    }
     
    var rows = 0;
    var columns = 0;
    var thumbPadding = 5;
     
    var rowPosition = 2;
    var rowPositionReset = 2;
    var padding = 5;
    var columnPosition = 15;
     
    var scrollView = null;
     
    win.orientationModes = [ Ti.UI.PORTRAIT ];
    var json_data = [];
    var website_url = 'http://arianagrande.bella143.com/folder/'; 
    var imagesArray = []; 
     
    function make_request( ){
        var actInd = Titanium.UI.createActivityIndicator({
            height:50,
            width:210,
            font: {fontSize:12, fontWeight:'bold'},
            color: '#fff',
            message: 'Loading...',
            style: Titanium.UI.iPhone.ActivityIndicatorStyle.PLAIN
        });
        actInd.show();
        win.add( actInd );
        var xhr_request = Titanium.Network.createHTTPClient( );
        xhr_request.setTimeout(5000);
        xhr_request.onerror = function(e){ alert(e); }
        xhr_request.open("GET", 'http://arianagrande.bella143.com/folder/images.js');
        xhr_request.onload = function(){
            try{
                json_data = eval('('+this.responseText+')');
                displayImages( );
            }catch(e){
                alert(e);
            }
            win.remove( actInd );
        }
        xhr_request.send( );
    }
     
     
    function displayImages( ){
        // format the json data so that it will work on codeboxed
        for(var i=0;i<json_data.fighters.length;i++){
            imagesArray.push({filename:website_url+json_data.fighters[i].filename, caption: json_data.fighters[i].caption });
        }
     
        if( scrollView != null ){ 
            win.remove(scrollView); 
            scrollView = null;
        }
     
        scrollView = Ti.UI.createScrollView({
            contentWidth : 320,
            contentHeight : 'auto',
            top : 0,
            backgroundColor : '#000',
            showVerticalScrollIndicator : true,
            showHorizontalScrollIndicator : false
        });
     
        for (i = 0, b = imagesArray.length; i < b; i++) {
            if (columns % 4 == 0 && rows != 0) {
                columnPosition += 75 + thumbPadding;
                rowPosition = rowPositionReset;
            }
     
            var img = Ti.UI.createImageView({
                image : imagesArray[i].filename,
                width : 75,
                height : 75,
                myID : i,
                left : rowPosition,
                top : columnPosition
            });
     
            img.borderColor = null;
            img.borderWidth = 0;
            img.backgroundPaddingLeft = 0;
            img.backgroundPaddingRight = 0;
            img.backgroundPaddingTop = 0;
            img.backgroundPaddingBottom = 0;
            img.backgroundLeftCap = 0;
            img.backgroundTopCap = 0;
     
            img.addEventListener('click', function(e) {
                var win_photo = Ti.UI.createWindow({
                    backgroundColor : '#000',
                    title : e.source.myID + 1 + ' of ' + imagesArray.length,
                    windowInfo : imagesArray,
                    myID : e.source.myID,
                    url : 'image_gallery_single.js',
                    barColor:'black',
                    translucent:true
                });
     
                win_photo.hideTabBar();
     
                Ti.UI.currentTab.open(win_photo, {
                    animated : true
                });
            });
     
            scrollView.add(img);
     
            columns++;
            rows++;
            rowPosition += 75 + padding;
        }
     
        win.add(scrollView);
    }
     
     
    var alert = Titanium.UI.createAlertDialog({
        title: 'Network Error',
        message: 'The Network Connection seems to be broken...:(',
        buttonNames: ['Retry', 'Cancel'],
        cancel: 1
    });
     
    alert.addEventListener('click', function(e) {
        Titanium.API.info('e = ' +  JSON.stringify(e));
           if (e.cancel === e.index || e.cancel === true) {
              return;
           }
           switch (e.index) {
              case 0: Titanium.API.info('Clicked button 0 (YES)');
                        downloadimages();
              break;
              default:
              break;
     
          }
     
    });
    function downloadimages(){
        if(Titanium.Network.online == true){
            make_request( );
        }
        else{
            alert.show();
            win.add(reloadthegallery);
        }
    }
    and the image_gallery_single.js
    var win = Ti.UI.currentWindow;
     
    var isAndroid = false;
     
    if (Ti.Platform.name == 'android') {
        isAndroid = true;
    }
     
    win.orientationModes = [ Ti.UI.PORTRAIT ];
     
    var isFullscreen = false;
    var isGesture = true;
    var images = win.windowInfo;
    var myID = win.myID;
    var viewArray = [];
     
    var photosView = Ti.UI.createScrollableView({
        width : 320,
        height : 480,
        top : 0,
        showPagingControl : false,
        pagingControlColor : '#fff',
        maxZoomScale : 2.0,
        currentPage : 0
    });
     
    var descriptionLabel = Ti.UI.createLabel({
        text : images[myID].caption,
        width : 320,
        bottom : 45,
        height : 'auto',
        backgroundColor : '#000',
        font : {
            fontSize : 12,
            fontWeight : 'bold'
        },
        color : '#FFF',
        zIndex : 2,
        opacity : 0.8
    });
     
    if (!isAndroid) {
        for (i = 0; i < images.length; i++) {
            var view = Ti.UI.createImageView({
                backgroundColor : '#000',
                image : images[i].filename,
                width : 320,
                height : '100%',
                top : -5        
                });
     
            viewArray[i] = view;
        }
     
        photosView.views = viewArray;
    }
     
    if (!isAndroid) {
        photosView.currentPage = myID;
     
        win.add(photosView);
        win.hideTabBar();
     
        var flexSpace = Ti.UI.createButton({
            systemButton : Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE
        });
     
        var leftButton = Ti.UI.createButton({
            image : 'arrowleft.png'
        });
     
        leftButton.addEventListener('click', function() {
            var index = (photosView.currentPage - 1 < 0) ? 0
            : photosView.currentPage - 1;
            var view = photosView.views[index];
     
            isGesture = false;
     
            photosView.scrollToView(view);
        });
        var rightButton = Ti.UI.createButton({
            image : 'arrowright.png'
        });
     
        rightButton.addEventListener('click', function() {
            var index = (photosView.currentPage + 1 >= photosView.views.length) ? photosView.currentPage : photosView.currentPage + 1;
            var view = photosView.views[index];
     
            isGesture = false;
     
            photosView.scrollToView(view);
        });
     
        var toolbar = Ti.UI.createToolbar({
            items : [flexSpace, leftButton, flexSpace, rightButton, flexSpace, ],
            bottom : 0,
            borderTop : true,
            borderBottom : true,
            barColor : '#000',
            opacity:0.8
        });
     
        win.add(toolbar);
     
        photosView.addEventListener('singletap', function() {
            if (isFullscreen) {
                Ti.UI.iPhone.showStatusBar();
                win.showNavBar();
                toolbar.show();
                descriptionLabel.show();
            } else {
     
                win.hideNavBar();
                toolbar.hide();
                descriptionLabel.hide();
            }
     
            isFullscreen = !isFullscreen;
        });
     
        photosView.addEventListener('scroll', function(e) {
            if (isGesture) {
                isFullscreen = true;
            } else {
                isGesture = true;
            }
     
            i = e.currentPage;
            activeView = e.view;
            descriptionLabel.text = images[i].caption;
     
            win.title = i + 1 + ' of ' + images.length;
        });
    } else {
        var view = Ti.UI.createImageView({
            backgroundColor : '#000',
            image : imageLocation + images[myID].filename,
            width : 'auto',
            height : 350,
            top : 0,
            canScale : true
        });
     
        win.add(view);
     
        descriptionLabel.bottom = 0;
    }
     
    win.add(descriptionLabel);
    many many many thanks,

    — commented 1 year ago by Steve Thorne

  • honestly if you are new to javascript, I would recommend working on your basic javascript skills before getting to deep into appcelerator, it is just going to make your life easier.

    you can search this forum and there are links to resources to help you understand javascript better

    — commented 1 year ago by Aaron Saunders

  • thanks you very muchs

    — commented 1 year ago by Steve Thorne

Your Answer

Think you can help? Login to answer this question!