begin process at 2010 03 20 19:45:11
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Graphique

 > DIAPORAMA 360 DEGRÉ COMPLET ET TOUT AUTOMATIQUE QUATRE VITESSES DE ROTATION PLUS PAUSE ET AFFICHAGE OPTIMISÉ

DIAPORAMA 360 DEGRÉ COMPLET ET TOUT AUTOMATIQUE QUATRE VITESSES DE ROTATION PLUS PAUSE ET AFFICHAGE OPTIMISÉ


 Information sur la source

Note :
9,33 / 10 - par 3 personnes
9,33 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :diaporama, 360 Degré, vue360, images, Abdelaziz Niveau :Débutant Date de création :12/06/2008 Date de mise à jour :16/04/2009 12:34:22 Vu / téléchargé :11 101 / 1 290

Auteur : abdelaziz_info

Ecrire un message privé
Site perso
Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note

 Description

Panoramique diaporama 360 degré complet et tout automatique, quatre vitesses de rotation plus pause, affichage optimisé, liste déroulante pour toutes sortes d'images....


Il est simple et facile à utiliser, fonctionne et marche c'est garantie avec tout, par tout et sur tout, ce 360 degré diaporama complet et tout automatique, a quatre vitesses de rotation pour chaque direction plus pause, affichage optimisé, annonce le début et la fin de l'affichage, les images sont stockées sur une liste déroulante pour toutes sortes d'images et ce n'est pas le tout: il est man½uvré par déférentes commandes, a la possibilité d'afficher des images que vous n'hébergez pas, et a deux possibilités de navigation: l'une avec images en mouvement  et l'autre à images fixes; et le plus important c'est qu'il a les moyens de créer des liens vers les pages en relation avec les images et donne la possibilité d'affiché chaque image entièrement dans une nouvelle fenêtre,  et tout cela n'empêche pas le code de s'intégrer facilement dans n'importe quelle page et ne nécessite aucune installation.

Un code de  démonstration est disponible sur cette adresse :
http://abdelaziz.site.voila.fr/sources.htm

Condition d'utilisation: 1- bien s'en servir 2- respecter les droits et les instructions de l'auteur 3- pour ceux qui peuvent et ont des idées: le perfectionner et informer l'auteur et lui signaler tout changement important  ajouté au code.
4- bonne chance.

