Kuidas lisada oma veebisaidi piltidele suumi pildiefekti
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:
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.html
ja 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 img
sildi 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.