Este efecto...

ken-obi · #1 (**permalink**) 02/12/2009, 14:44

Como podría hacer esto: http://www.thecircleclub.com/gallery/category/

1º hacer que las imagenes se vean recortadas cuando el original no esta recortada.

2º cuando pincha sobre una imagen se queda el fondo difuminado en negro y salta una capa con la imagen y con su texto etc y al pinchar fuera de la imagen se cierre la foto.

Me conformo con que me digais como buscar estos efectos por la red.

Gracias de antemano.

Hidek1 · #2 (**permalink**) 02/12/2009, 14:48

busca...libreria efectos jquery ... ya que esto se hace con ajax no con php

saludos!

Vun · #3 (**permalink**) 02/12/2009, 14:50

Encontre este codigo CSS, parece que la propiedad clip hace eso que quieres

#photoclip {
position:absolute;
height: 100px;
width: 50px;
clip: rect(0px, 100px, 40px, 0px);
overflow: hidden;
background: url(yourimagelocation);
}

En esta web http://www.webmasterworld.com/css/3570683.htm

Sino busca en google por "crop images css"

jackson666 · #4 (**permalink**) 02/12/2009, 14:53

Es javascript eso... Es un div que tiene visibility hidden y al hacer click en la foot se te transparenta el body y t muestra el div q estaba oculto que adentro le pasa la ruta de la imagen con innerHTML

ken-obi · #5 (**permalink**) 02/12/2009, 15:46

Cita:

Iniciado por jackson666

Es javascript eso... Es un div que tiene visibility hidden y al hacer click en la foot se te transparenta el body y t muestra el div q estaba oculto que adentro le pasa la ruta de la imagen con innerHTML

Hay algun ejemplo por la web?

JessicaTJ · #6 (**permalink**) 02/12/2009, 15:49

El efecto del div lo logras con Lightbox:
http://www.huddletogether.com/projects/lightbox2/

Y cortar las imagenes las logras con esta clase:
http://www.forosdelweb.com/f91/redim...on-php-665923/

iandrade · #7 (**permalink**) 02/12/2009, 18:00

Cita:

Iniciado por Hidek1

... ya que esto se hace con ajax no con php

AJAX no se usa para eso, eso es simplemente manejo de Atributos css de manera dinamica con un framework escrito en Javascript del lado del cliente. Para nada tiene que ver PHP con el efecto

chalchis · #8 (**permalink**) 03/12/2009, 01:05

este podria ser el css que usan para que la imagen se vea recortada

Código:

.gallery-thumb-wrapper {
float:left;
height:124px;
overflow:hidden;
text-align:center;
width:83px;
}

y en la pagina

Código:

<div class="gallery-thumb-wrapper">
<img id="412-1" class="galleryimage" src="/images/gallery/thumb_091129_circleclub_001.JPG" alt="412-1"/>
</div>

Hidek1 · #9 (**permalink**) 03/12/2009, 06:04

Cita:

Iniciado por iandrade

AJAX no se usa para eso, eso es simplemente manejo de Atributos css de manera dinamica con un framework escrito en Javascript del lado del cliente. Para nada tiene que ver PHP con el efecto

esto se ase con css?... explicame como porfavor

Cita:

http://www.thecircleclub.com/gallery/category/

2º cuando pincha sobre una imagen se queda el fondo difuminado en negro y salta una capa con la imagen y con su texto etc y al pinchar fuera de la imagen se cierre la foto.