Source

  • <!--//
  • // personalisation de la fenêtre d'affichage du diaporama
  • function PL(){
  • self.moveTo(0,0)
  • self.resizeTo(screen.availWidth,screen.availHeight)
  • }
  • function TT(){
  • // entrez vos parametres là ou c'est indiqué, et ne rien Changer d'autres pour garder le droit d'utilisation merci.
  • /*
  • abdelaziz rejeb Elalia Tunisie
  • http://abdelaziz.site.voila.fr
  • pour tout contact: http://intersite.site.voila.fr
  • Elalia - Tunisie le 25/05/2007
  • */
  • MX=7 // Entrez le nombre Total d'images
  • }
  • image="photos/texte.gif"; // l'adresse complete de l'image à afficher au demarrage
  • /*
  • Donnez l'adresse complete de chaque image et tenez compte que vous avez la possibilité d'importer
  • des images externes de toutes sortes dans les mêmes dimentions que le diaporama
  • */
  • var imgUrl=new Array();
  • imgUrl[0]="photos/texte.gif";
  • imgUrl[1]="photos/stockholm.jpg";
  • imgUrl[2]="photos/etoile.gif";
  • imgUrl[3]="photos/images.gif";
  • imgUrl[4]="outils/background.jpg";
  • imgUrl[5]="photos/ciel.jpg";
  • imgUrl[6]="photos/soir.jpg";
  • /*
  • la liste d'images: entrez ici les noms ou les titres des images
  • */
  • op = '<option value="'
  • fop = '</option>'
  • image1 = op+imgUrl[0]+'">Bienvenus'+fop;
  • image2 = op+imgUrl[1]+'">stockholm'+fop;
  • image3 = op+imgUrl[2]+'">Des étoiles'+fop;
  • image4 = op+imgUrl[3]+'">Des images'+fop;
  • image5 = op+imgUrl[4]+'">Background mobil'+fop;
  • image6 = op+imgUrl[5]+'">Ciel sur mer'+fop;
  • image7 = op+imgUrl[6]+'">Beauté du soir'+fop; // Ajouter des option, si vous voulez
  • L = image1+image2+image3+image4+image5+image6+image7 // entrez ici les nouvelles images dans l'ordre
  • /*
  • création du diaporama
  • */
  • Limg=502 ; // Largeur de l'image
  • Himg=250 ; // Hauteur de l'image
  • /*
  • creation de la commande de vitesse
  • */
  • Mask="outils/gif1.gif"; // adresse comlete de l'image mask
  • Lmsk=60 ; // Largeur de l'image mask
  • Hmsk=250 ; // Hauteur de l'image mask
  • Lmskstop=12 ; // Largeur de la commande Stop
  • bordure=1 ; // si vous ne voulez pas de bordure alors mettez 0
  • couleur="#003366" ; // entrez la couleur de la bordure
  • document.write('<style type="text/css" media="screen">');
  • document.write('#Diapo360{width: '+ Limg + 'px; height: '+ Himg +'px; background-color:#000000;}'+'IMG {cursor: pointer;};');
  • document.write('</style>');
  • var Diapo360 = document.getElementById("Diapo360");
  • Diapo360.style.border = "solid "+bordure+"px "+couleur;
  • Diapo360.style.background = "url("+image+") repeat";
  • X = 1; // glissement à un coté
  • Y = -1; // glissement inversé
  • D = 10; // vitesse de rotation
  • /*
  • image mask pour variation de vitesse
  • */
  • imd= '<img onmouseover=\'Y = ';
  • imf= '\' border=0 src=outils/gif1.gif width='+Lmsk+' height='+Hmsk+'>';
  • /*
  • la largeure de l'image mask pour le stop
  • */
  • imfs= '\' border=0 src='+Mask+' width='+Lmskstop+' height='+Hmsk+'>';
  • setInterval('Deroulement()', 90); // 90 = Duré du pause
  • function Deroulement()
  • {
  • X += Y / D*100 ;
  • document.getElementById("Diapo360").style.backgroundPosition = X + "px";
  • }
  • /*
  • creation et affichage des images maske pour commonder la vitesse
  • Pour augmenter ou deminuer la vitesse à droite et à gauche Vous pouvez modifier les valeurs dans les lignes suivantes
  • pour faire tourner avec ou contre le mouvement du curseur il suffit de changer les valeurs positive contre les valeurs negatives au lignes suivantes.
  • */
  • var editer = ""+
  • imd+ 7 + imf+
  • imd+ 2.5 + imf+
  • imd+ 0.7 + imf+
  • imd+ 0.3 + imf+
  • imd+ 0 + imfs+ // la commonde du stop
  • imd+ -0.3 + imf+
  • imd+ -0.7 + imf+
  • imd+ -2.5 + imf+
  • imd+ -7 + imf+
  • ""; // on peut ajouter et supprimer des masks de vitesse dans les deux sens
  • Diapo360.innerHTML =(editer);
  • /*
  • Option de sélection et remplacement d'images
  • */
  • var selection = 0;
  • function versplus() {
  • TT()
  • // annonce la fin du diaporama
  • if (selection >=MX-1)
  • alert('Fin du diaporama pour afficher d\'autres images \n\rCliquer sur: [ <<= ]\r\nOu sélectionnez une image dans la liste.');
  • selection = document.forms[1].elements[0].selectedIndex;
  • if (selection < document.forms[1].elements[0].length-1) {selection ++;}
  • document.forms[1].elements[0].selectedIndex=selection;
  • }
  • function versmoins() {
  • // annonce le debut du diaporama
  • if (selection == 0)
  • alert('Debut du diaporama pour afficher d\'autre images \n\rCliquer sur: [ =>> ]\r\nOu sélectionnez une image dans la liste.');
  • selection = document.forms[1].elements[0].selectedIndex;
  • if (selection > 0) {selection --;}
  • document.forms[1].elements[0].selectedIndex=selection;
  • }
  • function ChoiX(selection) {
  • document.forms[1].elements[0].selectedIndex = selection;
  • }
  • // Affiche l'image sélectionnée sur la liste deroulante
  • function ApLiQuE() {
  • selection = document.forms[1].elements[0].selectedIndex;
  • document.Diapo360.style.backgroundImage = "url("+ imgUrl[selection] +")";
  • }
  • // Création des liens
  • function changeliens(FF,x)
  • {
  • if(document.getElementById)
  • document.getElementById(x).innerHTML = FF;
  • }
  • // Affichage des liens
  • function AFICHE()
  • {
  • changeliens('<a title="afficher la page d\'information" target=_blank href='+document.imageimportee.choix.value+'.htm><img style="MARGIN-TOP: 5px; MARGIN-BOTTOM: 1px; MARGIN-RIGHT: 1px; MARGIN-LEFT: 3px" border=0 src=outils/apage.gif width=16 height=16> Page','lien_page'); changeliens('<a title="afficher l\'image entière" target=_blank href='+document.imageimportee.choix.value+'><img style="MARGIN-TOP: 5px; MARGIN-BOTTOM: 1px; MARGIN-RIGHT: 1px; MARGIN-LEFT: 5px" border=0 src=outils/aimage.gif width=16 height=16> Image','lien_image');
  • }
  • CO='<span style="FONT-SIZE: 7pt"><a title="Pur Tout Contact Cliquez ICI" style="TEXT-DECORATION: none" href="http://siv.site.voila.fr/index.htm" target="_blank"><font color="#353535">Développé Le: 25/05/2007 Par Abdelaziz Rejeb - Elalia 7016 - Tunisie</font></a></span>';
  • // Tres important: si vous utilisez des images importés d'autres emplassements... vous devez créer un liens vers la page d'information en relation, si non suprimez le liens de la page.
  • // -->
