2

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...

Improve this question
2
  • You used apex:variable. You should be using apex:repeat.
    – Kiran Machhewar
    Commented Dec 9, 2015 at 7:21
  • Yeah I tried that apex:repeat too... but still it is not showing any result
    – Subhash
    Commented Dec 9, 2015 at 7:32

1 Answer 1

Reset to default
1

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);
Improve this answer
4
  • Where is ansPKB_Asset and ansPKB_jQuery? i didn't find it anywhere Please let me know...
    – Subhash
    Commented Dec 9, 2015 at 7:56
  • Those are my static resources 1. ansPKB_jQuery is the jquery and asset is zip folder with files
    – Salesforcesmarty
    Commented Dec 9, 2015 at 8:44
  • Thanks for your valuable reply but i cannot get the perfect understanding of this code as because i am very new to this technology. Could you please tell me this one with some kind of explanation... Thanks in advance....
    – Subhash
    Commented Dec 9, 2015 at 13:25
  • Especially on this part of 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>
    – Subhash
    Commented Dec 10, 2015 at 5:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .