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

Sharing is Caring

Jquery is the 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 for the image zoom, see the 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 the viewController project (Jdev 12.1.3)

 

 

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

 

 

    • Now add jquery library reference in the 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 the page, so added an af:image to page and set the path of the 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 page load)

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 page load added a client listener to page like 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, the magnifier is on deer 🙂

 

 

  • Now I am increasing size and power of magnifier – Power is 3 and size is 200×200
Image zoom

Thanks, Happy Learning 🙂
Download Sample ADF Application

 

Related Posts

An Oracle ACE, Blogger, Reviewer, Technical Lead working on Oracle ADF

0 thoughts on “Image zoom (power zoomer) effect using Jquery in ADF Faces”

Leave a Reply

Your email address will not be published. Required fields are marked *