<!--//
// personalisation de la fenêtre d'affichage du diaporama
function PL(){ 
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
}
function TT(){ 
// entrez vos parametres là ou c'est indiqué, et ne rien Changer d'autres pour garder le droit d'utilisation merci.
/* 
abdelaziz rejeb Elalia Tunisie 
http://abdelaziz.site.voila.fr 
pour tout contact: http://intersite.site.voila.fr 
Elalia - Tunisie le 25/05/2007
*/ 
MX=7 // Entrez le nombre Total d'images
}
image="photos/texte.gif"; // l'adresse complete de l'image à afficher au demarrage
/*
Donnez l'adresse complete de chaque image et tenez compte que vous avez la possibilité d'importer 
des images externes de toutes sortes dans les mêmes dimentions que le diaporama
*/
var imgUrl=new Array(); 
imgUrl[0]="photos/texte.gif"; 
imgUrl[1]="photos/stockholm.jpg"; 
imgUrl[2]="photos/etoile.gif"; 
imgUrl[3]="photos/images.gif"; 
imgUrl[4]="outils/background.jpg"; 
imgUrl[5]="photos/ciel.jpg"; 
imgUrl[6]="photos/soir.jpg"; 

/*
la liste d'images: entrez ici les noms ou les titres des images
*/

op = '<option value="'
fop = '</option>'

image1  = op+imgUrl[0]+'">Bienvenus'+fop;
image2  = op+imgUrl[1]+'">stockholm'+fop; 
image3  = op+imgUrl[2]+'">Des étoiles'+fop;
image4  = op+imgUrl[3]+'">Des images'+fop;
image5  = op+imgUrl[4]+'">Background mobil'+fop;
image6  = op+imgUrl[5]+'">Ciel sur mer'+fop;
image7  = op+imgUrl[6]+'">Beauté du soir'+fop; // Ajouter des option, si vous voulez 

