Galerie Web, Javascript

Bonjour/Bonsoir a tous,

Voila, j'ai plusieurs galleries web a créer, pour un site web donc utilisant le même procédé.
Pour une gallerie, j'ai 13 images, dans un dossier nomé /album_photo/ avec dedans les images numérotés de 1.jpg a 13.jpg et un autre dossier /album_photo/min/ avec les miniatures de chaques photos elles aussi numérotés de 1.jpg a 13.jpg.
J'ai actuellement une page par photo de la galerie nomé de 1.php a 13.php, ces pages sont a la racine du site.
Je chercherai un script me permettant d'avoir tout sur une seule page en javascript, quand on clique sur un miniature ou sur un bouton 'suivant'/'précédent' de changer la photo et le titre de la page ou texte en dessous de la photo ...

Merci d'avance.

Message édité par MadeInHell le 21-04-2008 à 00:04:09

Répondre

Inscrivez-vous ou connectez-vous pour masquer ceci.

salut
tu peux utiliser une page avec 2 iframes: dans la première toutes les miniatures avec lien vers les pages des images correspondantes dans la seconde iframe.
donc en 3 fichiers cela donne:

fichier main.html:
<html>
<head>

</head>
<FRAMESET COLS="20%,80%">
<FRAME SRC="thumbs.html" NAME="thumbs">
<FRAME SRC="photos.php?p=1" NAME="photos">
</FRAMESET>
<body>
</body>
</html>

fichier thumbs.html:
<html>
<head>
<script type="text/javascript">
function go(){
var t = "";
for(i=1;i<14;i++){
t += "<p><a href=\"photos.php?p="+i+"\" target=\"photos\"><img src=\"album_photo/min/"+i+".jpg\"></a></p>";
}
document.getElementById('thumbs').innerHTML = t;
}
</script>
</head>
<body onload="go()">
<div id="thumbs"></div>
</body>
</html>

fichier photos.php:
<html>
<head>

</head>
<body>
<?php
if ($p != "1" ) {
$p --;
echo "<a title=\"photo précédente\" href=\"photos.php?p=$p\">précédente</a> ";
$p ++;
}
else {
echo "<a title=\"photo précédente\">précédente</a> ";
}

if ($p != "13" ) {
$p ++;
echo " <a title=\"photo suivante\" href=\"photos.php?p=$p\">suivante</a>";
$p --;
}
else {
echo " <a title=\"photo suivante\">suivante</a>";
}
?>
<img src="album_photo/<?php echo $p; ?>.jpg">
</body>
</html>

ces 3 fichiers sont à placer à la racine de ton site; toutes les pages individuelles que tu as créé tu peux les virer.
En espérant avoir correctement répondu à tes attentes,
sleepless2101

Message édité par sleepless2101 le 14-07-2008 à 14:23:17

Répondre à sleepless2101

Bon les gens , il faut savoir que les frames dégueulasses ( dans ton exemple se sont des frames et non des iframes qui sont elles-mêmes peu élégantes )sont à prohiber depuis quelques années et qu'il y a d'autres moyens tout aussi simple de réaliser ce genre de chose. Javascript -> Ajax , un petit div.innerHtml et c'est bouclé.

------------------------------
La théorie, c'est quand on sait tout et que rien ne fonctionne. La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Ici, nous avons réuni théorie et pratique : Rien ne fonctionne et personne ne sais pourquoi...
Répondre à RiiMii

re..
merci de tes agréables conseils.. que tu aurais pu un peu développer. je ne connaissais pas ajax, et j'ai fait une petit truc avec. désolé de n'être pas à ta hauteur RiiMii, mais je tiens à te faire remarquer que MOI j'ai essayé de répondre à son problème, au lieu de me contenter de critiquer le travail des autres.
alors voila:

index.php:
<?php
if(!$p){$p=1;}
?>
<html>
<head>
<style type="text/css">
body {
margin: 0px;
}
#thumbs {
float: left;
width: 20%;
height: 100%;
display: block;
overflow: auto;
}
#photos {
float: left;
width: 80%;
height: 100%;
overflow: auto;
}
#mydiv {
position:absolute;
left:20%;
top:0px;
width:80%;
height:100%;
background:url('20.gif') center no-repeat #FFFFFF;
z-index:10;
}
</style>
<script type="text/javascript">
//ajax
function ajaxFunction(i)
{
document.getElementById('mydiv').style.display = '';
var ii = "photos.php?p="+i;
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP" );
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP" );
}
catch (e)
{
alert("Your browser does not support AJAX!" );
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.getElementById('photos').innerHTML = xmlHttp.responseText;
}
}
xmlHttp.open("GET",ii,true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<div id="thumbs">
<?php
for($i=1;$i<14;$i++){
echo "<p><a href=\"javascript:ajaxFunction('$i')\"><img border=\"0\" src=\"album_photo/min/$i.jpg\"></a></p>
";
}
?>
</div>
<div id="photos"><?php include 'photos.php'; ?></div>
<div id="mydiv"></div>
</body>
</html>

avec 20.gif une image de préchargement circulaire (on peut en générer ici: http://www.ajaxload.info/)

photos.php:
<a title="photo précédente" <?php if($p!="1" ){$p--; echo "href=\"javascript:ajaxFunction($p)\"";$p++;} ?>>précédente</a>
  
<a title="photo suivante" <?php if($p!="13" ){$p++; echo "href=\"javascript:ajaxFunction($p)\"";$p--;} ?>>suivante</a>
<br>
<img src="album_photo/<?php echo $p; ?>.jpg" onload="document.getElementById('mydiv').style.display='none';">

tchou!

Message cité 1 fois

Répondre à sleepless2101

sleepless2101 a écrit :

re..
merci de tes agréables conseils.. que tu aurais pu un peu développer. je ne connaissais pas ajax, et j'ai fait une petit truc avec. désolé de n'être pas à ta hauteur RiiMii, mais je tiens à te faire remarquer que MOI j'ai essayé de répondre à son problème, au lieu de me contenter de critiquer le travail des autres.

Ce n'est pas une question d'être a sa hauteur ou non, les frames ne sont pas appréciés donc prends en note !!

------------------------------ Mac OS X, Feisty fawn, winXP
http://jonathanschmidt.fr
Répondre à sparrowix

Frames & Iframe a prohiber et cela depuis pas mal d'année.

Maintenant je vois que tu as pu rapidement appliquer les méthodes AJAX ( qui n'est pas un langage, je me permets de le rappeler ). Comme quoi mon commentaire n'était pas si inutile que cela.

------------------------------
La théorie, c'est quand on sait tout et que rien ne fonctionne. La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Ici, nous avons réuni théorie et pratique : Rien ne fonctionne et personne ne sais pourquoi...
Répondre à RiiMii

Forum Programmation : Galerie Web, Javascript

Attention