hacer slider ligthbox con este código

[Jeshua_11_7]

hola, buscando en Internet me encontré este código para hacer el ligthbox, lo que me gusto que es un código sencillo y solo con CSS 3 pero tengo la duda si se puede hacer un Slider modificando este código, espero y alguien pueda ayudarme, saludos de antemano.

Código HTML:

<a href="#imagenn1"><img src="imagenchica.jpg" alt="" /></a>
<a href="#" id="image1" class="pressbox"><img src="imagenGrande.jpg" alt=""></a>
 

Código CSS:

.pressbox {
    width: 0;
    height: 0;
    position: fixed;
    overflow: hidden;
    left: 0;
    top: 0;
    z-index: 9999;
    text-align: center;
    background: rgba(0,0,0,0.7);
    }
 
    .pressbox img   {
        opacity: 0;
        padding: 10px;
        background: #ffffff;
        margin-top: 100px;
        -webkit-box-shadow: 0px 0px 15px #444;
        -moz-box-shadow: 0px 0px 15px #444; 
        box-shadow: 0px 0px 15px #444;  
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
        transition: opacity .25s ease-in-out;       
        }
 
.pressbox:target {
    width: auto;
    height: auto;
    bottom: 0;
    right: 0;
    }
    
    .pressbox:target img {
        opacity: 1;
        }
 

[pzin]

En realidad no tiene mucho que ver una cosa con la otra ¿no? Poder, si se puede. Pero al final vas a acabar con un código que no se parece en nada a ese. Es lo mismo hacerlo desde cero, vaya.

[Jeshua_11_7]

ok, gracias, lo que pasa es que quiero hacer un slider pero en un lightbox, pero no quiero que tenga las miniaturas, por ejemplo solo. Un boton que diga, ver imagenes y al dar clic que aparezca el slider en el lightbox, pero no se como hacerlo

[venommist]

Estimado:
Debes poner el código html del slider dentro del DOM del lightbox...

Por ejemplo:

Código HTML:

<a href="#imagenn1"><img src="imagenchica.jpg" alt="" /></a>
<a href="#" id="image1" class="pressbox"><img src="imagenGrande.jpg" alt="">
<div class="window"  id="imagenn1">
    <div class="slider">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
    </div>
</div>
</a> 

La librería debería tomar correctamente que dentro de la etiqueta <a> correspondiente al pressbox (que debería ejecutar lo que contenga) se encuentra otro dom con un slider...
Ahora, en CSS deberás editar estas nuevas clases CSS, indicandole el alto, el ancho, el position y el float a la clase item, window y slider.

Código CSS:

.window{position: relative; overflow:none; width: x px; height: x px;} /* mismo ancho y alto que item */
.slider{position: absolute; width: x+x px; height: x px;} /* ancho igual al ancho de item x cantidad de item */
.item{width: x px; height: x px;} /* ancho y alto de las imágenes que pasaran, tamaños individuales */
/* x es el ancho de cada imagen, calculando que el WINDOW será la ventana de muestra, ésta debe tener el tamaño de cada imagen */
 

Espero que sea de ayuda, si tienes dudas me avisas.

Saludos

[Jeshua_11_7]

Iniciado por venommist

Estimado:
Debes poner el código html del slider dentro del DOM del lightbox...

Por ejemplo:

Código HTML:

<a href="#imagenn1"><img src="imagenchica.jpg" alt="" /></a>
<a href="#" id="image1" class="pressbox"><img src="imagenGrande.jpg" alt="">
<div class="window"  id="imagenn1">
    <div class="slider">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
    </div>
</div>
</a> 

La librería debería tomar correctamente que dentro de la etiqueta <a> correspondiente al pressbox (que debería ejecutar lo que contenga) se encuentra otro dom con un slider...
Ahora, en CSS deberás editar estas nuevas clases CSS, indicandole el alto, el ancho, el position y el float a la clase item, window y slider.

Código CSS:

.window{position: relative; overflow:none; width: x px; height: x px;} /* mismo ancho y alto que item */
.slider{position: absolute; width: x+x px; height: x px;} /* ancho igual al ancho de item x cantidad de item */
.item{width: x px; height: x px;} /* ancho y alto de las imágenes que pasaran, tamaños individuales */
/* x es el ancho de cada imagen, calculando que el WINDOW será la ventana de muestra, ésta debe tener el tamaño de cada imagen */
 

Espero que sea de ayuda, si tienes dudas me avisas.

Saludos

hola, gracias por ayudar, pero tengo una duda, como se iría recorriendo el slider para ir mostrando las imágenes. y este es mi código html sin aún agregar el que me diste, y el css es el mismo que esta arriba

Código HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="estilo.css">
    </head>
    <body>
 
        <a href="#image1"><img src="imagen1.png" width="215" alt="" /></a>
        <a href="#" id="image1" class="pressbox"><img src="imagen2.png" width="30%" alt=""></a>
 
    </body>
</html>
 

y así es como se mira



y muchas gracias de antemano por ayudar