...
✅ WEB ja WordPressi uudised, teemad, pistikprogrammid. Siin jagame näpunäiteid ja parimaid veebisaidi lahendusi.

Kuidas lisada oma veebisaidi piltidele suumi pildiefekti

22

Kas soovite oma veebisaidile lisada suumipildi efekti? Suumiefekti lisamine pildile on tänapäeval tavaline käitumine, eriti veebitoodete müügi veebilehtede Fashion jaoks. Selles artiklis näitame teile, kuidas saaksime hõlpsalt suumipildi efekti lisada.

Seda efekti nimetatakse ka pildi suurendajaks või suurendatud pildiks. Seda efekti kasutades näevad külastajad hõljumisel suurt osa teie pildist.

Pärast selle õpetuse järgimist saate lõpliku väljundi järgmiselt:

Kuidas lisada oma veebisaidi piltidele suumi pildiefekti

Alustamine

Selle õpetuse jaoks kasutame seda xZoom jQuery Zoom galerii pistikprogrammi. Kasutaja saab selle pistikprogrammi installida npm, boweri või CDN kaudu. Pistikprogrammi failide lisamiseks kasutaksime CDN-i.

Looge fail index.htmlja lisage pistikprogrammi JS- ja CSS-failid.

<link rel="stylesheet" type="text/css" href="https://unpkg.com/xzoom/dist/xzoom.css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/xzoom/dist/xzoom.min.js"></script>

Lisa suumi pildiefekt

Suumiefekti lisamiseks vajate oma pildile kahte versiooni – eelvaade ja originaal. Allpool on lingid näiteks piltidele.

Kui olete mõlema versiooni piltidega valmis, peate oma imgsildi kirjutama järgmiselt:

<img class="xzoom" src="img/01_b_car.jpg" xoriginal="img/original/01_b_car.jpg" />

Pärast ülaltoodud koodi lisamist helistage pildi suumimeetodile järgmiselt:

$(".xzoom").xzoom({
    position: 'right',
    Xoffset: 15
});

Siin seadsime positsiooni paremale. See võib olla ülemine, vasak, sisemine, alumine jne. Kõigi selle pistikprogrammi pakutavate valikute kohta saate lugeda nende dokumentatsioonist.

Lõplik kood:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/xzoom/dist/xzoom.css" media="all" />
 
<img class="xzoom" src="img/01_b_car.jpg" xoriginal="img/original/01_b_car.jpg" />
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/xzoom/dist/xzoom.min.js"></script>
<script>
  jQuery(function($) {
      $(".xzoom").xzoom({
          position: 'right',
          Xoffset: 15
      });
  });
</script>

Selle pistikprogrammi abil saame lisada ka suumiefektiga pildigalerii. Galerii lisamiseks saate näidiskoodi ametlikult lehelt. Samuti kassasse demo näited selle plugin.

seotud artiklid

See veebisait kasutab teie kasutuskogemuse parandamiseks küpsiseid. Eeldame, et olete sellega rahul, kuid saate soovi korral loobuda. Nõustu Loe rohkem