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
        });

why are you using this longhand syntax `document.getElementById("currentDirectory").value` when ur using JQuery? — Tules, Oct 19 '11 at 13:20
session value? Sessions are managed by the server not the client. I think you mean that you have some custom data hidden in an element with ID "currentDirectory", you could still use `$('#currentDirectory').val()` — Tules, Oct 19 '11 at 13:25

Tules · Accepted Answer · 2011-10-19T14:52:24.080

1

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

http://jsfiddle.net/Bpnca/84/

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

edited Oct 19 '11 at 14:52

answered Oct 19 '11 at 13:22

Tules

4,905
2
27
29

Oh thanks for correcting that mistake and still I am unable to get that after doing that.I am just getting the green background for every image. – coder Oct 19 '11 at 13:26
can you post a link to ur page? – Tules Oct 19 '11 at 13:30
got it, you needed to assign your custom style to the backLava class which is used to customize the effect, also every element that you want effecting needed to be wrapped in some kind of container which it was not – Tules Oct 19 '11 at 14:55
Thank you so much for taking time and giving me the reply. – coder Oct 19 '11 at 15:27
no problem bro, I must admit it took a little while cuz I'd never seen that plugin b4 – Tules Oct 19 '11 at 15:30
it's Ok just now i have found another website doing the same thing and it may be useful for some other I will provide a link for that website.http://onwebdev.blogspot.com/2011/08/jquery-lavalamp-image-gallery.html – coder Oct 19 '11 at 15:32
this didnt work, at least in Chrome... It did not hover to the bottom image – Tules Oct 19 '11 at 15:38
Yes bro you're right might be he used some other plugin and he did not mention on his site.And the example works fine there and if we use the same it didn't work – coder Oct 19 '11 at 16:28

How to give lava lamp effect using jquery to images

1 Answers1