Languages

Menu
Sites
Language
Displaying images in folder using galllery

Hi,

    We are creating file maneger, how to create functionality that when i click on image it should display that image and also when i slide that image it should display the other images in that folder. could any one help me in this?....

Thanks

 

List

Responses

10 Replies
Marco Buettner

1.) Push all files from location one time in an array (if u change the folder, clear the array and push again ;))

2.) define are variable like currentImagePosition = 0

3.) If u open a random picture iterate the array until the image what you show is the same like in your array and store the position into currentImagePosition

4.) with currentImagePosition-1 and currentImagePosition+1 u get know always the previous and next item

5.) Dont forget to add special behaviours for no presuccessor and no successor.

colin Rao

Hi,

seems you want to implement a Carousel style image view, like the bootstrap Carousel. I think you can find many sample code on internet and porting it to tizen web app platform.

regarding how to get the images on device, you can use the filesystem api to get the images.

Palitsyna

Hello,

try to use the following code to get the images from device. 

// Retrieve the ContentManager interface instance using the tizen global object
var manager = tizen.content;

// Let's try to retrieve the list.
var contentType = "IMAGE";
var filter = new tizen.AttributeFilter("type", "EXACTLY", contentType);
manager.find(mediaItemArray, onError, null, filter);

function onError(response) {
    console.log( "The following error occurred: " + response.name);
}

function mediaItemArray (contents) {
    var itemsList = document.getElementById('list');
    console.log("Successfully retrieved the list of Image items");

    for (var i=0; i < contents.length; i++) {
        console.log(i + ":" + contents[i].type + ":" + contents[i].title + ":" +contents[i].mimeType);

        var listItem = document.createElement("li");
        listItem.innerHTML = contents[i].title;

        itemsList.appendChild(listItem);
    }
}

Content Tutorial: https://developer.tizen.org/development/tutorials/web-application/tizen-features/content/content?langredirect=1#manage

Content API: https://developer.tizen.org/dev-guide/2.3.1/org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentType

Supreeth Kumar

hi,

the above code retrieve all the images which are in device but i need files from the perticular folder.

thanks

 

Palitsyna

Hi,

probably CompositeFilter can solve this problem. Try something like this:

var contentType = "IMAGE";
var imageFilter = new tizen.AttributeFilter("type", "EXACTLY", contentType);
var folderFilter = new tizen.AttributeFilter("contentURI", "CONTAINS", "Camera");
var filter = new tizen.CompositeFilter("INTERSECTION", [imageFilter, folderFilter]);
manager.find(mediaItemArray, onError, null, filter);

more info could be found here: https://developer.tizen.org/dev-guide/2.3.1/org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#CompositeFilter

 

or you can just add if statement, like:

for (var i=0; i < contents.length; i++) {
    if (contents[i].contentURI.indexOf("Camera") != -1) {
        console.log(i + ":" + contents[i].type + ":" + contents[i].title + ":" +contents[i].mimeType);

        var listItem = document.createElement("li");
        listItem.innerHTML = contents[i].title;
        itemsList.appendChild(listItem);
    }
}

Where "Camera" is required folder name

AVSukhov

Hello,

You do not need to implement additional functionality to your application. You can use ready-made solutions - Gallery (image viewer). For this purpose you can use App Control functionality.

Palitsyna

Hello,

As AVSukhov said, you can use Application Control functionality. Here you can find the useful link about App Control:

Developer Guide: https://developer.tizen.org/development/guides/web-application/tizen-features/application/application

Marco Buettner

I think he wants to open the image directly in the app. Also u have on appControl no functionally of swipe to see the previous or next image in of the folder ;) As far I understand.

So my solution is the right why... But I didnt submit any code, because the "kumars" should able to write it by yourself.

AVSukhov

Hello,

Ok =), f.e. tomorrow the user wants to image can be zoomed and/or removed from view state and further more slideshow and details view... 

and the developer will overload application this functionality (which is often non-trivial task).  Why do all that when developer can use already prepared solution (Gallery app).

imho =)

Marco Buettner

Yeah ... I know what you mean ... Maybe some developer think they can it do better =D