joomla template, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, mootools, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, jQuery, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, mootools, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart
Awkward Showcase is a plugin for the JavaScript Framework jQuery. We call it a Content Slider. But it can do more then just slide the content. For example you can add tooltips, enable thumbnails, activate dynamic height and lots more.
Since version 1.0 it’s integrated with our Viewline Plugin enabling new innovative ways for displaying content on your website.
Some Nice Features
Compatibility
Compatible with all the Major Browsers (Win & Mac).
Captions
Advanced positioning with different animations.
Tooltips
Position tooltips based on x- and y-coordinates.
Thumbnails
Enable thumbnails, both horizontal and vertical.
100% CSS
The look of Awkward Showcase is 100% customizable via CSS.
View Modes
Different View Modes (now integrated with Viewline).
Dynamic Height
Enabling the showcase to change height based on content.
Easy Implementations
The showcase i easy to implement and very easy to customize in CSS.
Lots more
A slide can contain any type of HTML element. It’s an infinity slide. Etc.
Implementation Example
<code class="htmlscript plain"></code>
<code class="htmlscript plain"><</code><code class="htmlscript keyword">html</code><code class="htmlscript plain">></code>
<code class="htmlscript plain"><</code><code class="htmlscript keyword">head</code><code class="htmlscript plain">></code>
<code class="htmlscript plain"><</code><code class="htmlscript keyword">title</code><code class="htmlscript plain">>Awkward Showcase - Demo #1</</code><code class="htmlscript keyword">title</code><code class="htmlscript plain">></code>
<code class="htmlscript plain"><</code><code class="htmlscript keyword">link</code> <code class="htmlscript color1">rel</code><code class="htmlscript plain">=</code><code class="htmlscript string">"stylesheet"</code> <code class="htmlscript color1">href</code><code class="htmlscript plain">=</code><code class="htmlscript string">"css/style.aw-showcase.css"</code> <code class="htmlscript plain">/></code>
<code class="htmlscript plain"><</code><code class="htmlscript keyword">script</code> <code class="htmlscript color1">type</code><code class="htmlscript plain">=</code><code class="htmlscript string">"text/javascript"</code> <code class="htmlscript color1">src</code><code class="htmlscript plain">=</code><code class="htmlscript string">"https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"</code><code class="htmlscript plain">></</code><code class="htmlscript keyword">script</code><code class="htmlscript plain">></code>
<code class="htmlscript plain"><</code><code class="htmlscript keyword">script</code> <code class="htmlscript color1">type</code><code class="htmlscript plain">=</code><code class="htmlscript string">"text/javascript"</code> <code class="htmlscript color1">src</code><code class="htmlscript plain">=</code><code class="htmlscript string">"jquery.aw-showcase.min.js"</code><code class="htmlscript plain">></</code><code class="htmlscript keyword">script</code><code class="htmlscript plain">></code>
<code class="htmlscript plain"><</code><code class="htmlscript keyword">script</code> <code class="htmlscript color1">type</code><code class="htmlscript plain">=</code><code class="htmlscript string">"text/javascript"</code><code class="htmlscript plain">></code>
<code class="htmlscript plain">$(document).ready(function()</code>
<code class="htmlscript plain">{</code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain">$("#showcase").awShowcase(</code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain">{</code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain">content_width: 700,</code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain">content_height: 470</code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain">});</code>
<code class="htmlscript plain">});</code>
<code class="htmlscript plain"></</code><code class="htmlscript keyword">script</code><code class="htmlscript plain">></code>
<code class="htmlscript plain"></</code><code class="htmlscript keyword">head</code><code class="htmlscript plain">></code>
<code class="htmlscript plain"><</code><code class="htmlscript keyword">body</code><code class="htmlscript plain">></code>
<code class="htmlscript plain"><</code><code class="htmlscript keyword">div</code> <code class="htmlscript color1">id</code><code class="htmlscript plain">=</code><code class="htmlscript string">"showcase"</code> <code class="htmlscript color1">class</code><code class="htmlscript plain">=</code><code class="htmlscript string">"showcase"</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript comments"></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">div</code> <code class="htmlscript color1">class</code><code class="htmlscript plain">=</code><code class="htmlscript string">"showcase-slide"</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript comments"></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">div</code> <code class="htmlscript color1">class</code><code class="htmlscript plain">=</code><code class="htmlscript string">"showcase-content"</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript comments"><!-- If the slide contains multiple elements you should wrap them in a div with the class</code>
<code class="htmlscript spaces"> </code><code class="htmlscript comments">.showcase-content-wrapper. We usually wrap even if there is only one element,</code>
<code class="htmlscript spaces"> </code><code class="htmlscript comments">because it looks better. --></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">div</code> <code class="htmlscript color1">class</code><code class="htmlscript plain">=</code><code class="htmlscript string">"showcase-content-wrapper"</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">img</code> <code class="htmlscript color1">src</code><code class="htmlscript plain">=</code><code class="htmlscript string">"images/01.jpg"</code> <code class="htmlscript color1">alt</code><code class="htmlscript plain">=</code><code class="htmlscript string">"01"</code> <code class="htmlscript plain">/></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"></</code><code class="htmlscript keyword">div</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"></</code><code class="htmlscript keyword">div</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript comments"></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">div</code> <code class="htmlscript color1">class</code><code class="htmlscript plain">=</code><code class="htmlscript string">"showcase-caption"</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain">The Caption</code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"></</code><code class="htmlscript keyword">div</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript comments"></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">div</code> <code class="htmlscript color1">class</code><code class="htmlscript plain">=</code><code class="htmlscript string">"showcase-tooltips"</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript comments"><!-- Each anchor in .showcase-tooltips represents a tooltip.</code>
<code class="htmlscript spaces"> </code><code class="htmlscript comments">The coords attribute represents the position of the tooltip. --></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">a</code> <code class="htmlscript color1">href</code><code class="htmlscript plain">=</code><code class="htmlscript string">"http://www.awkward.se"</code> <code class="htmlscript color1">coords</code><code class="htmlscript plain">=</code><code class="htmlscript string">"634,130"</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript comments"></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain">This is a tooltip that displays the anchor html in a nice way.</code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"></</code><code class="htmlscript keyword">a</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">a</code> <code class="htmlscript color1">href</code><code class="htmlscript plain">=</code><code class="htmlscript string">"http://www.awkward.se"</code> <code class="htmlscript color1">coords</code><code class="htmlscript plain">=</code><code class="htmlscript string">"356, 172"</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript comments"></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">img</code> <code class="htmlscript color1">src</code><code class="htmlscript plain">=</code><code class="htmlscript string">"images/glasses.png"</code> <code class="htmlscript plain">/></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">span</code> <code class="htmlscript color1">style</code><code class="htmlscript plain">=</code><code class="htmlscript string">"display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;"</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain">White Glasses: 500$</code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"></</code><code class="htmlscript keyword">span</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"></</code><code class="htmlscript keyword">a</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"></</code><code class="htmlscript keyword">div</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"></</code><code class="htmlscript keyword">div</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">div</code> <code class="htmlscript color1">class</code><code class="htmlscript plain">=</code><code class="htmlscript string">"showcase-slide"</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">div</code> <code class="htmlscript color1">class</code><code class="htmlscript plain">=</code><code class="htmlscript string">"showcase-content"</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">div</code> <code class="htmlscript color1">class</code><code class="htmlscript plain">=</code><code class="htmlscript string">"showcase-content-wrapper"</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain">Content...</code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"></</code><code class="htmlscript keyword">div</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"></</code><code class="htmlscript keyword">div</code><code class="htmlscript plain">></code>
<code class="htmlscript spaces"> </code><code class="htmlscript plain"></</code><code class="htmlscript keyword">div</code><code class="htmlscript plain">></code>
<code class="htmlscript plain"></</code><code class="htmlscript keyword">div</code><code class="htmlscript plain">></code>
<code class="htmlscript plain"></</code><code class="htmlscript keyword">body</code><code class="htmlscript plain">></code>
<code class="htmlscript plain"></</code><code class="htmlscript keyword">html</code><code class="htmlscript plain">></code>
Configuration Options
content_width (default: 700)
content_height (default: 400)
fit_to_parent (default: false)
auto (default: false)
interval (default: 3000)
continuous (default: false)
loading (default: true)
tooltip_width (default: 200)
tooltip_icon_width (default: 32)
tooltip_icon_height (default :32)
tooltip_offsetx (default: 18)
tooltip_offsety (default: 0)
arrows (default: true)
buttons (default: true)
btn_numbers (default: false)
keybord_keys (default: false)
mousetrace (default: false)
pauseonover (default: true)
stoponclick (default: true)
transition: (default: ‘vslide’) (options: ‘vslide’, ‘hslide’ or ‘fade’)
transition_delay: (default: 300)
transition_speed: (default: 500)
show_caption: (default: ‘onload’) (options: ‘onload’, ‘onhover’ or ‘show’)
thumbnails: (default: false)
thumbnails_position: (default: ‘outside-last’) (options: ‘outside-last’, ‘outside-first’, ‘inside-last’ or ‘inside-first’)
thumbnails_direction: (default: ‘vertical’) (options: ‘vertical’ or ‘horizontal’)
thumbnails_slidex: (default: 0) (options: 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc.)
dynamic_height: (default: false)
speed_change: (default: false)
viewline: (default: false)
custom_function: (default: null)
Download:download.awkwardgroup.com/jquery.aw-showcase.1.1.1.zip
