/Awkward-Showcase

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.

Primary LanguageJavaScript

Awkward Showcase - A jQuery Plugin

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

<!DOCTYPE html>
<html>
<head>
<title>Awkward Showcase - Demo #1</title>
<link rel="stylesheet" href="css/style.aw-showcase.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.aw-showcase.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $("#showcase").awShowcase(
    {
        content_width:  700,
        content_height: 470
    });
});
</script>
</head>
<body>

<div id="showcase" class="showcase">
    <!-- Each child div in #showcase represents a slide -->
    <div class="showcase-slide">
        <!-- Put the slide content in a div with the class .showcase-content -->
        <div class="showcase-content">
            <!-- If the slide contains multiple elements you should wrap them in a div with the class
            .showcase-content-wrapper. We usually wrap even if there is only one element,
            because it looks better. -->
            <div class="showcase-content-wrapper">
                <img src="images/01.jpg" alt="01" />
            </div>
        </div>
        <!-- Put the caption content in a div with the class .showcase-caption -->
        <div class="showcase-caption">
            The Caption
        </div>
        <!-- Put the tooltips in a div with the class .showcase-tooltips. -->
        <div class="showcase-tooltips">
            <!-- Each anchor in .showcase-tooltips represents a tooltip.
            The coords attribute represents the position of the tooltip. -->
            <a href="http://www.awkward.se" coords="634,130">
                <!-- The content of the anchor-tag is displayed in the tooltip. -->
                This is a tooltip that displays the anchor html in a nice way.
            </a>
            <a href="http://www.awkward.se" coords="356, 172">
                <!-- You can add multiple elements to the anchor-tag which are display in the tooltip. -->
                <img src="images/glasses.png" />
                <span style="display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;">
                    White Glasses: 500$
                </span>
            </a>
        </div>
    </div>
    <div class="showcase-slide">
        <div class="showcase-content">
            <div class="showcase-content-wrapper">
                Content...
            </div>
        </div>
    </div>
</div>

</body>
</html>

Configuration Options

Property Default Options
content_width 700
content_height 400
fit_to_parent false
auto false
interval 3000
continuous false
loading true
tooltip_width 200
tooltip_icon_width 32
tooltip_icon_height 32
tooltip_offsetx 18
tooltip_offsety 0
arrows true
buttons true
btn_numbers false
keybord_keys false
mousetrace false
pauseonover true
stoponclick true
transition: vslide 'vslide', 'hslide' or 'fade'
transition_delay: 300
transition_speed: 500
show_caption: onload 'onload', 'onhover' or 'show'
thumbnails: false
thumbnails_position: outside-last 'outside-last', 'outside-first', 'inside-last' or 'inside-first'
thumbnails_direction: vertical 'vertical' or 'horizontal'
thumbnails_slidex: 0 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc.
dynamic_height: false
speed_change: false
viewline: false
start_at: 0
custom_function null
custom_slide_function null