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.
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.
<!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>
| 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 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent