|
Pages: 1
|
Membre
|
Bonjour.
Je poste ce message dans (X)html/CSS/Javascript, car mon problème est plus le js que le PHP.
Je voudrais faire une galerie d'images pour afficher les screenshots de mes logiciels et scripts.
Les images et leurs descriptions seraient placées dans un tableau associatif en PHP qui sera transmit de la page de présentation du logiciel, qui contient les correspondances des variables, à la page des templates.
L'utilisateur devra pouvoir activer/désactiver le déroulement automatique, et changer d'image grace aux boutons précédent/suivant, et au numéros des images situés au dessus de l'image.
Les numéros des images seront placés dans des div blanc avec le texte style="font:16px serif;color:#dcb;".
Si le défilement automatique est activé, les images doivent changer toutes les 5 secondes.
Pour la mise en page, j'ai fais ça :
<table border="1" bgcolor="#eed" width="400" height="400">
<tr height="40">
<td align="center" colspan="3">
Numéros des images
</td>
</tr>
<tr>
<td align="center" valign="middle" colspan="3">
<div style="background:#ffffff">
Image
</div>
</td>
</tr>
<tr height="50">
<td align="center" colspan="3" style="font:italic 36px serif;color:#dcb;">
Titre de l'image
</td>
</tr>
<tr height="30">
<td align="left">
<img src="http://free-apps.evoconcept.net/images/arrow-l.png">
</td>
<td align="center">
Si le défilement automatique est activé, image pause, sinon, image play
</td>
<td align="right">
<img src="http://free-apps.evoconcept.net/images/arrow-r.png">
</td>
</tr>
</table>
Merci de m'aider, je débute en javascript (et mon projet est un peu trop ambitieux).
Bon courage.
|
Admin
|
Bonjour,
Voici tout le code fonctionnel sans aucun problème  :
<table border="1" bgcolor="#eed" width="400" height="400">
<tr height="40">
<td align="center" colspan="3" id="liens_images" style="color:#ffffff;">
</td>
</tr>
<tr>
<td align="center" valign="middle" colspan="3">
<div style="background:#ffffff">
<img src="" id="image_galerie" />
</div>
</td>
</tr>
<tr height="50">
<td align="center" colspan="3" style="font:italic 36px serif;color:#dcb;" id="description_img_galerie">
</td>
</tr>
<tr height="30">
<td align="left">
<img src="http://free-apps.evoconcept.net/images/arrow-l.png" style="cursor:pointer;" onclick="javascript:previous_img();">
</td>
<td align="center">
<img src="http://free-apps.evoconcept.net/images/pause.png" style="cursor:pointer;" onclick="javascript:play_pause();" id="playpause" alt="Play/Pause" />
</td>
<td align="right">
<img src="http://free-apps.evoconcept.net/images/arrow-r.png" style="cursor:pointer;" onclick="javascript:next_img();">
</td>
</tr>
</table>
<script type="text/javascript">
var img_act = 1;
var isplay = false;
var timer = false;
var liste_images = new Array();
<?php
/*Pour transformer le tableau php en javascript*/
//$imgs contiens la description et les url des images
$imgs = array(
array('http://free-apps.evoconcept.net/images/arrow-l.png', 'Image 1'),
array('http://free-apps.evoconcept.net/images/pause.png', 'Image 2'),
array('http://free-apps.evoconcept.net/images/play.png', 'Image 3'),
array('http://free-apps.evoconcept.net/images/arrow-r.png', 'Image 4')
);
$i=0;
foreach($imgs as $ifs)
{
$i++;
echo 'liste_images['.$i.'] = new Array("'.$ifs[0].'", "'.$ifs[1].'");';
}
?>
var num_imgs = liste_images.length-1;
for(i=1;i<=num_imgs;i++)
{
document.getElementById('liens_images').innerHTML += '<span onclick="javascript:jumpto('+i+');" style="cursor:pointer;">'+i+'</span> ';
}
function jumpto(img)
{
document.getElementById('image_galerie').src = liste_images[img][0];
document.getElementById('description_img_galerie').innerHTML = liste_images[img][1];
img_act = img;
}
function next_img()
{
if(img_act==num_imgs)
{
jumpto(1);
}
else
{
jumpto(img_act+1);
}
}
function previous_img()
{
if(img_act==1)
{
jumpto(num_imgs);
}
else
{
jumpto(img_act-1);
}
}
function play_pause()
{
if(isplay)
{
timer = window.clearInterval(timer);
isplay = false;
document.getElementById('playpause').src="http://free-apps.evoconcept.net/images/play.png";
}
else
{
timer = window.setInterval(next_img, 5000);
isplay = true;
document.getElementById('playpause').src="http://free-apps.evoconcept.net/images/pause.png";
}
}
jumpto(1);
play_pause();
</script>
Cordialement
 |