L = image1+image2+image3+image4+image5+image6+image7 // entrez ici les nouvelles images dans l'ordre


/*
création du diaporama
*/

Limg=502 ; // Largeur de l'image
Himg=250 ; // Hauteur de l'image
/*
creation de la commande de vitesse
*/
Mask="outils/gif1.gif"; // adresse comlete de l'image mask
Lmsk=60 ; // Largeur de l'image mask
Hmsk=250 ; // Hauteur de l'image mask
Lmskstop=12 ; // Largeur de la commande Stop
bordure=1 ; // si vous ne voulez pas de bordure alors mettez 0
couleur="#003366" ; // entrez la couleur de la bordure
document.write('<style type="text/css" media="screen">');
document.write('#Diapo360{width: '+ Limg + 'px; height: '+ Himg +'px; background-color:#000000;}'+'IMG {cursor: pointer;};');
document.write('</style>');
var Diapo360 = document.getElementById("Diapo360");
Diapo360.style.border      = "solid "+bordure+"px "+couleur;
Diapo360.style.background  = "url("+image+")  repeat";
X = 1;   // glissement à un coté
Y = -1;  // glissement inversé
D = 10;  // vitesse de rotation
/*
image mask pour variation de vitesse
*/
imd= '<img onmouseover=\'Y = ';
imf= '\' border=0 src=outils/gif1.gif width='+Lmsk+' height='+Hmsk+'>';
/*
la largeure de l'image mask pour le stop
*/
imfs= '\' border=0 src='+Mask+' width='+Lmskstop+' height='+Hmsk+'>';
setInterval('Deroulement()', 90); // 90 = Duré du pause
function Deroulement()
{
X += Y / D*100 ;
document.getElementById("Diapo360").style.backgroundPosition = X + "px";
}
/*
creation et affichage des images maske pour commonder la vitesse 
Pour augmenter ou deminuer la vitesse à droite et à gauche Vous pouvez modifier les valeurs dans les lignes suivantes
pour faire tourner avec ou contre le mouvement du curseur il suffit de changer les valeurs positive contre les valeurs negatives au lignes suivantes.
*/
var editer  = ""+
imd+ 7 + imf+
imd+ 2.5 + imf+
imd+ 0.7 + imf+
imd+ 0.3 + imf+
imd+ 0 + imfs+ // la commonde du stop
imd+ -0.3 + imf+
imd+ -0.7 + imf+
imd+ -2.5 + imf+
imd+ -7 + imf+
""; // on peut ajouter et supprimer des masks de vitesse dans les deux sens
Diapo360.innerHTML =(editer);
/*
Option de sélection et remplacement d'images
*/ 
var selection = 0;
function versplus() {
TT()
// annonce la fin du diaporama
if (selection >=MX-1)
alert('Fin du diaporama pour afficher d\'autres images \n\rCliquer sur: [ <<= ]\r\nOu sélectionnez une image dans la liste.');
selection = document.forms[1].elements[0].selectedIndex;
if (selection < document.forms[1].elements[0].length-1) {selection ++;} 
document.forms[1].elements[0].selectedIndex=selection;
}
function versmoins() {
// annonce le debut du diaporama
if (selection == 0)
alert('Debut du diaporama pour afficher d\'autre images \n\rCliquer sur: [ =>> ]\r\nOu sélectionnez une image dans la liste.');
selection = document.forms[1].elements[0].selectedIndex;
if (selection > 0) {selection --;} 
document.forms[1].elements[0].selectedIndex=selection;
}
function ChoiX(selection) {
document.forms[1].elements[0].selectedIndex = selection;
}
// Affiche l'image sélectionnée sur la liste deroulante
function ApLiQuE() {
selection = document.forms[1].elements[0].selectedIndex;
document.Diapo360.style.backgroundImage = "url("+ imgUrl[selection] +")";
}
// Création des liens
function changeliens(FF,x)
{
if(document.getElementById)
document.getElementById(x).innerHTML = FF;
}
// Affichage des liens
function AFICHE()
{
changeliens('<a title="afficher la page d\'information" target=_blank href='+document.imageimportee.choix.value+'.htm><img style="MARGIN-TOP: 5px; MARGIN-BOTTOM: 1px; MARGIN-RIGHT: 1px; MARGIN-LEFT: 3px" border=0 src=outils/apage.gif width=16 height=16> Page','lien_page'); changeliens('<a title="afficher l\'image entière" target=_blank href='+document.imageimportee.choix.value+'><img style="MARGIN-TOP: 5px; MARGIN-BOTTOM: 1px; MARGIN-RIGHT: 1px; MARGIN-LEFT: 5px" border=0 src=outils/aimage.gif width=16 height=16> Image','lien_image');
}
CO='<span style="FONT-SIZE: 7pt"><a title="Pur Tout Contact Cliquez ICI" style="TEXT-DECORATION: none" href="http://siv.site.voila.fr/index.htm" target="_blank"><font color="#353535">Développé Le: 25/05/2007 Par Abdelaziz Rejeb - Elalia 7016 - Tunisie</font></a></span>';
// Tres important: si vous utilisez des images importés d'autres emplassements... vous devez créer un liens vers la page d'information en relation, si non suprimez le liens de la page.
// -->

 Conclusion

Le style et le code html c'est à vous de s'en occuper,
Pour obtenir de l'aide et avoir plus d'information vous pouvez toujours me contacter sur cette adresse : http://siv.site.voila.fr

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

12 juin 2008 06:40:57 :
rien
12 juin 2008 06:48:42 :
!
16 avril 2009 12:34:22 :
!

 Sources du même auteur

Source avec Zip Source avec une capture INSTALLEZ UN CURSEUR GÉANT, SUPER GÉANT CURSEUR DE LA SOURIS...
Source avec Zip Source avec une capture DEFILEMENT OU SCROLL HORIZONTAL AUTREMENT FAIT AUTOMATIQUE E...
Source avec Zip Source avec une capture DIV TOTALEMENT AUTOMATIQUE VERTICAL AVEC PLEIN DE COMMANDES...
Source avec Zip Source avec une capture AUTO MANUEL PARAGRAPHES, DIAPO PARAGRAPHES OU AUSSI PROJECTE...
Source avec Zip CONFORTABLE AUTO DÉFILEMENT OU (SCROLL BAR) TOUT AUTOMATIQUE...

 Sources de la même categorie

Source avec Zip Source avec une capture STOCK/FOREX CANDLE CHART USING CANVAS API par BlackWizzard
MODIFIER SES FEUILLES DE STYLES .CSS À LA VOLÉE AVEC JAVASCR... par Phildepantin
Source avec Zip Source avec une capture FARMVILLE - HEURE ET COMBO LIST IMAGES par ym_trainz
Source avec Zip [-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47
Source avec Zip Source avec une capture OGG MEDIA PLAYER par kazma

 Sources en rapport avec celle ci

Source avec Zip [-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47
Source avec Zip Source avec une capture [DSI] DÉPLACEMENTS SUR IMAGES par Bul3
Source avec Zip Source avec une capture FENETRE D'ACTUALITE par kazma
Source avec Zip DIAPORAMA 360° V2 MOUVEMENT DANS LES QUATRE SENS ROTATION VA... par abdelaziz_info
Source avec Zip IMAGES EN FUITE par abdelaziz_info

Commentaires et avis

Commentaire de XtremDuke le 12/06/2008 09:37:50

C'est "kitch" mais ça fonctionne.

Par contre, deux petit points :

- Il est préférable d'accéder aux éléments Html par les méthode décrites dans le DOM niv. 2 ("document.getElement...").
- Il faut éviter les innerHTML et créer les éléments à partir du DOM ("docment.createElement...").

Commentaire de abdelaziz_info le 12/06/2008 12:42:36

Bonjour : XTREMDUKE

Merci pour tes conseils qui peuvent toujours être utiles pour moi comme pour d'autres.

Une remarque pour tous : il faut placer le formulaire au bon endroit ou lui donner le numéro d'ordre correct.

Commentaire de Kimjoa le 12/06/2008 15:24:43

salut, très jolie source,le code reste a amélioré , mais ca marche bien et pour le niveau ca mérite une bonne note.
Je compte faire un script comme le tiens, avec en plus gestion du mousedouwn pour  "scroller" le contenue, avec du HTML au lien de photo , en plus générique et en objet !!j'aI du taff, mais ton script vas m'allégé la tache  )))
a+

