How to give lava lamp effect using jquery to images
Question
I have bulk images inside a div element so I need to give some nice lava lamp effect to those images which I am unable to get it and followed some examples from the below site:
http://nixbox.com/projects/jquery-lavalamp/demos
Can anyone help me out?
Here is my code:
$('#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>");
This is my CSS Code for lava effect:
.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;
}
This is the script:
$('images').lavaLamp({
target: 'img',
autoResize: true
});
Solution
might it simply be that you missed a dot out of the JQuery class selector?
$('.images').lavaLamp({
target: 'img',
autoResize: true
});
here is the working version
the problem was that the style you wanted to apply as the lavalamp effect was applied to all elements when it should have been assigned to the .backLava
class
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow