Cómo dar efecto de lámpara de lava usando jQuery a las imágenes
Pregunta
Tengo imágenes a granel dentro de un elemento div, así que necesito dar un buen efecto de lámpara de lava a esas imágenes que no puedo obtener y seguí algunos ejemplos del sitio a continuación:
http://nixbox.com/projects/jquery-lavalamp/demos
¿Puede alguien ayudarme?
Aquí está mi código:
$('#showfilelist').append("<div id=" + file.id + "><a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' target='_blank' rel='gallery'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "'width='50' height='50' class='images'/></a></div>");
Este es mi código CSS para el efecto de lava:
.images
{
border: 1px solid #33CC33;
background-color:#CCFFCC;
z-index:1;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
-moz-box-shadow: 2px 2px 3px #000;
}
Este es el guión:
$('images').lavaLamp({
target: 'img',
autoResize: true
});
Solución
¿Podría ser simplemente que te perdiste un punto fuera del selector de clase jQuery?
$('.images').lavaLamp({
target: 'img',
autoResize: true
});
Aquí está la versión de trabajo
El problema era que el estilo que quería aplicar, ya que el efecto Lavalamp se aplicaba a todos los elementos cuando debería haberse asignado al .backLava
clase
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow