" Image Zoom Effect " using JQuery in ADF Faces

Jquery merupakan library yang paling populer, digunakan untuk menyediakan desain ui baik dari sisi Animations dan Client side events.

Disini saya menggunakan sebuah jquery untuk zoom sebuah foto. mungkin anda pernah liat beberapa e-commerce websites dimana mereka menggunakan teknik zoom untuk memperjelas kualitas product mereka.

Persiapkan ini semua

Jdeveloper   : Oracle Jdeveloper 11.1.1.6.0

Download Jquery    : ddpowerzoomer.js

Untuk gambar disarankan menggunakan size yang HD , bisa di download di sini ( Wallpaper HD )

Step by Step :

Step 1

• Buka Jdeveloper dan Pilih New Application lalu pilih " Fusion Web Application "
• Buat jspx, di dalam " Web Content "
• Buat Folder ( js ) di dalam " Web Content "
• dan didalam Folder ( js ) buat ( javascript File ) lalu ddpowerzoomer.js paste didalam folder ( js )

Contoh susunan hirarki project saya :

Step 2

• Drag and Drop " image(ADF Faces.Common Components) " kedalam .jspx
• Cara input gambar kedalam ADF dengan " image(ADF Faces.Common Components) "

• Cari di directory anda, dimana letak gambar yang akan anda pakai, setelah itu klik " OK "
• Jika menemukan Eror Message seperti ini

• Klik saja " Yes " dan masukan gambar itu didalam directory aplikasi ADF yang sedang anda buat. lalu klik OK.
• Saat gambar sudah ada didalam jspx, pasti gambar itu sangat besar sesuai resolusinya. cara untuk mengatur size gambar sesuai keinginan kita, setting gambar tersebut di dalam properties.

• Setting Width and High gambar tersebut, dan ingat gunakan tipe ( px ) agar mudah dalam mengatur size gambar tersebut.

Step 3

• Tambahkan Library Jquery didalam jspx,

<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"/>

• Tambahkan Script ini didalam didalam jspx, letakan setelah script di atas.

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

preview Step 3 :

Finish ..
And Run Your jspx..

Preview After Run

Sample Aplikasi ( Download )

Silakan Dikembangkan..

Terima Kasih.