Pluginuri jQuery › Pluginuri Zoom jQuery›jQuery magnify.js

Plugin jQuery simplu pentru lupă cu imagine pentru lupă - magnify.js

Plugin jQuery simplu pentru lupă cu imagine pentru lupă - magnify.js
Mărime fișier: 472 KB
Vizualizări Total: 38748
Ultima actualizare:
Data publicării:
Site oficial: Accesați site-ul web
Licență: MIT
   
Demo Descarca

Cum să începeți să utilizați jQuery?

Mai multe din această categorie ...

Vizualizați pluginurile noastre recomandate

TOP 100 de jQuery Plugins 2020

Chrome, IE9 +, FireFox, Opera, Safari#imagine zoom#Lupă

magnify.js este un plugin jQuery mic și simplu de utilizat pentru a crea un efect frumos de lupă pentru a mări imaginile produselor de pe site-urile dvs. de comerț electronic.

Cum să-l folosească:

1. Încărcați magnify.cssîn antet și jquery.magnify.jsîn partea de jos a paginii web, dar după biblioteca jQuery.

Vizualizare sursă
1<link href="css/magnify.css" rel="stylesheet">
2 
3<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
4<script src="js/jquery.magnify.js"></script>

2. Înfășurați imaginea mică într-un container cu clasa „mărire”.  Introduceți imaginea mică în pagina dvs. web. Adresa URL a imaginii mari poate fi plasată în data-magnify-srcatribut sau transmisă ca opțiune numită „src” în timpul inițializării.

Vizualizare sursă
1<img src="small.jpg" data-magnify-src="large.jpg">

3. Apelați .magnify()funcția de pe selectorul de imagine

Vizualizare sursă
1$(document).ready(function() {
2  $('img').magnify();
3});

4. Opțiuni implicite.

Vizualizare sursă
01$('img').magnify({
02 
03  // URI of the large image
04  'src': '',
05 
06  // fade in/out speed
07  'speed': 100,
08 
09  // timeout for mobile
10  'timeout': -1,
11 
12  // Vertical touch point offset. Set this to something like 90 if you want to avoid your finger getting in the way of the magnifying lens on smartphones and tablets.
13  'touchBottomOffset': 0,
14 
15  // Width of the main image
16  'finalWidth': null,
17 
18  // Height of the main image
19  'finalHeight': null,
20 
21  // Width of the image displayed inside the magnifying lens
22  'magnifiedWidth': null,
23 
24  // Height of the image displayed inside the magnifying lens
25  'magnifiedHeight': null,
26 
27  // Set this to true to keep the edge of the image within the magnifying lens
28  'limitBounds': false,
29 
30  // Custom event to fire when you tap on the mobile close button.
31  // Set this to 'click' or 'touchend' if it's conflicting with another event handler.
32  // This option is only applicable when the mobile plugin (jquery.magnify-mobile.js) is used.
33  'mobileCloseEvent': 'touchstart',
34 
35  // callbacl
36  'afterLoad': function(){}
37   
38});

5. Metoda distruge.

Vizualizare sursă
1var $zoom = $('img').magnify();
2// Disable zoom
3$zoom.destroy();

Jurnal de modificări:

v2.3.3 (09.06.2019)

  • Hărțile cu imagini corecte necesită două clicuri în Firefox

v2.3.2 (20.06.2018)

  • Fix problemă când magnifiedWidth / Înălțime până în prezent d în timp ce lentila este vizibilă

v2.3.0 (16.04.2018)

  • Opțiuni actualizate.

v2.1.0 (31.05.2017)

  • S-a adăugat opțiunea „limitBounds”

v2.0.0 (29.05.2017)

  • Remediați regresia indexului z

v1.7.0 (20.02.2017)

  • Actualizare JS

v1.6.17 (29.12.2016)

  • Redenumiți opțiunea „onload” la „afterLoad” pentru a evita cuvântul rezervat JS

v1.6.17 (25.11.2016)

  • Distrugeți doar imaginile cu zoom

v1.6.16 (14.11.2016)

  • Adăugați soluție pentru implementarea bug-ului elementFromPoint () în FF

v1.6.14 (09.11.2016)

  • Actualizare JS

v1.6.12 (19-10-2016)

  • adăugat posibil să se integreze cu un comportament "usemap"

v1.6.11 (05-10-2016)

  • Actualizare JS

v1.6.10 (07.09.2016)

  • Remediați înlănțuirea jQuery

v1.6.9 (10.08.2016)

  • Remediați restul handlerului de redimensionare după distrugere (); adăugați evenimente magnifystart și magnifyend

v1.6.8 (2016-08-10)

  • rezolvarea unei erori.

v1.6.7 (18.07.2016)

  • Adăugați metoda destroy (); normalizează sfârșiturile de linie

v1.6.6 (2016-04-20)

  • Offset cache și dimensiuni pentru performanțe mai bune

v1.6.5 (29.02.2016)

  • Remediați bara de defilare care arată când obiectivul este în afara ecranului

v1.6.0 (26.02.2016)

  • Adăugați opțiunea „timeout” pentru dispozitivele tactile

v1.5.0 (24.02.2016)

  • Adăugați opțiunea „timeout” pentru dispozitivele tactile

v1.4.0 (18.02.2016)

  • Actualizare JS.

v1.3.3 (27.01.2016)

  • Obiectivul fix s-a blocat dacă șoarecele este prea rapid.

v1.3.1 (27.08.2015)

  • a remediat o eroare.

v1.3.0 (06.04.2015)

  • a remediat o eroare.

v1.2.6 (24.01.2015)

  • Actualizați.

v1.2.3 (24.01.2015)

  • Actualizați.

v1.2.2 (26.12.2014)

  • Actualizați.

v1.2 (22.12.2014)

  • Actualizați.

v1.1 (22.12.2014)

  • Remediați problema în care obiectivul era acoperit de alte elemente

 

Acest minunat plugin jQuery este dezvoltat de thdoan . Pentru mai multe utilizări avansate, vă rugăm să verificați pagina demo sau să vizitați site-ul oficial.