Sunday, August 13, 2017

Membuat Zoom Pada Galery Dengan jQuery

Mungkin teman-teman sering melihat ya, jika mengunjungi situs-situs eccomerce di bagian view gambar bisa melihat dengan detail dengan hanya menggeser pointer udar besar samabar tersebut, mungkin teman-teman bertanya-tanya dalam hati di buat menggunakan apa ya? setelah anda memuka blog saya maka terjawablah sudah semua pertanyaan yang ada di pikiran anda. yang nantinya akan seperti gambar di bawah ini.


Ikutin petunjuk yang saya bagikan.

1. Tarik jquery.min.js, xzoom.min.js dan xzoom.css. jika anda belum mempunyai download di google

1<!-- JQUERY -->
2<script src="jquery.min.js"></script>
3
4<!-- CSS STYLE-->
5<link rel="stylesheet" href="css/xzoom.css">
6
7<!-- XZOOM JQUERY PLUGIN  -->
8<script src="js/xzoom.min.js"></script>

2. Tambahkan markup xzoom di file html yang anda kerjakan, anda dapat menambahkan banyak    gambar, disini saya contohkan dengan 4 gambar.

01<img class="xzoom" src="path/to/preview_image_01.jpg" xoriginal="path/to/original_image_01.jpg" />
02
03<div class="xzoom-thumbs">
04  <a href="path/to/original_image_01.jpg">
05    <img class="xzoom-gallery" width="80" src="path/to/thumbs_image_01.jpg"  xpreview="path/to/preview_image_01.jpg">
06  </a>
07  <a href="path/to/original_image_02.jpg">
08    <img class="xzoom-gallery" width="80" src="path/to/preview_image_02.jpg">
09  </a>
10  <a href="path/to/original_image_03.jpg">
11    <img class="xzoom-gallery" width="80" src="path/to/preview_image_03.jpg">
12  </a>
13  <a href="path/to/original_image_04.jpg">
14    <img class="xzoom-gallery" width="80" src="path/to/preview_image_04.jpg">
15  </a>
16</div>

3. Inisial gambar yang akan diperbesar

    $(".xzoom").xzoom();

4. Semua code dengan value default.

01$(".xzoom").xzoom({
02
03  // top, left, right, bottom, inside, lens, fullscreen, #ID
04  position:'right',
05
06  // inside, fullscreen
07  mposition:'inside',
08
09  // In the HTML structure, this option gives an ability to output xzoom element, to the end of the document body or relative to the parent element of main source image.
10  rootOutput:true,
11
12  // x/y offset
13  Xoffset: 0,
14  Yoffset: 0,
15
16  // Fade in effect, when zoom is opening.
17  fadeIn:true,
18
19  // Fade transition effect, when switching images by clicking on thumbnails.
20  fadeTrans:true,
21
22  // Fade out effect, when zoom is closing.
23  fadeOut:false,
24
25  // Smooth move effect of the big zoomed image in the zoom output window.
26  // The higher value will make movement smoother.
27  smoothZoomMove: 3,
28
29  // Smooth move effect of lens.
30  smoothLensMove: 1,
31
32  // Smooth move effect of scale.
33  smoothScale: 6,
34
35  // From -1 to 1, that means -100% till 100% scale
36  defaultScale: 0,
37
38  // Scale on mouse scroll.
39  scroll:true,
40
41  // Tint color. Color must be provided in format like "#color".
42  tint:false,
43
44  // Tint opacity from 0 to 1.
45  tintOpacity: 0.5,
46
47  // Lens color. Color must be provided in format like "#color".
48  lens:false,
49
50  // Lens opacity from 0 to 1.
51  lensOpacity: 0.5,
52
53  // 'box', 'circle'
54  lensShape:'box',
55
56  // Custom width of zoom window in pixels.
57  zoomWidth:'auto',
58
59  // Custom height of zoom window in pixels.
60  zoomHeight:'auto',
61
62  // Class name for source "div" container.
63  sourceClass:'xzoom-source',
64
65  // Class name for loading "div" container that appear before zoom opens, when image is still loading.
66  loadingClass:'xzoom-loading',
67
68  // Class name for lens "div".
69  lensClass:'xzoom-lens',
70
71  // Class name for zoom window(div).
72  zoomClass:'xzoom-preview',
73
74  // Class name that will be added to active thumbnail image.
75  activeClass:'xactive',
76
77  // With this option you can make a selection action on thumbnail by hover mouse point on it.
78  hover:false,
79
80  // Adaptive functionality.
81  adaptive:true,
82
83  // When selected position "inside" and this option is set to true, the lens direction of moving will be reversed.
84  lensReverse:false,
85
86  // Same as lensReverse, but only available when adaptive is true.
87  adaptiveReverse:false,
88
89  //  Output title/caption of the image, in the zoom output window.
90  title:false,
91
92  // Class name for caption "div" container.
93  titleClass:'xzoom-caption',
94
95  // Zoom image output as background
96  bg:false
97   
98});

5. Fungsi ini dapat digunakan dengan integrasi galeri agar tampilan lebih profesional

01// Function that is called on initialization step, that is binding an event "mouseenter" to the passed jQuery object "element" which is originnaly a main source image.
02//  And giving a function that need to be called when event will be triggered "instance.openzoom".
03instance.eventopen = function(element) {
04  element.bind('mouseenter', instance.openzoom);
05}
06
07// Function that is called on the step when it is needed to bind an event to the element on which the leaving will be tracked.
08instance.eventleave = function(element) {
09  element.bind('mouseleave', instance.closezoom);
10}
11
12// Function that is called on the step when it is needed to bind an event to the element on which the moving will be tracked.
13instance.eventmove = function(element) {
14  element.bind('mousemove', instance.movezoom);
15}
16
17// Function that is called on the step when it is needed to bind an event to the element on which the scrolling for scale will be tracked.
18instance.eventscroll = function(element) {
19  element.bind('mousewheel DOMMouse<a href="http://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>', instance.xscroll);
20}
21
22// Function that is called on the step when it is needed to bind an event to the element on which the click will be tracked.
23instance.eventclick = function(element) {
24  element.bind('click', function(event) {
25    $('#main_image').trigger('click');
26  });
27}
28
29// Function to open zoom, uses event.pageX and event.pageY as start location of lens.
30instance.openzoom(event)
31
32// Has no parameters, and simply closing the zoom.
33instance.closezoom()
34
35// This function also uses event.pageX and event.pageY to be able to provide movement of lens on the zoom.
36instance.movezoom(event)
37
38// This function is adapted for "mousewheel", "DOMMouseScroll" events and tested, and works fine on all major browsers.
39// But if you are using some custom events where you will call this function directly then you can use event.xdelta as delta with value 0 or 1 to tell the direction of scaling by 5% from each call, or event.xscale for exact scale with value from -1 to 1 (which means -100% to 100%) to set up exact scale of the zoom as you need.
40instance.xscroll(event)
41
42// Function that will delete original instance.event* functions by replacing them with blank functions and unbind default events on objects.
43// It can help you to clear default mouse binding events that xzoom already setup.
44instance.eventunbind()
45
46// Function that will restore original instance.event* functions.
47instance.eventdefault()

Mudah bukan, tinggal ikutin petunjuk yang saya buat nanti akan sesuai apa yang di inginkan...
apa masih males copy paste? saya aja yang bikin tidak males, anda yang masih belajar ko malah males pie to?

Yowis nih saya kasih link downloadnya. tapi jangan lpa share ya..

via Adf.ly silahkan copy link berikut http://viahold.com/2W5W

via shorte.st ambil  di link http://destyy.com/q14y9x



By di