Follow by Email

Tuesday, 2 December 2014

Image zoom (power zoomer) effect using Jquery in ADF Faces

Jquery is most popular javascript library ,it is used to provide better ui design, animations and client side events
This is another post about using jquery in ADF Faces, see previous post
Using JQuery in Oracle ADF

In this post i am using a jquery script to zoom (enlarge) image on hover , you have seen this in many e-commerce websites as they provide power zoom feature to enlarge product image for better customer experience



I have taken this jquery script from Dynamic Drive, see the documentation
To implement this in ADF Application follow these steps
  • Create a Fusion Web Application and a page in viewController project (Jdev 12.1.3)


  • Downloaded jquery script file from above link -ddpowerzoomer.js, add this jquery file to viewController project


  • Now add jquery library reference in page in order to use jquery functions

  • <af:resource type="javascript" source="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></af:resource>
                <af:resource type="javascript" source="js/ddpowerzoomer.js"/>
    

  • Next step is to add an image to page , so added an af:image to page and set path of image to display


  • Now i have to execute jquery function that will add power zoom feature to this image (See jquery code that will be executed on pageload)

  • jQuery(document).ready(function($){
     $('#i1').addpowerzoom({
      defaultpower: 2,  powerrange: [2,5],  largeimage: null,  magnifiersize: [75,75]  }) 
    })
    

    here i1 is the id of image, default zoom power and magnifier size is configured here
  • So to execute this jquery function on pageload , added a clientListenr to pagelike this

  • <af:clientListener type="load"
                                   method="jQuery(document).ready(function($){   $('#i1').addpowerzoom({  defaultpower: 2,  powerrange: [2,5],  largeimage: null,  magnifiersize: [75,75]  }) })"/>
    

  • Now run this application and check it, magnifier is on deer :)


  • Now i am increasing size and power of magnifier - Power is 3 and size is 200x200
Thanks, Happy Learning :)
Download Sample ADF Application

4 comments :

  1. when i add new photo on page
    this function dosen`t working
    how do i add more photos on page ??

    ReplyDelete
    Replies
    1. Hi Mohamed

      You need to enable function for new images using image id as you can see in this line
      $('#i1').addpowerzoom
      here i1 is the image id

      Ashish

      Delete
    2. thank u for help
      really appreciate your help us to understanding ADF and how to make different things

      Delete
    3. You are welcome Mohamed :)

      Delete