As mentioned in the previous article, the onclick event previewThePic is added to each parent A tag of the img tag that displays the image, which is used to preview the image. And all the A tags are added in the div of picList. (PS: Let’s talk about the hierarchical relationship first, and the src of img in the code will not be dizzy)
For image preview, ac officially provides two modules: imageBrowser and photoBrowser .
imageBrowser: can be previewed, there is a navigation bar at the top (can be returned, can be saved to the local), the only disadvantage: cannot delete pictures and there are few places for customization
photoBrowser: Can be previewed, there is no navigation bar at the top, double-click to zoom in, can't go back, can't save the picture, you need to customize the picture according to the event
We weighed the functions of the two modules, and finally chose photoBrowser.
The use of imageBrowser is also glued here, you can copy it directly and see the effect first. Of course, you can also directly refer to the example on the official website
/**
*This method is used to preview the picture - use imageBrowser, you can preview, there is a navigation bar at the top (can be returned, can be saved to the local), the only disadvantage: the picture cannot be deleted
* @param obj:A tag, mainly used to get the subscript of the current A tag to display the clicked picture first
* **/
function previewThePicByimageBrowser(obj){
//1, get the image array
var picArray = new Array();
$("#picList").children().each(function(i){
picArray[i]=this.children[0].src;
});
//alert(picArray);
//2. Get the index of the current image
var index = $ (obj) .index ();
//alert("Subscript of the current picture: "+index);
//3. Import the module and preview it
var imageBrowser = api.require('imageBrowser');
imageBrowser.openImages({
imageUrls:picArray,//An array of image URLs
showList:false,//Whether to display the pictures in the form of nine palaces, the default value: true (effect: after clicking a picture, all pictures are displayed in the form of nine palaces, and then click which one to display)
activeIndex:index,//When it is not displayed in a nine-square grid, the index of the currently displayed picture in the collection
tapClose:false//When showList is false, this parameter is valid. If this parameter is true, the top navigation bar will not be displayed, and the module will exit when the picture is clicked. If this parameter is false, the top navigation bar is displayed, and clicking the picture hides/shows the top navigation bar
});
}
Because of the last selected photoBrowser, the function of deleting pictures and saving pictures to the phone has been added.
/**
*This method is used to preview the picture - use photoBrowser, you can preview, there is no navigation bar at the top, double-click to zoom in, can't go back, can't save the picture, you need to customize the picture according to the event
* (The solution to the navigation bar found on the Internet: just open a frame and paste it on it; the module opens a Fream, and then I open a Fream and write it transparently on it?
Call openFrame in the callback, the effect is written on the Frame)
* @param obj:A tag, mainly used to get the subscript of the current A tag to display the clicked picture first
* **/
function previewThePic(obj){
//previewThePicByimageBrowser(obj);
//1, get the image array
var picArray = new Array();
$("#picList").children().each(function(i){
picArray[i]=this.children[0].src;
});
//alert(picArray);
var imgCount = picArray.length;//Get the total number of pictures
//alert(picArray);
//2. Get the index of the current image
var index = $ (obj) .index ();
//alert("Use photoBrowser for image preview");
//3. Import the module and preview it
var photoBrowser = api.require('photoBrowser');
photoBrowser.open({
images: picArray,//An array of image URLs
activeIndex:index,//The index of the current image to be displayed in the image path array
//placeholderImg: 'widget://launch/wmltapp.png',//The path of the placeholder image displayed when loading the network image, requires the local image path (widget://, fs://)
bgColor: '#000',//background color
zoomEnabled:true//Whether to open the zoom gesture recognition function (zoom in and out of the picture with the gesture)
}, function (ret, err) {
if (ret) {
var eveType = ret.eventType;
var imgIndex = ret.index;//The subscript of the current picture
photoBrowser.clearCache();//Clear the cache
switch(eveType){
case "show":break;//Open the browser and display it for later navigation (openFrame)
case "change":{//When switching pictures, do not process
/*
photoBrowser.getImage({
index: imgIndex
}, function(ret33, err33) {
alert(ret33.path);
});
*/
break;
}
case "click":{//Click the picture browser to close the picture browser
photoBrowser.close();
break;
}
case "longPress":{//Long press, pop-up box, let you choose whether to save or delete
api.actionSheet({
cancelTitle: 'Cancel',
destructiveTitle: 'Delete',//The title of the red warning button, generally used for some operations such as deletion
buttons: ['Save to phone']
}, function(ret2, err2) {
//ret.buttonIndex: 1, delete 2, save to phone 3, cancel
switch(ret2.buttonIndex){
case 1:{//delete
//First delete the picture in the preview picture collection
photoBrowser.deleteImage({
index:imgIndex
});
imgCount = imgCount-1;
//2, delete the corresponding a tag in the page
//alert($("#picList>a:eq("+imgIndex+")").length);
$("#picList>a:eq("+imgIndex+")").remove();
//3. Determine whether there are still pictures that can be previewed in the current picture collection, if not, close the current picture browser
if(imgCount<=0){//Description deleted
validateBtn();//Modify the state of the save button
photoBrowser.close();
}
break;
}
case 2:{//Save to phone
//First get the image path:
photoBrowser.getImage({
index: ret.index
}, function(ret3, err3) {
if (ret3) {
//alert("Image path:"+ret3.path);
//Then save it to the phone through the path
api.saveMediaToAlbum({
path: ret3.path
},function(ret4,err){
if (ret4 && ret4.status) {
//alert('Save successfully');
//Finally pop up whether the save is successful or not
api.toast({
msg: 'Save successfully',
duration: 2000,//The default is 2000, which is 2s
location: 'middle'//Optional values: top, middle, bottom, the default is bottom
});
} else {
alert('Save failed');
}
});
} else {
alert("Failed to get image path");
}
});
break;
}
}
});
break;
}
}
} else {
alert(JSON.stringify(err));
}
});
}
The image preview is still very simple. As long as this structure is used on the page, it can be called anywhere!
Finally, good luck!