Commentaire de Kimjoa le 12/06/2008 15:25:21 9/10

j'ai zapé la note ca sera un 9!!

Commentaire de abdelaziz_info le 12/06/2008 21:40:10

Merci Kimjoa
Bonne chance et bon courage.

Commentaire de GREGGRAPH le 16/06/2008 02:24:22 9/10

super source, le scroll up and down serait certainement un ajout interessant !

Commentaire de proftnj le 16/06/2008 12:51:35

Superbe! Joli et efficace. Bravo !

Commentaire de proftnj le 16/06/2008 12:56:14 10/10

J'avais oublié de mettre une évaluation, maintenant, c'est fait. Il serait bien d'apporter les quelques modifications proposées plus haut par XtremDuke.

Commentaire de abdelaziz_info le 02/09/2008 07:05:16

Bonjour :
Pour s'eux qui sont intéressés, je viens de poster la version 2 du diaporama 360°plus complète avec plus d'options et plus de simplicité et lecture automatique, voir ici : http://www.javascriptfr.com/codes/DIAPORAMA-360-V2-MOUVEMENT-DANS-QUATRE-SENS-ROTATION_47848.aspx

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Diaporama à partir d'un dossier [ par SCWeb ] Bonjour,Je cherche d&#233;sesp&#233;r&#233;ment un javascript qui permettrait tout simplement d'afficher un diaporama &#224; partir d'un dossier sans diaporama aleatoire sur une page web [ par photographe62 ] Bonjour a tout le monde, j'en appelle a votre aide pour resoudre un petit probleme qui je suis persuadé ne vous fera pas peur, mais par contre pour mo diaporama automatique avec liens sur chaque image [ par ju1385 ] Bonjour, j'ai ici un script simple de diaporama d'image que j'ai récupéré et qui marche bien. Cependant, je voudrais y modifier/ajouter 2 choses (je n défi en javascript [ par eucalion ] Bonjour à tous, Voici un défi de programmation, sans doute java script, pour qui voudra bien le tenter : Sur la page d'accueil de présent défi en javascript [ par eucalion ] Bonjour à tous, Voici un défi de programmation, sans doute java script, pour qui voudra bien le tenter : Sur la page d'accueil de présent Problème sur un diaporama : images décalées [ par niscemie ] Bonjour, Je suis graphiste et je suis amenée à intégrer un petit diaporama sur une page. J'ai donc trouvé un script simple qui me permettait d'affiche Centrer des images de tailles différentes dans un diaporama fondu enchainé [ par pseudodejautilis ] Bonjour, j'ai un petit souci avec un diaporama avec fondu enchainé des images, il marche très bien mais je n'arrive pas à le centrer : c'est le côté h Diaporama [ par daddou1707 ] est ce possible de créer un diaporama qui affiche un ensemble des images situer dans un dossiers. j'ai pu faire un diaporama qui s'affiche dans un pag une diaporama des images avec l’audio avec javascript [ par a_moukriss ] bonjour j'espere quie je suis dans le bon endroi pour poster ma question ! je veux realiser une diaporama (avec javascript)des images avec l'audio q Préchargement images [ par jmtoulon ] Bonjour,je suis en train de créer un site de jeu de carte.Je fais une function qui pré charges les images de toutes les cartes de jeu (52)je voudrais


Nos sponsors


Sondage...

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,154 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales