jQuery Zoomer Plugin - "Ajouter un effet Zoom à vos photos"

23 février 2024 HTML5, LABO & TESTS

Ajouter un effet Zoom à vos photos avec JQuery

Vous avez envi de diffuser des cartes ou des oeuvres artistiques et vous souhaitez que l'utilisateur puisse zoomer facilement sur vos illustration, voici un petit plugin en Javascript qui fera l'affaire.

DEMO "cliquer sur + ou - ":

LE CODE : <!--[JQUERY Librairie + JS + CSS ]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://lecerfraphael.fr/jquery.fs.zoomer.css" rel="stylesheet" type="text/css" media="all">
<script src="https://lecerfraphael.fr/jquery.fs.zoomer.js"></script>
<script src="https://lecerfraphael.fr/jquery.fs.zoetrope.min.js"></script> <!--[Style CSS ]--> <style>
.demo .zoomer_wrapper { border: 1px solid #ddd; border-radius: 3px; height: 500px; margin: 10px 0; overflow: hidden; width: 100%; }

.demo .zoomer.dark_zoomer { background: #333 url(zoomer-bg-dark.png) repeat center; }
.demo .zoomer.dark_zoomer img { box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
.responsive {
display: block;
max-width: 100%;
height: auto;
}
</style> <!--[CODE JavaScript ]--> <script>
$(document).ready(function() {
$(".demo .zoomer_basic").zoomer();

$(".demo .zoomer_custom").zoomer({
controls: {
zoomIn: ".zoomer_custom_zoom_in",
zoomOut: ".zoomer_custom_zoom_out"
},
customClass: "dark_zoomer",
increment: 0.03,
interval: 0.1,
marginMax: 50
});



$(window).on("resize", function(e) {
$(".demo .zoomer_wrapper").zoomer("resize");
});

$(window).one("pronto.load", function() {
$(".demo .zoomer_basic").zoomer("destroy");
$(".demo .zoomer_custom").zoomer("destroy");
$(".demo .zoomer_tiled").zoomer("destroy");
$(".demo .load_zoomer_tiled").off("click");
});
});
</script> <!--[CODE HTML ]-->

<h1>Code Zoom</h1>

<div class="zoomer_wrapper zoomer_basic">
<img src="https://lecerfraphael.fr/imeg/*.jpg" class="responsive">
</div>
</div>

</article>
</body>