Cyclotron, le diaporama 360 c’est tron facile!

Dans cet article :
  1. Le code html

Si comme moi vous n’affectionnez pas particulièrement le flash, mais que vous aimeriez bien proposer une visite virtuelle ou un diaporama 360, cyclotron vous conviendra parfaitement!

Il s’agit d’un plugin jquery qui permet, à partir d’une image déjà montée (oui hein, il ne faudrait pas rêver non plus !) de proposer une petite visite virtuelle des plus simples à construire : une image, un div, une ligne de code et c’est parti.

>>> Voir le site officiel

Le code html

Après avoir bien sur importé jquery et cyclotron.js depuis les sites officiels respectifs, on a :

<div class="cycle"></div>
<script>
$(document).ready(function ($) {
	$('.cycle').cyclotron();
});
</script>

C’est aussi simple que ça. Un peu de CSS pour aller avec :

.cycle {
	background-image: url(cyclotron.jpg);
	height: 300px;
	width: 530px;
	margin: auto;
	cursor: move;
}

Et on a terminé. Vous pouvez voir le résultat en cliquant ici.

L’exemple a été réalisé à partir d’un exemple pris sur wikipedia

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *