poner un classe

[ivan_pala21]

hola muy buenas y feliz navidad a todos
el caso es que tengo una galería de imágenes y necesito convertir el css en una clase ya que si no , no me deja poner mas de una imagen para ampliar.

Código CSS:

/* jQuery lightBox plugin - Gallery style */
    #gallery {
    
    padding:0px;
    width: 250px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #933;
        border-width: 5px 5px 20px;
        color: #933;
    }
    #gallery ul a:hover { color:#933;}
 
</style>
 

me gustaria convertir esto en una classe para poder colocar en mas de una imagen he provado cambiando la # por un punto pero no me funciona.

Código HTML:

<div id="gallery">
        <ul>
            <li> <a href="imagenes/images/guarderia/foto1.gif"><img src="imagenes/images/guarderia/foto1.gif" width="248" height="150" alt="Residencia Arenyscan" longdesc="http://www.arenyscan.es" border=" 1px solid  #666; " align="texttop" /></a>
            </li>
</ul>
</div>
 

el caso es que no puedo colocar otra imagen ya que solo puede haber un id por pagina.
alguna idea plia.

[alzacon]

- Tienes una galería y tienes un único id #gallery, asigando a la galería. Problema ninguno.
- Para añadir más imagenes haces como la primera, no hay problema. Al menos que no sepas nada de como se tienen que añadir elementos a la galería, entonces si es un problema pero de desconocimiento. La solución aprender.

[ivan_pala21]

si añado una imagen mas no funciona

Código HTML:

<div id="gallery">
        <ul>
            <li> <a href="imagenes/images/guarderia/foto1.gif"><img src="imagenes/images/guarderia/foto1.gif" width="248" height="150" alt="Residencia Arenyscan" longdesc="http://www.arenyscan.es" border=" 1px solid  #666; " align="texttop" /></a>
            </li>
            <br />
 
    <li>
  <a href="imagenes/fotoIndex1.JPG">
  <img src="imagenes/fotoIndex1.JPG" alt="recogida a domicilio" width="248"  height="169"  border=" 1px solid  #666; " align="texttop" /></a>
  
  
  </li>
  </ul>
</div>
 

y si duplico el div galería tampoco

Código HTML:

<div id="gallery">
        <ul>
            <li> <a href="imagenes/images/guarderia/foto1.gif"><img src="imagenes/images/guarderia/foto1.gif" width="248" height="150" alt="Residencia Arenyscan" longdesc="http://www.arenyscan.es" border=" 1px solid  #666; " align="texttop" /></a>
            </li>
            
  </ul>
</div>
 <br />
 
        <div id="gallery">
        <ul>
            
 
    <li>
  <a href="imagenes/fotoIndex1.JPG">
  <img src="imagenes/fotoIndex1.JPG" alt="recogida a domicilio" width="248"  height="169"  border=" 1px solid  #666; " align="texttop" /></a>
  
  
  </li>
  </ul>
</div>
 

así que creo que pasa por crear una clase como podría hacerlo

alzacon si no pretendes ayudar no des respuestas arrogantes.

[pzin]

Es de suponer que no hiciste tú la galería, ya que sino sabrías cómo añadir otra imagen. Pues del lugar de donde la hayas descargado/copiado, fíjate como está ahí o si es alguna librería vendrá con la documentación.

Realmente el término galería es un concepto abstracto igual que no funciona, así que sino sabemos qué hace esa galería ni qué es lo que no funciona correctamente, poco se te podrá ayudar.

[ivan_pala21]

sabrías pasar esto a una clase

Código CSS:

/* jQuery lightBox plugin - Gallery style */
    #gallery {
    
    padding:0px;
    width: 250px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #933;
        border-width: 5px 5px 20px;
        color: #933;
    }
    #gallery ul a:hover { color:#933;}
 
</style>
 

[alzacon]

Lo siento si te he parecido arrogante, no era mi intención.

Usando solo tu css y html (el 2º que has puesto y es a lo que me refería) quitanto entre los li el br (no entiendo su utilidad) y usando otras imagenes, añade perfectamente una imagen debajo de la otra -> http://jsfiddle.net/n7sSg/1/

Entonces no es que no puedas poner, es que por algún estilo de tu página este oculto.

[ivan_pala21]

el caso es que con una imagen funciona bien lo que hace es aumentar la imagen al ckicar sobre ella y se reduce al volver a clicar la imagen

[ivan_pala21]

mira esto es lo que pasa a la derecha las imagenbes

http://arenyscan.es/instalaciones.php

por eso quiero convertirlo en una clase para poder re repetir el div galería

[alzacon]

Iniciado por ivan_pala21

el caso es que con una imagen funciona bien lo que hace es aumentar la imagen al ckicar sobre ella y se reduce al volver a clicar la imagen

No sé si ahora mismo el que tiene un cacao mental soy yo o eres tú. Cada vez me entero menos.

Con la primera imagen ¿para reducir dónde clicas? ¿En la imagen ampliada o en la imagen original?

[ivan_pala21]

en la imagen ampliada

[alzacon]

¿En cualquier parte de la imagen (propiamente dicha) ampliada se te reduce? ¿Estas seguro de qué en el lado derecho de la misma también se te reduce?

¿El script de la galería es éste ?