Chargement…
Photo Panoramique Interactive Avec jQuery

Créer Une Photo Panoramique Interactive Avec jQuery



Dans ce web design tutoriel, je vais vous montrez comment créer une photo panoramique et interactive avec jQuery et cela on utilisant un script qui se nomme Panoramic Viewer. L’idée est simple, lors de passage de la souris sur une photo, une main s’affiche avec une flèche qui montre dans quel direction il faut glisser la souris pour avoir une vue Panoramique de l’image.

Vue Panoramique d'une Photo

Photo Panoramique Interactive Avec jQuery

Comment utiliser PanoramaViewer.js

1- Créez un dossier : Mon-panorama par exemple.
2- Dans Mon-panorama, Créez 3 Dossier : js, css et images
3- Ouvrez le dossier Mon-panorama et ajoutez ses fichier :

index.html :

En premier on ajoute la Librairie jQuery (http://code.jquery.com/jquery-1.9.1.js), puis on attache les feuilles de style (style.css est pour notre page et panorama_viewer.css est pour l’animation), le script jquery.panorama_viewer.js chargé de l’animation.

4- Ouvrez le dossier Mon-panorama => CSS
5- Créez un fichier style.css et collez ce code dedans :

6- Créez un fichier panorama_viewer.css et ajouter ce code dedans :

7- Ouvrez le dossier JS et créer un fichier jquery.panorama_viewer.js, puis collez ce code dedans :

8- Ajoutez l’image que dont vous voulez créer une vue Panoramique dans le dossier : images.

Lancez votre index.html et vous verrez l’animation…

Si cet article vous a plu alors n’hésitez pas à le partager avec vos amis(es), et suivez nous sur Facebook, Twitter et Google+ Pour recevoir des notifications de tous Nos nouveaux tutoriaux et conseils.



Laisser un commentaire