|
[ Forums >> JavaScript >> Problèmes de création JavaScript / DHTML >> Adapter ce script à mes besoins, aide-svp ]
| > Adapter ce script à mes besoins, aide-svp |
[ Posté par Conceptinterweb ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 08-02-2010 à 20:00 | 7 messages ]
Bonjour,
J'ai un script qui charge des images dans un ARRAY, ensuite en dessous de mes images, j'ai 2 boutons, avec chacun une fléche pointant à gauche, et l'autre pointant à droite, permettant de naviguer à travers les photos, quand la dernière est atteinte, la première affiche, et vice-versa si l'on va dans l'autre sens.
J'aimerais que chaque image soit cliquable afin qu'elle s'agrandisse dans une nouvelle selon un format établi.
Voici le script qui gère mes images
<script type="text/javascript">
arrPhoto1 = new Array();
picNum1 = 0;
<?php for ($i = 0; $i < count($arrPhoto1); $i++) echo("arrPhoto1[" . $i . "] = '" . $arrPhoto1[$i] . "';\n");?>
function gotoPhoto1(num) {
var img = document.getElementById('myPhoto1');
picNum1 = picNum1 + num;
if (picNum1 < 0) picNum1 = arrPhoto1.length - 1;
if (picNum1 >= arrPhoto1.length) picNum1 = 0;
img.src = 'images/' + arrPhoto1[picNum1];
}
</script>
|
|
Et la partie de mon code qui appele le script :
<?php if (count($arrPhoto1) > 0) { ?>
<img border="0" id="myPhoto1" width="200" height="250">
<script type="text/javascript">
gotoPhoto1(0);
</script>
<?php if (count($arrPhoto1) > 1) { ?>
<div align="center" style="font-size: 14px; font-weight: bold;">
<input type="button" value="<--" onClick="gotoPhoto1(-1);">
<input type="button" value="-->" onClick="gotoPhoto1(1);">
</div>
<? } ?>
<?php } ?>
|
|
D'après moi le travail doit se faire au niveau de la balise img, j'ai essayé plusieurs choses, mais sans résultat.
Merci de votre aide.
________________
Sylvain
|
[ Posté par jparia ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 10-02-2010 à 22:20 | 675 messages ]
Bonjour,
il serait préférable de former une chaine sous PHP et de l'appliquer directement au tableau js:
$Images = "'" . $Image1 . "','" . $Image2 . "'";
|
|
comme cela sous js:
var tabImages = new Array(<?php echo($Images); ?>);
|
|
ce qui donne dans le source de la page:
var tabImages = new Array('image1.jpg', 'image2.jpg');
|
|
ensuite il te suffit de parcourir le tableau selon la fonction Suivante() ou Precedente():
var image_en_cours = 0;
function Suivante()
{
image_en_cours ++;
if ( image_en_cours == tabImages.length )
{
image_en_cours = 0;
}
document.getElementById('myPhoto1').src = 'images/' + tabImages[image_en_cours];
}
function Precedente()
{
image_en_cours --;
if ( image_en_cours < 0 )
{
image_en_cours = tabImages.length;
}
document.getElementById('myPhoto1').src = 'images/' + tabImages[image_en_cours];
}
|
|
Pour les dimensions X et Y tu peux créer deux autres tableaux pour les mémoriser:
var tabSiseX = new Array('480', '600'):
var tabSiseY = new Array('640', '800'):
|
|
<img id='myPhoto1' onclick='AffPhoto(this.src)' width='200' height='250' />
|
|
function AffPhoto(img)
{
var params = "width=" + tabSiseX[image_en_cours] + ", height=" + tabSiseY[image_en_cours];
window.open(img, 'photo', params);
}
|
|
[Message édité par jparia le 10-02-2010 à 22:42]
________________
bibliothèque javascript jaria: http://jaria.free.fr
|
|
Services email :
Vous devez vous identifier pour profiter des services par email du forum.
|
|
]
