Current Directory: /home/astoriaah/www/old15/media/widgetkit/widgets/lightbox/layouts
Viewing File: /home/astoriaah/www/old15/media/widgetkit/widgets/lightbox/layouts/dashboard.php
<li id="lightbox" data-name="Lightbox">
<div class="info">
The Lightbox allows you to view images, HTML and multi-media content on a dark dimmed overlay for without having to leave the current page. <a href="#" class="howtouse">How to use...</a>
<div class="howtouse">
<p>Use the HTML5 custom data attribute <code>data-lightbox</code> to activate the lightbox. For example:</p>
<pre><a <code>data-lightbox="on"</code> href="image_lb.jpg"><img src="image.jpg" width="180" height="120" alt="" /></a></pre>
<p>If you want to create a group for your images or videos use the <code>group</code> parameter. For example:</p>
<pre><a <code>data-lightbox="group:mygroup"</code> href="image1_lb.jpg"><img src="image1.jpg" width="180" height="120" alt="" /></a>
<a <code>data-lightbox="group:mygroup"</code> href="image2_lb.jpg"><img src="image2.jpg" width="180" height="120" alt="" /></a></pre>
<p>Use inline elements as source for content. For example:</p>
<pre><a <code>data-lightbox="on"</code> href="<code>#element-id</code>">Lightbox</a></pre>
<p>You can set various other lightbox parameters to the data attribute. For example:</p>
<pre><a <code>data-lightbox="transitionIn:elastic;transitionOut:elastic;"</code> href="http://www.wikipedia.org">Lightbox</a></pre>
<p>Here is a list of common parameters:</p>
<ul>
<li><strong>titlePosition</strong> - How should the titlte show up? (<code>float</code>, <code>outside</code>, <code>inside</code> or <code>over</code>)</li>
<li><strong>transitionIn</strong> - Set a opening transition. (<code>fade</code>, <code>elastic</code>, or <code>none</code>)</li>
<li><strong>transitionOut</strong> - Set a closing transition (<code>fade</code>, <code>elastic</code>, or <code>none</code>)</li>
<li><strong>overlayShow</strong> - Set to <code>true</code> or <code>false</code></li>
<li><strong>width</strong> - Set a width in pixel</li>
<li><strong>height</strong> - Set a height in pixel</li>
<li><strong>padding</strong> - Set a padding in pixel</li>
</ul>
</div>
</div>
<div class="config">
<form method="post" action="<?php echo $this['system']->link(array('task' => 'config_lightbox', 'ajax' => true)); ?>">
<ul class="properties">
<li class="separator">Settings</li>
<?php
foreach ($xml->settings->setting as $setting) {
$name = (string) 'lightbox_'.$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>