Web 2.0
Multimédia
Internet
Programmation...



Raphael Lecerf

Intégrateur Multimédia Web
 

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


04 juin 2018 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 - ":

Claude Monet - Tulip fields in Holland (Musée d'Orsay)
Carte ancienne de Lille

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="jquery.fs.zoomer.css" rel="stylesheet" type="text/css" media="all">
<script src="jquery.fs.zoomer.js"></script>
<script src="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="imeg/*.jpg" class="responsive">
</div>
</div>

</article>
</body>


Recherche

Statistiques

  • 34 articles
  • Aucun commentaire
  • PluXml