Images - Codes sources

Vignettes

Afficher un mini zoom

Voici les informations pour afficher une petite image qui suit la souris quand on passe cette dernière sur une zone.


Code JAVASCRIPT : (dmc_utils.zip, dmcplugVignette.js)
Exemple de code :
<script src="dmc_utils.js" type="text/javascript"> </script>
<script src="dmcplugVignette.js" type="text/javascript"> </script>

Code HTML :
Le plugin "plugDmcVignette" se lance automatiquement.
Pour spécifier que c'est une image avec zoom vous devez assigner à votre balise XHTML img une classe de nom "plugDmcVignette".
Pour spécifier l'url de l'image zoom rajoutez un paramètre à l'url de votre image de type "?zoom=monurlzoom"
Exemple de code :
<img img src="images/codesource/bruleur.jpg?zoom=images/codesource/bruleur_zoom.jpg" class="plugDmcVignette"/>

Code CSS :
par défaut le calque du zoom utilise la classe css "dmcVignette".
Exemple de code :
<style type="text/css">
.dmcVignette {
  position:absolute;
  left:0;
  top:0;
  width:10px;
  height:10px;
  z-index:1000;
  background-color:#000000;
  font-size:1px;
}
</style>
Vous pouvez pour chaque image préciser une autre classe en ajoutant un paramètre au src de l'image :
Exemple de code :
<img img src="images/codesource/bruleur.jpg?zoom=images/codesource/bruleur_zoom.jpg&classe=nouvelleclasse" class="plugDmcVignette"/>

Diaporama d'image

Exemple

En cours de test
Le pluging "dmcDiaporama" permet de faire défiler plusieurs images à la suite avec un petite légende en dessous ou au dessus. Lorque vous passez la souris sur l'image le diaporama se stoppe et repart quand la souris quitte l'image. L'image peut être cliquable ou pas.

Site Bd2games
Le code HTML :
Exemple de code :
<style type="text/css">
#conteneurplugDmcDiaporama, #conteneurplugDmcDiaporama2{
  border:1px solid #1977b4;
}
</style>

<script src="js/dmc_utils.js" type="text/javascript"> </script>
<script src="js/dmcplugDiaporama.js" type="text/javascript"> </script>
<a href="internet/" target="_self"><img src="images/creation/bd2games_tour.gif" id="plugDmcDiaporama" alt="Site Bd2games" border="0"/></a>

<script type="text/javascript">
var momo = dmcImgDiaporama.dmcImgDcreate({width:"156px", soustitre:true, postitre:"bottom", backgroundtitre:"#dddddd", minheightimg:"116px", aligntitre:"center", minheighttitre:"25px", id:"plugDmcDiaporama"});

momo.dmcImgDadd([{img:"images/creation/afpssu.gif", lien:"internet/", target:"_self", alt:"Site Afpssu"}]);

momo.dmcImgDadd([{img:"images/creation/delios.gif", lien:"internet/", target:"_self", alt:"Site Délios"}]);

momo.dmcImgDadd([{img:"images/creation/ccvalsaone.gif", lien:"internet/", target:"_self", alt:"Site CC val de saone"}]);
</script>

Exemple 2

Le pluging "dmcDiaporama" permet de faire défiler plusieurs images à la suite sans légende. Lorque vous passez la souris sur l'image le diaporama se stoppe et repart quand la souris quitte l'image. L'image peut être cliquable ou pas.




Code HTML :
Exemple de code :
<script type="text/javascript">
var dmcImgDiaporama1 = dmcImgDiaporama.dmcImgDcreate({beincorporate:true, bordercolor:"#ff0000", fond:"#000000", marginimg:"0px", width:"360px", soustitre:false, minheightimg:"60px", paddingcadre:"0px", id:"plugDmcDiaporama2"});

dmcImgDiaporama1.dmcImgDadd([{img:"images/script/image_1.gif", lien:"internet/", target:"_self"}]);
dmcImgDiaporama1.dmcImgDadd([{img:"images/script/image_2.gif", lien:"internet/", target:"_self"}]);
dmcImgDiaporama1.dmcImgDadd([{img:"images/script/image_3.gif", lien:"internet/", target:"_self"}]);
dmcImgDiaporama1.dmcImgDadd([{img:"images/script/image_4.gif", lien:"internet/", target:"_self"}]);
</script>

<div id="plugDmcDiaporama2"></div>

Exemple 3

Le pluging "dmcDiaporama" permet de faire défiler plusieurs images à la suite sans légende. Lorque vous passez la souris sur l'image le diaporama se stoppe et repart quand la souris quitte l'image. L'image peut être cliquable ou pas.




Code HTML :
Exemple de code :
<style type="text/css">
  #btretourc{float:left;}
  hr.cDiaporama{visibility:hidden;clear:both;}
  #cDiaporama{width:360px;}
  #btsuitec{float:right;}
</style>

<script type="text/javascript">
var dmcImgDiaporama3 = dmcImgDiaporama.dmcImgDcreate({aslien:false, auto:false, beincorporate:true, fond:"#000000", marginimg:"0px", width:"360px", soustitre:false, minheightimg:"60px", id:"plugDmcDiaporama3", btleft:"btretourc", btright:"btsuitec"});

dmcImgDiaporama3.dmcImgDadd([{img:"images/script/image_1.gif", lien:"internet/", target:"_self"}]);
dmcImgDiaporama3.dmcImgDadd([{img:"images/script/image_2.gif", lien:"internet/", target:"_self"}]);
dmcImgDiaporama3.dmcImgDadd([{img:"images/script/image_3.gif", lien:"internet/", target:"_self"}]);
dmcImgDiaporama3.dmcImgDadd([{img:"images/script/image_4.gif", lien:"internet/", target:"_self"}]);
</script>

<div id="cDiaporama"><div id="plugDmcDiaporama3"></div><img src="images/script/btretourc.gif" id="btretourc"><img src="images/script/btsuitec.gif" id="btsuitec"></div>

Paramètrage du Diaporama

Paramètres

Code JAVASCRIPT dans le header de votre page html : (dmc_utils.zip, dmcplugDiaporama.js)
Exemple de code :
<script src="dmc_utils.js" type="text/javascript"> </script>
<script src="dmcplugDiaporama.js" type="text/javascript"> </script>

La première étape consiste à déclarer un nouveau diaporama pour cela vous devez utiliser la méthode dmcNewsV.dmcNewsVaddNews().
Exemple de code :
var mondiaporama = dmcNewsV.dmcNewsVaddNews({});

Cette méthode accepte comme paramètre un objet {} qui va comporter toutes les informations globales concernant ce diaporama.

- id, valeur de type String qui correspond à la valeur de l'attribut id de l'image qui va défilée (exemple 1), ou si vous voulez une insertion (beincorporate:true) c'es la valeur de l'id de l'élément cible.
- beincorporate, valeur de type Boolean, mettre à true si vous voulez insérer le diaporama dans un élément (exemple 2,3), false par défaut.
- aslien, valeur de type Boolean, mettre à false si vous ne voulez pas que votre image ai un lien html, true valeur par défaut (exemple 3).
- auto, valeur de type Boolean, false qui spécifie que le diaporama ne défile pas automatiquement, true valeur par défaut (exemple 3).
- soustitre, valeur de type Boolean, false qui spécifie que le diaporama n'a pas de soustitre (exemple 2,3), true valeur par défaut (exemple 1).

Les propriétés relatives au soustitre :
- postitre, valeur de type String qui correspond à la position du soustitre, "bottom" sous l'image "top" valeur par défaut au dessus de l'image.
- aligntitre, valeur de type String qui spécifie alignement du titre dans son élément, valeurs possibles : center, justify, right, left valeur par défaut.
- couleurtitre, valeur de type String qui spécifie la couleur du soustitre (format #000000). #000000 valeur par défaut.
- backgroundtitre, valeur de type String qui spécifie la couleur d'arrière plan du soustitre (format #000000). #ffffff valeur par défaut.
- fonttitre, valeur de type String qui spécifie la police du soustitre(arial, times, ...) arial par défaut.
- tailletitre, valeur de type String qui spécifie la taille de la police du soustitre (mettre en px de préférence), "12px" par défaut.
- minheighttitre, valeur de type String qui spécifie une hauteur minimum de l'élément soustitre (mettre en px de préférence), "50px" par défaut.
- paddingtitre, valeur de type String qui spécifie le padding de lélément du soustitre (mettre en px de préférence), "2px" par défaut.

Les propriétés relatives au cadre :
- bordercolor, valeur de type String qui spécifie la couleur de la bordure de l'élément qui entoure le diaporama (format #000000), "#cccccc" par défaut.
- border, valeur de type String qui spécifie la taille de la bordure de l'élément qui entoure le diaporama (mettre en px de préférence), "0" par défaut.
- paddingcadre
- width

Les propriétés relatives à l'image :