Examples

  1. Default
  2. Margins
  3. Set on Click
  4. Set Active Element
  5. Dynamic Content
  6. Delay Animation
  7. Animate on Focus
  8. Animate on Decendant Focus

Default

Creates a div that animates when you mouse over sibling elements.

dandelion seeds lake park bike
	<div id="default">
		<img src="/images/demo/103332256.jpg" alt="dandelion seeds" class="active" />
		<img src="/images/demo/104209996.jpg" alt="lake" />
		<img src="/images/demo/146672189.jpg" alt="park" />
		<img src="/images/demo/sb10065850n-001.jpg" alt="bike" />
	</div>
	
$('#default').lavalamp();

Margins

Calculates margins when determining the width and height of the lava lamp object.

dandelion seeds lake park bike
	<div id="margins">
		<img src="/images/demo/103332256.jpg" alt="dandelion seeds" class="active" />
		<img src="/images/demo/104209996.jpg" alt="lake" />
		<img src="/images/demo/146672189.jpg" alt="park" />
		<img src="/images/demo/sb10065850n-001.jpg" alt="bike" />
	</div>
	
$('#margins').lavalamp({
	margins:true
});

Set on Click

The lava lamp object sets a new active element when you click on it.

dandelion seeds lake park bike
	<div id="setonclick">
		<img src="/images/demo/103332256.jpg" alt="dandelion seeds" class="active" />
		<img src="/images/demo/104209996.jpg" alt="lake" />
		<img src="/images/demo/146672189.jpg" alt="park" />
		<img src="/images/demo/sb10065850n-001.jpg" alt="bike" />
	</div>
	
$('#setonclick').lavalamp({
	setOnClick:true
});

Set Active Element

You can change the current active element by passing it into the wrapper data. After setting the data, you need to update the wrapper so your lavalamp object moves to the correct element.

dandelion seeds lake park bike
	<div id="setactive">
		<img src="/images/demo/103332256.jpg" alt="dandelion seeds" class="active" />
		<img src="/images/demo/104209996.jpg" alt="lake" />
		<img src="/images/demo/146672189.jpg" alt="park" />
		<img src="/images/demo/sb10065850n-001.jpg" alt="bike" />
	</div>
	
<select id="setactive-links">
	<option selected="selected" value="0">Item 1</option>
	<option selected="selected" value="1">Item 2</option>
	<option selected="selected" value="2">Item 3</option>
	<option selected="selected" value="3">Item 4</option>
</select>
$('#setactive').lavalamp({
	easing: 'easeOutBack'
});
$('#setactive-links').change(function() {
	var v = $(this).val();
	var a = $('#setactive').children('.lavalamp-item').eq(v);
	
	$('#setactive').data('lavalampActive',a).lavalamp('update');
});

Dynamic Content

This plugin isn't "live"; it doesn't detect changes to your content after initialization. If you do change your content with JavaScript, you will have to update the plugin to re-index the items.

dandelion seeds lake park bike

Add Items | Update Plugin

	<div id="update">
		<img src="/images/demo/103332256.jpg" alt="dandelion seeds" class="active" />
		<img src="/images/demo/104209996.jpg" alt="lake" />
		<img src="/images/demo/146672189.jpg" alt="park" />
		<img src="/images/demo/sb10065850n-001.jpg" alt="bike" />
	</div>
	
<p><a href="#" id="add-items">Add Items</a> | <a href="#" id="update-plugin">Update Plugin</a></p>
<p id="update-info"></p>
<div id="update-pager"></div>
$('#update').lavalamp();
$('#add-items').click(function(e) {
	var wrapper = $('#update');
	for (var i = 0; i < 10; i++) {
		wrapper.append('<img src="http://lorempixel.com/50/30/" alt="placeholder" width="50" height="30" />');
	}
	e.preventDefault();
});
$('#update-plugin').click(function(e) {
	$('#update').lavalamp('update');
	e.preventDefault();
});

Delay Animation

You can put a delay before and after hover states.

dandelion seeds lake park bike
	<div id="delay">
		<img src="/images/demo/103332256.jpg" alt="dandelion seeds" class="active" />
		<img src="/images/demo/104209996.jpg" alt="lake" />
		<img src="/images/demo/146672189.jpg" alt="park" />
		<img src="/images/demo/sb10065850n-001.jpg" alt="bike" />
	</div>
	
$('#delay').lavalamp({
	easing: 'easeOutBack',
	delayOn: 500,
	delayOff: 1000
});

Animate on Focus

Lavalamp object animates on object focus.


<div id="focus">
    <a href="#1" style="display:block;padding:20px;"></a>
    <a href="#2" style="display:block;padding:20px;"></a>
    <a href="#3" style="display:block;padding:20px;"></a>
    <a href="#4" style="display:block;padding:20px;"></a>
</div>
$('#focus').lavalamp({
	easing: 'easeOutBack',
	enableFocus: true
});

Animate on Decendant Focus

Lavalamp object moves on focus of decendants.


<div id="focus-deep">
    <div style="padding:20px;"><input type="text" name="input[]" /></div>
    <div style="padding:20px;"><input type="text" name="input[]" /></div>
    <div style="padding:20px;"><input type="text" name="input[]" /></div>
    <div style="padding:20px;"><input type="text" name="input[]" /></div>
</div>
$('#focus-deep').lavalamp({
	easing: 'easeOutBack',
	deepFocus: true
});