Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

2 mars 2009 1 02 /03 /mars /2009 17:22

Voici comment avoir un album photo en css et html, sans javascript (pour ceux qui ne sont pas en privilège) et sans php.

Cette astuce vous permet d'avoir vos albums photos dans le même style que votre blog over-blog sans avoir à subir l'infâme interface des nouveaux albums photos over-blog.

Je vous conseille pour un meilleur rendu - mais vous ferez comme bon vous semble - d'installer cet album photo dans une page (le css des pages est modifiable chez over-blog), de supprimer les éventuels modules et bannières.

 

Vous trouverez le code à coller en html dans votre page en dessous de cet article.
Dans votre fenêtre de publication, si vous n'y êtes pas déjà, passez en mode "édition avancée" pour avoir l'option HTML disponible, puis cliquez sur HTML

Vous pouvez aussi le télécharger ici (zip). Vous pouvez voir un exemple ici.

Ce qui est en orange est ce qu'il vous faut modifier selon vos photos et vos envies.

Ici l'exemple est pour 6 photos, si vous souhaitez plus d'images, il suffit alors de rajouter quelques lignes de code (explications en bas de cet article, juste après le code)

 

 

<center>

<div id="gal"><span>Le titre de mon album photo </span><br>

<div style="margin-left: 2em">

 

<a href="#"><img src="http://www.url1.jpg"><span><img src="http://www.url1.jpg"></span>

 <span><textarea cols="20" rows="2" disabled="true" readonly="true">Commentaire de l'image 1</textarea></span></a>

 

 <a href="#"><img src="http://www.url2.jpg"><span><img src="http://www.url2.jpg"></span>

 <span><textarea cols="20" rows="2" disabled="true" readonly="true">Commentaire de l'image 2</textarea></span></a>

 

<a href="#"><img src="http://www.url3.jpg"><span><img src="http://www.url3.jpg"></span>

 <span><textarea cols="20" rows="2" disabled="true" readonly="true">Commentaire de l'image 3</textarea></span></a>

 

<a href="#"><img src="http://www.url4.jpg"><span><img src="http://www.url4.jpg"></span>

 <span><textarea cols="20" rows="2" disabled="true" readonly="true">Commentaire de l'image 4</textarea></span></a>

 

<a href="#"><img src="http://www.url5.jpg"><span><img src="http://www.url5.jpg"></span>

 <span><textarea cols="20" rows="2" disabled="true" readonly="true">Commentaire de l'image 5</textarea></span></a>

 

<a href="#"><img src="http://www.url6.jpg"><span><img src="http://www.url6.jpg"></span>

 <span><textarea cols="20" rows="2" disabled="true" readonly="true">Commentaire de l'image 6</textarea></span></a>

 

</div>

</div>

</center>

 

 

<style type="text/css">

<!--

#gal{

position:relative;

width:600px;

height:600px;

margin:0px auto 0px auto;

cursor: default;

text-align: center; }

#gal ul{list-style:none;

padding: 0px;

margin: 0px;

position: absolute;

top: 10px;

left: 0px;

text-align: center;

width: 100%;}

#gal a {text-decoration: none;}

#gal a:hover {background: none;}

#gal a span {display: none;

cursor: default;}

#gal a img {display: inline;

margin:5px 5px 0 5px;

border: 1px solid black ;

position: relative;

z-index: 1001;

height: 70px;

width: auto;}

#gal a:active span, #gal a:focus span  {display: inline;

visibility: visible;

position: absolute;

top: 130px;

left: 0px;

width: 100%;

background: transparent;}

#gal img, #gal a span img {margin:0px auto 0 auto;

border: 1px solid black ;

height: 380px;}

#gal a textarea {background-color: transparent;

border: 0px solid white;

text-align: center;

height: 190px;

width: 480px;

top: -25px;

overflow: hidden;

margin:405 auto 0 auto;

cursor: default;

position: relative;

z-index: 1000;}

--></style>

 

 

Si vous désirez plus que 6 photos, il suffit d'ajouter autant de fois que nécessaire ce paragraphe en le modifiant :

 

<a href="#"><img src="http://www.urlx.jpg"><span><img src="http://www.urlx.jpg"></span>

 <span><textarea cols="20" rows="2" disabled="true" readonly="true">Commentaire de l'image x</textarea></span></a>

 

Bien sûr il s'insère en suivant l'image 6 au début du code...

 

Pour faire plusieurs lignes de miniatures, il suffit d'ajouter <BR> avant l'image qui se trouvera à la ligne du dessous.

 

 

Partager cet article

Repost 0
Published by Photo.Graph - dans webdesign
commenter cet article

commentaires

Katleen L.A 30/01/2010 22:59


Merci ;)...faut que je me remette l'esprit dans le mécanisme...


Christelle Vinsonneau 31/01/2010 12:24



et bien bon courage !


sinon, plus simple : http://photo.graph.over-blog.com/article-35588996.html



diablouf44 30/10/2009 18:09


Pour Katleen:
remplace les [href="#"] par: [href="javascript:void(0)"]
c'est ce que j'ai fais et maintenant, plus de problème!!
Sinon, merci pour les tuyaux ;)


Katleen L.A 04/10/2009 10:11


Petite question, christelle ?
Lorsque je clique sur une miniature, la page entière remonte à chq reprise vers le haut...puis je améliorer cela ?
Merci dans tout les cas...


Christelle Vinsonneau 05/10/2009 19:47


Ahhh j'ai bien peur que ce problème persiste... sinon il y a toujours cette solution : http://photo.graph.over-blog.com/article-35588996-6.html


Katleen L.A 02/09/2009 15:06

Alors vraiment merci...!!! J'étais désespérée de trouver un moyen de rester dans l'élégant et la simplicité...j'ai tenté de multiples façons d'apposer un album autre que celui qui nous propose( jalbum, simpleviewer et tout les autres) , etant une quiche en codes et langage informatique, tu peux imaginer dans la galère dans laquelle j'étais...
Maintenant, il me reste evidemment à paufiner...mais ravie!!

Christelle Vinsonneau 13/09/2009 15:20


Et bien, bon courage pour la suite !


monta 12/07/2009 11:31

merci pour cette information :)

Christelle Vinsonneau 15/07/2009 19:27


avec plaisir !