Se connecter / S'enregistrer
Votre question

Galerie Web, Javascript

Tags :
  • photo
  • Programmation
Dernière réponse : dans Programmation
21 Avril 2008 00:02:07

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.

Autres pages sur : galerie web javascript

14 Juillet 2008 14:21:32

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
14 Juillet 2008 16:15:03

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é.
Contenus similaires
16 Juillet 2008 10:03:28

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!
16 Juillet 2008 10:13:10

sleepless2101 a dit :
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 !! ;) 
16 Juillet 2008 13:45:06

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.
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS