Welcome to the Geeks & God Static Archive. Read more »

Creating a lavaLamp aka Fancy Menu in Drupal 6.x using jquery

User Rating:
4.5
Average: 4.5 (20 votes)

This is going to be a quick tutorial on how to create a lavalamp menu also called Fancy Menu, using the jquery lavaLamp plugin. I figured it out mostly by trial and error using the abessive theme. Hopefully this will save someone time and also remind me how I did it.

1. Download the plugin: LavaLamp plugin

2. Copy to text editor and save as .js file i.e. jquery.lavalamp.min.js

3. Download the easing plugin:Easing Plugin and do the same thing i.e. jquery.easing.min.js

4. Create lavalamp.css using this as an example.

5. Place stylesheet in themes folder (you'll need to make the call for the css)

6.Create "js" folder in themes directory. i.e. (sites/all/themes/abessive/js)

7.Go into template file (template.php) and put the following lines in:

<?php
// $Id: template.php,v 1.1.2.1.2.6 2009/03/18 17:15:14 njt1982 Exp $
drupal_add_js(drupal_get_path('theme', 'abessive') . '/js/jquery.lavalamp.min.js', 'theme');
drupal_add_js(drupal_get_path('theme', 'abessive') . '/js/jquery.easing.min.js', 'theme');
  }

This goes at the top. Disregard the //$Id line (I just put that in to help you know where it goes)

8. Go into the page.tpl.php file and put in the following:

<?php // $Id: page.tpl.php,v 1.1.2.2.2.5 2009/03/18 17:12:06 njt1982 Exp $ ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
  <head>
    <title><?php print $head_title ?></title>
    <?php print $head ?>
    <?php print $styles ?>
    <?php print $scripts ?>
    <script type="text/javascript" src="/sites/all/themes/abessive/js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="/sites/all/themes/abessive/js/jquery.easing.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(document).pngFix();
    });
</script>
<script type="text/javascript">
$(document).ready(function() {
       

  $(".lavaLampmenu").lavaLamp({ fx: "backout", speed: 1200 }); 

    });
</script>
  </head>

Again the only important thing is that the javascript tags and functions go before the /head
9. Also in the page.tpl.php is the following line:

<?php if (isset($primary_links)) : ?>
          <?php print theme('links', $primary_links, array('class' => 'primary-links')) ?>
        <?php endif; ?>
        <?php if (isset($secondary_links)) : ?>
          <?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
        <?php endif; ?>

Change this to:

<?php if (isset($primary_links)) : ?>
          <?php print theme('links', $primary_links, array('class' => 'lavaLampmenu')) ?>
        <?php endif; ?>
        <?php if (isset($secondary_links)) : ?>
          <?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
        <?php endif; ?>

You should have a working lavalamp menu. You will certainly have to tweak the .css

I am definately not a pro at this and I may not have done it the "drupal way" I would appreciate any input on the "correct way". I would also like some input on how to create a namespace.

I hope this is helpful. You can check it out on my site at www.rawdesigners.com

Blessings,

Jon

please help

4

Hey,

i would creating the lavalamp menu in my drupal 6.1
But i don't it.

I've downloadet the two js plugins (lavalamp.js and easing.js) and saved in the js folder in my themefolder
--> main/themes/mytheme/js/jquery.easing.js
--> main/themes/mytheme/js/jquery.lavalamp.js

than i have edit my template.php to:

<?php
// $Id: template.php,v 1.1.2.2 2008/03/08 14:59:54 jswaby Exp $
drupal_add_js(drupal_get_path('theme', 'mytheme') . '/js/jquery.lavalamp.js', 'theme');
drupal_add_js(drupal_get_path('theme', 'mytheme') . '/js/jquery.easing.js', 'theme');

that works and is displaying in site source code

so, than i edit my style.css and enhance the class styles

than I edit my page.tpl.php to:

  <?php print $scripts ?>
  <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
  <script type="text/javascript">
$(document).ready(function() {

$(".lavaLampWithImage, .lavaLampNoImage, .lavaLampBottomStyle").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function() {return false;}
            });
});</script>
</head>

<body>

<div id="wrapper">
  <div id="wrapper2">
    <div id="header">
      <div id="logo">
        <?php if ($site_name) { ?><h1 class='site-name'><a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?>
        <?php if ($site_slogan) { ?><div class='site-slogan'><?php print $site_slogan ?></div><?php } ?>
      </div>
      <div id="menu">
        <?php if (isset($primary_links)) { ?>
<?php print theme('links', $primary_links, array('class' => 'lavaLampNoImage', 'id' => 'navlist')) ?><?php } ?>
      </div>
    </div>

But why don't work it? Where is my mistake?
Can You help me?

Must be in your .css

I see that in my tutorial I did in fact state that you had to assign a class to the menu of lavalamp. This leads me to believe that the problem is in your css. Use firebug to check it. Is your .css loading? I don't want to insult your knowledge so I'll leave it at that. Let me know if that works!

Yes, I've insert the css

Yes, I've insert the css class in my main css stylesheet (style.css)
I can see the background of menĂ¼, but the feauture of java its not function. the overlay function is not displayed.

i hope you understand me :-)

and the links don't execute

and the links don't execute ... but clickable

alternatively I've the css sheets insert in a external lavalamp.css
but is the same feature. css works, but the js not.

ok, I've now go to your site

ok, I've now go to your site http://www.rawdesigners.com and copy the source code of your lavalamp.js and easing.js in my files. Now it's going.

what's wrong at the original source files?

I did it like Matthias, but

4

I did it like Matthias, but my links aren't clickable. With the original js-code it didn't work at all on my site, too.

lavaLamp

I am not sure what is going on. What theme are you using? Is your menu showing up? Do you have a URL? Which lavalamp version are you using? Which easing version are you using? And which jquery version are you using? I'd like to get to the bottom of what is going on.

LavalampMenu

Make sure the class you assign to your menu in the tpl.php file matches with the css. When I assigned the lavalampmenu class to the primary links, I then had to create a lavalampmenu entry in the css.

Not working

5

I'm having some of the same problems. I'm running a Zen subtheme and I can get the background to appear but the overlays won't appear. So, no effects at all. Is there any way you can post a set of files for a working Drupal version including the js and css files?

got it working

5

I went and downloaded the original files from the lavalamp website and used their CSS file too. After installing all of that and the most recent jQuery, I got it to work.

jquery version

Does that mean you are using jquery 1.3.2 ? What is the url to the "lavaLamp website"? Do you have a url for your lavalamp incorporation?

Here's the info

5

lavaLamp: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-f...

I got all of the info from that site. I am now realizing that this is pretty old. I did however use jQuery 1.3.2, which I put in the script folder with the other two and added a new drupal get script line in template and a script line in page.tpl, but I used the original lavalamp plugin from the above link. I tried both the newest lavalamp and easing plugins and the both killed the functionality. My site is http://launchbizz.com.

Functionality Lost

5

I thought I should expound on the 'lost functionality' comment. The newest lavalamp plugin would take the box around the menu item away meaning that the links worked but no cool box on the menu and the newest easing plugin would show the box but the box did not move at all. Thanks for the help.

Congrats

Yeah something funky goes on with that. I am glad you at least figured out as much as I did and you got it working. Let me know if you play around with some of the other variations such as bounce.

Setting a page to current

5

I thought I would send out a tip for all your help. If you go inside jquery.lavalamp.js and change all of the references to "current" to "active", the menu box will stay on the link of the page you are on. Hope this helps someone.

I got this to work, but it's

5

I got this to work, but it's kind of choppy, not a slow, fluid motion.

Also, the new version of lavalamp and easing do not work, I had to use the ones linked on this page: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-f...

To get it to show up at all.

Thanks

Thanks for your comment. Do you have a url so I could take a look?

Sure

5

Sure, the url for the site is: http://www.inspiredreamstoday.org

I actually ended up getting it to work by using a slightly different version of easing than what's included in that zip I linked above, version 1.1, which I'll post below for anyone who wants to use it.

/*
* jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
*
* Uses the built in easing capabilities added in jQuery 1.1
* to offer multiple easing options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
*   http://www.opensource.org/licenses/mit-license.php
*/

jQuery.easing = {
easein: function(x, t, b, c, d) {
return c*(t/=d)*t + b; // in
},
easeinout: function(x, t, b, c, d) {
if (t < d/2) return 2*c*t*t/(d*d) + b;
var ts = t - d/2;
return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b;
},
easeout: function(x, t, b, c, d) {
return -c*t*t/(d*d) + 2*c*t/d + b;
},
expoin: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
return flip * (Math.exp(Math.log(c)/d * t)) + b;
},
expoout: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
return flip * (-Math.exp(-Math.log(c)/d * (t-d)) + c + 1) + b;
},
expoinout: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
if (t < d/2) return flip * (Math.exp(Math.log(c/2)/(d/2) * t)) + b;
return flip * (-Math.exp(-2*Math.log(c/2)/d * (t-d)) + c + 1) + b;
},
bouncein: function(x, t, b, c, d) {
return c - jQuery.easing['bounceout'](x, d-t, 0, c, d) + b;
},
bounceout: function(x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
bounceinout: function(x, t, b, c, d) {
if (t < d/2) return jQuery.easing['bouncein'] (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing['bounceout'] (x, t*2-d,0, c, d) * .5 + c*.5 + b;
},
elasin: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasout: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasinout: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
backin: function(x, t, b, c, d) {
var s=1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backout: function(x, t, b, c, d) {
var s=1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backinout: function(x, t, b, c, d) {
var s=1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
linear: function(x, t, b, c, d) {
return c*t/d + b; //linear
}
};

Thank you

5

Thanks for the link to your site. Very nice implementation. Thank you too for the code.

Jon

Help

3

hey! I have problem, i can't link the buttons. I tryed by changing the # with

  • Portfolio
  • but it still doesn't work, nothig happens...

    Can somebody tell me how to solve the problem???

    Thanks

    problem?

    I would love to help but you are going to have to be a little more descriptive with what is going on. You tried changing #? I don't understand. Try working through the tutorial step by step. At the very least you should be getting the menu on the page without the slider. You can also view my source code at www.rawdesigners.com/eye-candy

    "#"

    thanks for the reply!

    I customized the menu and now i'm trying to make the buttons links. with # i meant ...

    I changed the # with, for example, http://www.google.com but nothing happens when i click the button.

    this is the address www.flex-eff.com/new/index.html but please open it with mozilla firefox becaude there is still no code for IE :).

    code

    here is the code and as you can see the Graphic Design button shoul be linked to google for example

    <ul class="lavaLampWithImage" id="1">
        <li class="current"><a href="#">Home</a></li>
      <li><a href="#">Web Design Plans</a></li>
        <li><a href="http://www.google.com">Graphic Design</a></li>
        <li><a href="#">Other Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>

    Very Nice

    Hey there Dare,

    First of all I'd like to tell you what a nice site design you have. The theme is killer. Is there any chance you could tell me about it?

    As for your issue, I now see what you are talking about. The problem is that your code is not printing the html and I am not sure why. If you look at my page source you should probably be able to figure out what you are/are not doing. The code should read:

    <a href="/catalog/9" title="Get a dynamic web site for under 200 dollars">Services</a>

    This is what I get from your page:

    <ul class="lavaLampWithImage" id="1">
        <li class="current"><a href="#">Home</a></li>
      <li><a href="#">Web Design Plans</a></li>
        <li><a href="#">Graphic Design</a></li>

        <li><a href="#">Other Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>

    It's DONE

    hey JStieglitz

    Thanks for nice words.I priciate it and thank's for trying to help me!

    I figured out what's the problem. I've changed RETURN FALSE with RETURN TRUE in the code and now it's working. This is what I'm talking about:

    $(function() {
                $("#1, #2, #3").lavaLamp({
                    fx: "backout",
                    speed: 700,
                    click: function(event, menuItem) {
                        return true;
                    }
                });
            });

    Blessings!

    Current State

    5

    I'm fairly new to using Drupal 6 and I'm trying to implement it on a site. I got the menu working from this tutorial, however, the underline isn't staying on the current selected menu item.

    I tried Zach's advice above, but changing it from current to active doesn't seem to make it work.

    Any ideas on what I'm doing wrong or how I could make sure that this feature is set right on the menu, JStieglitz?

    I'm developing locally, so sadly I don't have a link to provide you to take a look at.

    Thanks,

    Eric

    It seems to be the same issue

    It seems to be the same issue as mentioned above:

    Setting a page to current
    Submitted by Zach on April 16, 2009 - 7:09pm.
    5

    I thought I would send out a tip for all your help. If you go inside jquery.lavalamp.js and change all of the references to "current" to "active", the menu box will stay on the link of the page you are on. Hope this helps someone.

    I hope this helps!

    J

    Sorry

    I failed to notice that you had already tried the current/active when I made the above comment. If you go to your source code and paste it in here I could see if I can tell what is going on. I hope you get it.

    J

    Setting a page to current

    I'm having the same problem. I have pasted the changed code below, it would be appreciated if someone could shed some light on what else I need to change.

    (function($) {
    $.fn.lavaLamp = function(o) {
    o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});

    return this.each(function() {
    var me = $(this), noop = function(){},
    $back = $('

  • ').appendTo(me),
    $li = $("li", this), curr = $("li.active", this)[0] || $($li[0]).addClass("active")[0];

    $li.not(".back").hover(function() {
    move(this);
    }, noop);

    $(this).hover(noop, function() {
    move(curr);
    });

    $li.click(function(e) {
    setCurr(this);
    return o.click.apply(this, [e, this]);
    });

    setCurr(curr);

    function setCurr(el) {
    $back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
    curr = el;
    };

    function move(el) {
    $back.each(function() {
    $(this).dequeue(); }
    ).animate({
    width: el.offsetWidth,
    left: el.offsetLeft
    }, o.speed, o.fx);
    };

    });
    };
    })(jQuery);

    Hey Christine

    Hey Christine,

    I'm sorry I haven't replied to your comment. I'm not sure how I missed it. I'm hopin the G&G pick it back up again. I haven't been real good about checking in for the last couple months. I'm not sure what is going on with your code. Do you have a URL that I could see it in action? That is if you haven't gotten it already. Sorry again.
    Jon
    http://www.morethanthethought.com

    Thanx

    Thanx ken ur code and ur link was helpful to get my lavalamp working :) Thanks a lot.. and 1 more thing .. ur execution was extremely beautiful.. nice work :)

    $('#search input:text').autofill({ value: _search_placehol

    5

    The simplest and correct "drupal" way to do this would be to download the plugins into the "js/" directory in your theme. then add the following to your .info file

    scripts[] = js/jquery.easing.js
    scripts[] = js/jquery.lavalamp.js
    scripts[] = js/javascript.js

    then in your js/javascript.js file add the following

    NOTE: if you already have a custom javascript file for your theme, just add the $(function() line to your existing call to $(document).ready

    $(document).ready(function(){ 
      $(function() { $(".primary-links").lavaLamp({ speed: 500 })});
    });

    and for your css simply apply the same css provided by lavaLamp but apply it to .primary-links instead of .lavaLamp

    Little help needed

    3

    First of all great tutorial. I got my lavalamp navigation almost working in Drupal.

    Actually i failed in a few (small) things:
    1. li.back doesn't follow the mouse fluently.
    2. there is no bounching effect visible.

    What the menu at this point does, is when hovering a menu-item, li.back goes to the menu-item after a delay of about 1 second without an effect. In fact it looks like a normal hover. When leaving the menu-item, li.back goes back to the active menu-item as it suppose to do.

    Hopefully someone could help me.
    Unfortunatly i am developing locally, so you guys cannot take a look at it.

    ps. @Christine i tried your code also... :-(

    I did it the 'Drupal' way

    5

    I did it the 'Drupal' way like Kris described. Previously I was getting the 'white screen of death' due to an issue with the template.php. But now everything is working fine and I find the 'drupal' way is much easier anyway. Anyone wanting the 'bounce' effect needs to add fx: "backout", to the code in the javascript.js

    Thanks JStieglitz and Kris and everyone who contributed

    CSS

    5

    This tutorial looks great. I seem to be missing something regarding the CSS though. It seems that I am supposed to make a new CSS file. I am quite new to CSS but I've been learning slowly. In the tutorial a link is given that is supposed to show an example of what the css should look like. When I visit the link I see nothing about CSS. Perhaps the information at the link location has changes since this tutorial was first published? Anyway, if someone could PLEASE post a sample of what the hell I should be doing with the CSS or what theirs looks like that would be greatly appreciated!!! Also I am attempting to do this "the Drupal way" as stated by Kris, do I still need to make the changes to the template files delineated in the tutorial? Thanks for any help....

    Abe

    I am wondering if ....

    5

    Has anyone worked with the lavaLamp menu lately? I tried to get it to work in the attempt of creating a module but something was wrong with the code? Can anyone help me figure out which version of JQuery and Lavalamp makes it work? Also the version of easing etc. I haven't had time to figure all that out but once I do I will attempt to create a module. Any help?

    Doesn't work with my theme

    1

    I have tried to follow the tutorial but the javascript function doesn't seem to work. Here is my site http://drupal.fabulousanime.com/ can anyone help me fix?

    nice site

    Thanks for posting. I can't take a look at the code at the moment because I am mobile. I have been wanting to take a look at the lava lamp menu for a website I am designing for a Lansing Michigan business so this is just the motivation I need to get going again. I will tty to take a look at it tonight and hopefully have an answer for you.

    Jon

    code

    2

    This is what I put in my page.tpl.php
    I really don't know why it won't work

    <?php // $Id: page.tpl.php,v 1.1.2.2.2.5 2009/03/18 17:12:06 njt1982 Exp $ ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
      <head>
        <title><?php print $head_title ?></title>
        <?php print $head ?>
        <?php print $styles ?>
        <?php print $scripts ?>
        <script type="text/javascript" src="/sites/all/themes/portfolio/js/jquery.lavalamp-1.3.5.js"></script>
    <script type="text/javascript" src="/sites/all/themes/portfolio/js/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $(document).pngFix();
        });
    </script>
    <script type="text/javascript">
    $(document).ready(function() {
          

      $(".lavaLampmenu").lavaLamp({ fx: "backout", speed: 1200 });

        });
    </script>
      </head>

    <body>

    <div id="container_nav">
    <div id="nav">
    <ul class="lavaLampmenu">
    <li></li>
    <li></li>
    <li><a href="yahoo.com">yahoo</a></li>
    <li><a href="google.com">google</a></li>
    </ul>
    </div>
    </div>
    <div id="container_blank">
    <div id="blank"><h2>Featured</h2>
    <div id="featured"></div>
    </div>
    </div>
    <div id="container_content">
    <div id="content">
    <?php print $content ?></div>
    </div>
    </div>
    <div id="container_footer">
    <div id="footer">
      <?php print $footer_message ?>
      <?php print $footer ?>
    </div>
    </div>
    <?php print $closure ?>
    </body>
    </html>

    template.php

    <?php
    // $Id: template.php,v 1.1.2.2 2008/03/08 14:59:54 jswaby Exp $
    drupal_add_js(drupal_get_path('theme', 'portfolio') . '/js/jquery.lavalamp-1.3.5.js', 'theme');
    drupal_add_js(drupal_get_path('theme', 'portfolio') . '/js/jquery.easing.1.3.js', 'theme');

    Have you tried?

    Just wondering if you have tried the following code:

    $(document).ready(function(){
      $(function() { $(".primary-links").lavaLamp({ speed: 500 })});
    });

    on second look

    5

    The code looks fine which leads me to believe it is a css issue. Perhaps we could work through it together. If you go to www.rawdesigners.com you can click on the meebo chat window. Perhaps I could help figure out what is wrong.

    Jon

    It seems you may be missing

    5

    It seems you may be missing some css like this:

    #demoNav li.backLava {
        background-color: #CDE2FF;
        position: absolute;
        width: 9px;
    }

    Got it

    3

    Oh I got it working all I had to do is download the older version of lavaLamp and easing. It seems like the latest version doesn't work well with drupal 6

    thanks

    5

    Could you list the working versions and or post the links to them? Which version of query? I want to make this a module. It would save me some time.

    version

    3

    easing 1.1 and lavalamp 1.2. I use the default jquery that comes with drupal 6

    druapl 7

    3

    can you make a tutorial for druapl 7? it seems like it doesn't work with drupal 7

    I just wrote some code

    5

    I just wrote some code building on the jquery eye candy module . If that has is teary for D7 then it should be a piece of cake.

    lavaLamp Patch finally created

    5

    Thanks Ruriko for the motivation to git er done. The patch is posted at http://drupal.org/node/248605#comment-4400072. Let me know how it works.

    Seeing it in action

    Just as an aside. You can see it in action at http://www.rawdesigners.com/more-eye-candy If you like the patch I'd really appreciate you going to http://www.facebook.com/Lansing.Web.Designer and "liking me"