Membre
|
Merci beaucoup.
Pour mettre des bordures aux liens du haut, comment dois-je faire ? Pour que ça fasse comme sur cette page : http://www.alsacreations.com/xmedia/tuto/exemples/galerie_photo_js/
Ddans leur tuto, c'est des images, et non pas du texte, donc leur CSS ne m'est d'aucune aide...
Résolu
for(i=1;i<=num_imgs;i++){document.getElementById('liens_images').innerHTML+='<font size="1"> <span onclick="javascript:jumpto('+i+');" style="font:bold 20px serif;color:#dcb;border:solid 2px;border-color:#dcb;padding:4px;cursor:pointer;"> '+i+' </span> </font>';}
Et la taille de l'image pourrait-elle s'ajuster afin de prendre la plus grande valeur possible sans déformer le site et la galerie ? Mes images sont en 32x32px, donc width="95%" fonctionne, mais avec des images pas carrées, serait-il possible de les réduire si elles sont trop grande ou de les agrandir si elles sont trop petite pour qu'elle fassent juste la taille qu'il faut en largeur ?
J'ai réussi, mais finalement, ce n'est pas pratique. Si ça intéresse quelqu'un, voici le code à utiliser :
function jumpto(img)
{document.getElementById('image_galerie').src=liste_images[img][0];
if(liste_images[img][0].width<liste_images[img][0].height){document.getElementById('image_galerie').height='100';}
else{document.getElementById('image_galerie').style.width='100%';}
document.getElementById('description_img_galerie').innerHTML = liste_images[img][1];
img_act = img;}
J'ai préféré préciser les dimensions dans le tableau. Si je donne des dimensions, elles sont changées, sinon, les dimensions d'origine de l'image sont conservées.
Donc Résolu
Et comment mettre un valign="middle" ou un style="vertical-align:middle;" sur l'image ? J'ai essayé, mais ça n'a pas marché.
Résolu
<tr>
<td align="center" valign="middle" colspan="3" bgcolor="#ffffff"><img style="vertical-align:middle;" alt="" src="" id="image_galerie"></td>
</tr>
Et si le nombre d'images est supérieur à 9, pourrais-ton mettre une scrollbarre sous les nombres ?
Non résolu
Zoom sur l'image dans une sorte de pop-up quand on clic dessus, dans ce style là : http://pix.toile-libre.org/?img=1275746382.png
Non résolu
Mise en valeur du bouton de l'image actuellement affichée, en changeant le style du bouton (assombrissement du bgcolor et du color des span).
Non résolu
Mon code actuel :
<table border="0" width="400px" height="400px" bgcolor="#eed">
<tr height="40">
<td align="center" colspan="3" id="liens_images"></td>
</tr>
<tr>
<td align="center" valign="middle" colspan="3" bgcolor="#ffffff"><img style="vertical-align:middle;" alt="" src="" id="image_galerie"></td>
</tr>
<tr height="50">
<td align="center" colspan="3" style="font:italic 36px serif;color:#dcb;border:1px;" id="description_img_galerie"></td>
</tr>
<tr height="30">
<td align="center"><img src="/images/arrow-l.png" style="cursor:pointer;" onclick="javascript:previous_img();"></td>
<td align="center"><img src="/images/pause.png" style="cursor:pointer;" onclick="javascript:play_pause();" id="playpause" alt="Play/Pause"></td>
<td align="center"><img src="/images/arrow-r.png" style="cursor:pointer;" onclick="javascript:next_img();"></td>
</tr>
</table>
<script type="text/javascript">
img_act=1;isplay=false;timer=false;liste_images=new Array();
<? $imgs=array(
array('/images/arrow-l.png','Image 1',100,100),
array('/images/pause.png','Image 2','100','100'),
array('/images/play.png','Image 3','100','100'),
array('/images/arrow-r.png','Image 4','100','100'),
);
$i=0;foreach($imgs as $ifs){$i++;echo'liste_images['.$i.']=new Array("'.$ifs[0].'","'.$ifs[1].'","'.$ifs[2].'","'.$ifs[3].'");';} ?>
num_imgs=liste_images.length-1;
for(i=1;i<=num_imgs;i++){document.getElementById('liens_images').innerHTML+='<font size="1"> <span onclick="javascript:jumpto('+i+');" style="font:bold 20px serif;color:#dcb;border:solid 2px #dcb;padding:4px;cursor:pointer;"> '+i+' </span> </font>';}
function jumpto(img)
{document.getElementById('image_galerie').src=liste_images[img][0];
document.getElementById('image_galerie').style.width=liste_images[img][2];
document.getElementById('image_galerie').style.height=liste_images[img][3];
document.getElementById('description_img_galerie').innerHTML='<div style="border:solid 1px #dcb;width:98%;">'+liste_images[img][1]+'</div>';
img_act=img;}
function next_img()
{if(img_act==num_imgs){jumpto(1);}
else{jumpto(img_act+1);}}
function previous_img()
{if(img_act==1) {jumpto(num_imgs);}
else {jumpto(img_act-1);}}
function play_pause()
{if(isplay)
{timer=window.clearInterval(timer);isplay=false;
document.getElementById('playpause').src="/images/play.png";}
else
{timer=window.setInterval(next_img,2500);isplay=true;
document.getElementById('playpause').src="/images/pause.png";}}
jumpto(1);
play_pause();
</script>
Merci.
|
Admin
|
Bonjour,
Essaye ce code:
<table border="0" width="400px" height="400px" bgcolor="#eed">
<tr height="40">
<td align="center" colspan="3"><div style="overflow-x:auto;padding-top:5px;width:400px;display:block;padding-bottom:8px;"><div id="liens_images"></div></div></td>
</tr>
<tr>
<td align="center" valign="middle" colspan="3" bgcolor="#ffffff"><img style="vertical-align:middle;cursor:pointer;" alt="" src="" id="image_galerie" onclick="javascript:window.open(this.src, 'apercu_image');"></td>
</tr>
<tr height="50">
<td align="center" colspan="3" style="font:italic 36px serif;color:#dcb;border:1px;" id="description_img_galerie"></td>
</tr>
<tr height="30">
<td align="center"><img src="/images/arrow-l.png" style="cursor:pointer;" onclick="javascript:previous_img();"></td>
<td align="center"><img src="/images/pause.png" style="cursor:pointer;" onclick="javascript:play_pause();" id="playpause" alt="Play/Pause"></td>
<td align="center"><img src="/images/arrow-r.png" style="cursor:pointer;" onclick="javascript:next_img();"></td>
</tr>
</table>
<script type="text/javascript">
img_act=1;isplay=false;timer=false;liste_images=new Array();
<? $imgs=array(
array('/images/arrow-l.png','Image 1',100,100),
array('/images/pause.png','Image 2','100','100'),
array('/images/play.png','Image 3','100','100'),
array('/images/arrow-r.png','Image 4','100','100'),
);
$i=0;foreach($imgs as $ifs){$i++;echo'liste_images['.$i.']=new Array("'.$ifs[0].'","'.$ifs[1].'","'.$ifs[2].'","'.$ifs[3].'");';} ?>
num_imgs=liste_images.length-1;
for(i=1;i<=num_imgs;i++){document.getElementById('liens_images').innerHTML+='<font size="1"> <span onclick="javascript:jumpto('+i+');" style="font:bold 20px serif;color:#dcb;border:solid 2px #dcb;padding:4px;cursor:pointer;" id="lien_img_'+i+'"> '+i+' </span> </font>';}
document.getElementById('liens_images').style.width=num_imgs*48+'px';
function jumpto(img)
{
document.getElementById('lien_img_'+img_act).style.color='#dcb';
document.getElementById('lien_img_'+img_act).style.background='#000000';
document.getElementById('lien_img_'+img).style.color='#000000';
document.getElementById('lien_img_'+img).style.background='#ffffff';
document.getElementById('image_galerie').src=liste_images[img][0];
document.getElementById('image_galerie').style.width=liste_images[img][2];
document.getElementById('image_galerie').style.height=liste_images[img][3];
document.getElementById('description_img_galerie').innerHTML='<div style="border:solid 1px #dcb;width:98%;">'+liste_images[img][1]+'</div>';
img_act=img;}
function next_img()
{if(img_act==num_imgs){jumpto(1);}
else{jumpto(img_act+1);}}
function previous_img()
{if(img_act==1) {jumpto(num_imgs);}
else {jumpto(img_act-1);}}
function play_pause()
{if(isplay)
{timer=window.clearInterval(timer);isplay=false;
document.getElementById('playpause').src="/images/play.png";}
else
{timer=window.setInterval(next_img,2500);isplay=true;
document.getElementById('playpause').src="/images/pause.png";}}
jumpto(1);
play_pause();
</script>
Cordialement
|
Membre
|
Merci, ça fonctionne.
Mais on ne pourrais pas faire un effet comme sur pix.toile-libre.org ? (Si ça devient trop compliquer, on garde le simple lien).
Et si le nombre d'image devient trop grand (<9, par ex), y aura-t-il une scrollbarre et/ou des boutons de défilement pour les id="liens_images" ? Et est-il possible de lui donner un thème ou ce sera obligatoirement le thème du navigateur ou du système ?
Je voudrais que ça fasse comme ça :
Et j'ai mis la galerie dans les présentations des mes logiciels (pour l'instant il n'y en a qu'un).
La page d'index contient les variables et appelle le template fiche.php, qui affiche la descriptions, les liens, etc, et qui appelle les templates du head, du haut de la page, et du bas de la page, ainsi que la galerie. Mais le template de la galerie n'est pas valide HTML 4.01 Tr (span fermé qui n'est pas ouvert, script non fermé, div fermé mais non ouvert... alors qu'ils le sont).
Lien de ma page : http://free-apps.evoconcept.net/logiciels/antares/index.php
Lien de la page de validation : http://validator.w3.org/check?uri=http://free-apps.evoconcept.net/logiciels/antares/;accept=application/xml,application/xhtml%2Bxml,text/html;q%3D0.9,text/plain;q%3D0.8,image/png,*/*;q%3D0.5;accept-language=fr-FR,fr;q%3D0.8,en-US;q%3D0.6,en;q%3D0.4;accept-charset=ISO-8859-1,utf-8;q%3D0.7,*;q%3D0.3
Code du template :
<table bgcolor="#eed" style="width:400px;height:400px;border:2px solid #dcb;border-radius:5px;">
<tr>
<td align="center" colspan="3"><div style="overflow-x:auto;padding-top:5px;width:400px;display:block;padding-bottom:8px;"><div id="liens_images"></div></div></td>
</tr>
<tr style="height:300px;">
<td align="center" valign="middle" colspan="3" bgcolor="#ffffff" style="border:2px solid #dcb;"><img style="vertical-align:middle;cursor:pointer;" alt="" src="" id="image_galerie" onclick="javascript:window.open(this.src, 'apercu_image');"></td>
</tr>
<tr>
<td align="center" colspan="3" style="font:italic 24px serif;color:#dcb;border:1px;" id="description_img_galerie"></td>
</tr>
<tr>
<td align="center"><img src="/images/arrow-l.png" alt="Image précédente" style="cursor:pointer;" onclick="javascript:previous_img();"></td>
<td align="center"><img src="" style="cursor:pointer;" onclick="javascript:play_pause();" id="playpause" alt=""></td>
<td align="center"><img src="/images/arrow-r.png" alt="Image suivante" style="cursor:pointer;" onclick="javascript:next_img();"></td>
</tr>
</table>
<script type="text/javascript">
img_act=1;isplay=false;timer=false;liste_images=new Array();
<? $i=0;foreach($imgs as $ifs){$i++;echo'liste_images['.$i.']=new Array("'.$ifs[0].'","'.$ifs[1].'","'.$ifs[2].'","'.$ifs[3].'");';} ?>
num_imgs=liste_images.length-1;
for(i=1;i<=num_imgs;i++){document.getElementById('liens_images').innerHTML+='<font size="1"> <span onclick="javascript:jumpto('+i+');" style="font:bold 20px serif;color:#dcb;border:solid 2px #dcb;padding:4px;cursor:pointer;" id="lien_img_'+i+'"> '+i+' </span> </font>';}
document.getElementById('liens_images').style.width=num_imgs*48+'px';
function jumpto(img)
{document.getElementById('lien_img_'+img_act).style.color='#dcb';
document.getElementById('lien_img_'+img_act).style.background='#eed';
document.getElementById('lien_img_'+img_act).style.borderColor='#dcb';
document.getElementById('lien_img_'+img).style.color='#bb9b7b';
document.getElementById('lien_img_'+img).style.background='#dcb';
document.getElementById('lien_img_'+img).style.borderColor='#bb9b7b';
document.getElementById('image_galerie').src=liste_images[img][0];
document.getElementById('image_galerie').style.width=liste_images[img][2];
document.getElementById('image_galerie').style.height=liste_images[img][3];
document.getElementById('description_img_galerie').innerHTML='<div style="border:solid 1px #dcb;width:98%;">'+liste_images[img][1]+'</div>';
img_act=img;}
function next_img()
{if(img_act==num_imgs){jumpto(1);}
else{jumpto(img_act+1);}}
function previous_img()
{if(img_act==1) {jumpto(num_imgs);}
else {jumpto(img_act-1);}}
function play_pause()
{if(isplay)
{timer=window.clearInterval(timer);isplay=false;
document.getElementById('playpause').src="/images/play.png";
document.getElementById('playpause').alt="Démarrer le défilement automatique";}
else
{timer=window.setInterval(next_img,2000);isplay=true;
document.getElementById('playpause').src="/images/pause.png";
document.getElementById('playpause').alt="Arrêter le défilement automatique";}}
jumpto(1);
play_pause();
</script>
Merci.
PS : Il vous aura fallu combien de temps pour faire tout cela ? Les questions que j'ai résolu moi même (celle ou j'ai rayé puis affiché en vert "résolu" dans le message précédent), il m'a fallu tout l'après midi pour les résoudre.
|
Admin
|
Bonjour,
Pour l'effet zoom et la scrollbar, cherche sur internet, car ce ne sont que quelques fonctions mais qui prennent trop de temps à faire.
Pour la validation, tu doit mettre en commentaire ton code javascript:
<script type="text/javascript"><!-- Code javascript --></script>
Et pour le temps, ça m'aurait peut-être pris 1 heure pour les problèmes que tu a résolu.
Cordialement
|
Membre
|
Merci, mais ça ne fonctionne pas. Même avec les commentaires, j'ai 5 erreurs.
Pour la scrollbarre, j'ai trouvé en HTML/CSS :
<tr>
<td align="center" colspan="3" nowrap="nowrap"><div id="liens_images" style="padding-top:15px;padding-bottom:15px;overflow-x:auto;overflow-y:hidden;"></div></td>
</tr>
Pour l'instant, je vais garder le HTML/CSS. J'ai pas le niveau en javascript pour créer ma propre classe de scrollbar, et on ne peux malheureusement pas changer le style des scrollbarres à part sous IE, et ça reste invalide W3C.
D'ailleurs, j'ai testé la galerie sous IE (6, je crois) en profitant que mon père ne soit pas sur son XP, et j'ai adoré comment Trident (ou IE, je sais pas si c'est le moteur de rendu ou le navigateur qui est en cause) a interprété le design : arr. plan : noir, liens des images : noir, angles arrondis : 90°, et les <div style="position:fixed..." ne sont pas fixés ! Il affiche la page comme Links2, le navigateur ultra-leger qui ne connait pas le CSS (mais Links2 a pour aventage sa vitesse et sa légereté, alors que IE n'a ni l'un, ni l'autre).
Le style de la galerie s'affiche aussi mal avec Opéra, donc Presto, 10.x bêta Linux. Sauf que lui est sensé respecter les standards, bien qu'il ne soit pas capable d'afficher correctement mon favicon (c'est un png, mais quand même !). Au moins, il reconnait mes <div style="position:fixed..., c'est déjà ça.
Quand à Firefox, à part qu'il ne comprend toujours pas le CSS3 et les border-radius, ça va.
|
Admin
|
Bonjour,
pour valider, il te suffit faire par exemple:
//Remplacer :
document.write('<span class="classe">Mon texte</span>');
//Par
document.write('<span class="classe">Mon texte<'+'span>');
Dans tout ton code javascript.
Et pour les problèmes de compatibilité avec opera et IE, c'est normal, parce que l'attribut bgcolor n'est plus supposé être utilisé depuis très longtemps:
<table style="background:#eed;width:400px;height:400px;border:2px solid #dcb;border-radius:5px;">
Cordialement
|
Membre
|
Cela fonctionne parfaitement.
Merci.
|
|
Pages: 1
|
