Your IP : 216.73.216.170
<li id="spotlight" data-name="Spotlight">
<div class="info">
The Spotlight allows you to add an overlay to your images which fades or moves in on mouse hover. The overlay can be an image or HTML content. <a href="#" class="howtouse">How to use...</a>
<div class="howtouse">
<p>Use the HTML5 custom data attribute <code>data-spotlight</code> to activate the spotlight. For example:</p>
<pre><a <code>data-spotlight="on"</code> href="mypage.html"><img src="image.jpg" width="180" height="120" alt="" /></a></pre>
<p>To create a custom overlay use a div element with the CSS class <code>overlay</code>. You can set the effect parameter to the data attribute. For example:</p>
<pre><a <code>data-spotlight="effect:bottom;"</code> href="mypage.html">
<img src="image.jpg" width="180" height="120" alt="" />
<div <code>class="overlay"</code>>Custom Overlay</div>
</a></pre>
<p>You can set the effect parameter to <code>fade</code>, <code>bottom</code>, <code>top</code>, <code>right</code> or <code>left</code>.
</div>
</div>
<div class="config">
<form method="post" action="<?php echo $this['system']->link(array('task' => 'config_spotlight', 'ajax' => true)); ?>">
<ul class="properties">
<li class="separator">Settings</li>
<?php
foreach ($xml->settings->setting as $setting) {
$name = (string) 'spotlight_'.$setting->attributes()->name;
$type = (string) $setting->attributes()->type;
$label = (string) $setting->attributes()->label;
$value = (string) $this['system']->options->has($name) ? $this['system']->options->get($name) : (string) $setting->attributes()->default;
echo '<li>';
echo '<div class="wlabel">'.$label.'</div>';
echo '<div class="field">'.$this['field']->render($type, $name, $value, $setting).'</div>';
echo '<div class="description">'.$setting->attributes()->description.'</div>';
echo '</li>';
}
?>
</ul>
<p>
<input type="submit" value="Save changes" class="button-primary"/><span></span>
</p>
</form>
</div>
</li>