VF AttachmentSlider Component is here !

Tuesday, September 10, 2013


So here we go, a Visualforce component to show the images from attachment as a slider . This Slider "VFAttachmentSlider" can be used in a inline VF pages and as well as on standalone pages to render a beautiful image slider by pulling images from attachment of a record

VF Attachment Slider


The component uses FlexiGrid2 and jQuery to render the slider, which  itself is very easy to implement. This component "VFAttachmentSlider" goes one step further and makes displaying images from attachment super easy. It pulls all the related attachment of the passed record and queues them into a slider.


Features

  • Easy Syntax : Just pass the Id of the parent record containing the images in attachments to the component and guess what you have a awesome looking Slider.

    Example :
      <c:VFAttachmentSlider recordId="a0190000006ppB5"/>
    *replace the harcoded Id with a merge field or an Id.
  • Prev & Next : Has easy navigation support for previous and next.
  • Pagination : Shows the current page.
  • Responsive Design :  This is something which is also inherited from Flexslider. The image slider automatically adjust according to the size of the images.

Some Examples

  • Using VFAttachmentSlider in inline Page 
    • Account Inline Page :
       <apex:page sidebar="false" standardController="Account">  
         <c:VFAttachmentSlider recordId="{!Account.Id}"/>    
       </apex:page>  
    • Similarly for Contact
       <apex:page sidebar="false" standardController="Contact">  
         <c:VFAttachmentSlider recordId="{!Contact.Id}"/>    
       </apex:page>  
    • Similarly you can use the slider for any Custom Object
       <apex:page sidebar="false" standardController="MyCustomObject__c">  
         <c:VFAttachmentSlider recordId="{!MyCustomObject.Id}"/>    
       </apex:page>  

4 comments:

  1. Hey,

    Couldn't seem to get this working inline on a record page. Created the VF page but it didn't render anything

    ReplyDelete
    Replies
    1. Can you check the JS console for chrome ? if there are any errors ?

      Delete
  2. I also was unable to get this working. It just displays a blank page. Any ideas on what might be missing? The JS console doesn't appear to provide anything useful (I just get an error about an image that can't be found which I get on every page not just my VF page).

    ReplyDelete
  3. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete