[SalesForce] How to loop the images in apex class which are presented in the zip folder of static resource

I want to use some images in VF Page from the static resource but i want the images to be added dynamically based on the images list in the zip file of static resource.

For that, i have used this code in my apex class

public List<String> imageList{get;set;}
public DemoWorkClass(ApexPages.StandardController controller){
    string imaURL;
    for(integer i = 1; i <= (imageslist); i++){
        imaURL = 'images/'+i+'.TIF';
    }
    imageList.add(imaURL);
}

and called this list of string to the VF Page

<apex:page standardController="account" extensions="DemoWorkClass" renderAs="PDF">
<body>
    <table>
        <td>
            <apex:variable var="imgVar" value="{!imageList}"/>
            <apex:image url="{!URLFOR($Resource.ImagesDemo,imgVar)}"/>
        </td>
    </table>
</body>

Note:
I have to get the images from the Static Resource Only

Please give me the suggestions,

–> In getting the number of images in the zip file of static resource

–> Storing the images in the list and to be present them in the VF Page

Thanks in advance…

Best Answer

To get the number of images in the zip, you will have to parse the zip. A zip file can not be parsed with simple JavaScript. There is simply no native function that can ope ZIP files. However there are some additional libraries which can help you achieve this.

To implement this I have used jsZIP (https://stuk.github.io/jszip/)

jsUtilZip to get file from Resource : https://stuk.github.io/jszip-utils/dist/jszip-utils.js

<apex:page>
<apex:includeScript value="{!URLFOR($Resource.jsZip,'jsZip/dist/jszip.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jsZip,'jsZip/dist/jsziputil.js')}"/>
<script src="{!URLFOR($Resource.ansPKB_Asset,'scripts/jquery-2.1.4.min.js')}"></script>

<script>

    <div class="image-div">
    </div>

var files;

$(function(){
    //var zip = new JSZip();
    files = [];

    //this resource has two files
    var resourceURL = '{!URLFOR($Resource.ansPKB_jQuery)}';

    JSZipUtils.getBinaryContent(resourceURL, function(err, data) {
      if(err) {
        throw err; // or handle err
      }

      var zip = new JSZip(data);

      for (var fileName in zip.files) {
          files.push(fileName)
      }
      console.log(files); //["abc.jpg","pqr.jpg"]
    }); 
})

</script>

To include these files in your image source tag, just iterate over it and create a String

var imageString ='';
for(index=0;files.length;index++)
     imageString += '<img src="url({!URLFOR($Resource.resourceName,\''+files[index]+'\')})" />';

$(".image-div").append(imageString);
Related Topic