Search code examples
jqueryjscrollpane

Scrollbars for dynamically added images


I am using this best JQuery scrollbar plugin.

This is the sample demo on their site for loading dynamic content and appending scrollbars

I have a simple div and trying to upload some images using uploader and appending the uploaded images to this div

This is what I mean:

  uploader.bind('FileUploaded', function (up, file) {
          $('#paginationimages').append("<img class='LoadclickImage' align='left' 
          style='height:90px;width:120px;' src='Uploads/" + 
          $("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' 
          width='120' height='90' rel='group1' href='Uploads/" + 
          $("<%=currentDirectory.ClientId%>").value + "/" + file.name + "'  
          data-full='Uploads/" + $("<%=currentDirectory.ClientId%>").value + "/"
          +file.name + "'>");
  });

Now how do I add scrollbars to this

Normally in the default example on the site we can use a class for the div as shown below and it adds a scrollbar for the div.But I would like to know how do I do that for the dynamic content.

<div class="scroll-pane-arrows">
</div>

And this is how my div looks:

<div id='paginationimages' class="thumbs">
</div>

Solution

  •   uploader.bind('FileUploaded', function (up, file) {
              $image = "<img class='LoadclickImage' align='left' 
              style='height:90px;width:120px;' src='Uploads/" + 
              $("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' 
              width='120' height='90' rel='group1' href='Uploads/" + 
              $("<%=currentDirectory.ClientId%>").value + "/" + file.name + "'  
              data-full='Uploads/" + $("<%=currentDirectory.ClientId%>").value + "/"
              +file.name + "'>";
              $('#paginationimages').append($image).jScrollPane(...);
      });