Awkward Showcase -

, . , .

:

  • .
  • X Y-.
  • , , .
  • .
  • .
  • CSS.
  • HTML .

 

HTML

<div id="showcase" class="showcase">
 <!--   #showcase  div -->
 <div class="showcase-slide">
 <!--     div   .showcase-content -->
 <div class="showcase-content">
 <!--     ,      div  
 .showcase-content-wrapper.       -    . -->
 <div class="showcase-content-wrapper">
 <img src="images/01.jpg" alt="01" />
 </div>
 </div>
 <!--    div   .showcase-caption -->
 <div class="showcase-caption">
 
 </div>
 <!--    div   .showcase-tooltips. -->
 <div class="showcase-tooltips">
 <!--    .showcase-tooltips   .  coords      -->
 <a href="#" coords="356,50">
 <!--  -   . -->
 
 </a>
 <a href="#" coords="240,420">
   Sorlandet    1927 . 
 </a>
 <a href="#" coords="420, 420">
 <!--     -,     . -->
 <img src="images/sorlandet.jpg" />
 <span style="display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;">
 
 </span>
 </a>
 </div>
 </div>
 <div class="showcase-slide">
 <div class="showcase-content">
 <div class="showcase-content-wrapper">
 ...
 </div>
 </div>
 </div>
</div>

CSS

, :

#awOnePageButton .view-slide
{
 display: none;
}

/* This class is removed after the showcase is loaded */
/* Assign the correct showcase height to prevent loading jumps in IE */
.showcase-load
{
 height: 470px; /* Same as showcase javascript option */
 overflow: hidden;
}

/* Container when content is shown as one page */
.showcase-onepage
{
 /**/
}

/* Container when content is shown in slider */
.showcase
{
 position: relative;
 margin: auto;
}

 .showcase-content-container
 {
 background-color: #000;
 }
 
 /* Navigation arrows */
 .showcase-arrow-previous, .showcase-arrow-next
 {
 position: absolute;
 background: url('/images/arrows.png');
 width: 33px;
 height: 33px;
 top: 220px;
 cursor: pointer;
 }
 
 .showcase-arrow-previous
 {
 left: -60px;
 }
 
 .showcase-arrow-previous:hover
 {
 background-position: 0px -34px;
 }
 
 .showcase-arrow-next
 {
 right: -56px;
 background-position: -34px 0;
 }
 
 .showcase-arrow-next:hover
 {
 background-position: -34px -34px;
 }
 
 /* Content */
 .showcase-content
 {
 background-color: #000;
 text-align: center;
 }
 
 .showcase-content-wrapper
 {
 text-align: center;
 height: 470px;
 width: 700px;
 display: table-cell;
 vertical-align: middle;
 }
 
 /* Styling the tooltips */
 .showcase-plus-anchor
 {
 background-image: url('/images/plus.png');
 background-repeat: no-repeat;
 }
 
 .showcase-plus-anchor:hover
 {
 background-position: -32px 0;
 }
 
 div.showcase-tooltip
 {
 background-color: #fff;
 color: #000;
 text-align: left;
 padding: 5px 8px;
 background-image: url(/images/white-opacity-80.png);
 }
 
 /* Styling the caption */
 .showcase-caption
 {
 color: #000;
 padding: 8px 15px;
 text-align: left;
 position: absolute;
 bottom: 10px; left: 10px; right: 10px;
 display: none;
 background-image: url(/images/white-opacity-80.png);
 }
 
 .showcase-onepage .showcase-content
 {
 margin-bottom: 10px;
 }
 
 /* Button Wrapper */
 .showcase-button-wrapper
 {
 clear: both;
 margin-top: 10px;
 text-align: center;
 }
 
 .showcase-button-wrapper span
 {
 margin-right: 3px;
 padding: 2px 5px 0px 5px;
 cursor: pointer;
 font-size: 12px;
 color: #444444;
 }
 
 .showcase-button-wrapper span.active
 {
 color: #fff;
 }
 
 /* Thumbnails */
 .showcase-thumbnail-container /* Used for backgrounds, no other styling!!! */
 {
 background-color: #000;
 }
 
 .showcase-thumbnail-wrapper
 {
 overflow: hidden;
 }
 
 .showcase-thumbnail
 {
 width: 120px;
 height: 90px;
 cursor: pointer;
 border: solid 1px #333;
 position: relative;
 }
 
 .showcase-thumbnail-caption
 {
 position: absolute;
 bottom: 2px;
 padding-left: 10px;
 padding-bottom: 5px;
 }
 
 .showcase-thumbnail-content
 {
 padding: 10px;
 text-align: center;
 padding-top: 25px;
 }
 
 .showcase-thumbnail-cover
 {
 background-image: url(/images/black-opacity-40.png);
 position: absolute;
 top: 0; bottom: 0; left: 0; right: 0;
 }
 
 .showcase-thumbnail:hover
 {
 border: solid 1px #999;
 }
 
 .showcase-thumbnail:hover .showcase-thumbnail-cover
 {
 display: none;
 }
 
 .showcase-thumbnail.active
 {
 border: solid 1px #999;
 }
 
 .showcase-thumbnail.active .showcase-thumbnail-cover
 {
 display: none;
 }
 
 .showcase-thumbnail-wrapper-horizontal
 {
 padding: 10px;
 }
 
 .showcase-thumbnail-wrapper-horizontal .showcase-thumbnail
 {
 margin-right: 10px;
 width: 116px;
 }
 
 .showcase-thumbnail-wrapper-vertical
 {
 padding: 10px;
 }
 
 .showcase-thumbnail-wrapper-vertical .showcase-thumbnail
 {
 margin-bottom: 10px;
 }
 
 .showcase-thumbnail-button-backward,
 .showcase-thumbnail-button-forward
 {
 padding: 7px;
 cursor: pointer;
 }
 
 .showcase-thumbnail-button-backward
 {
 padding-bottom: 0px;
 padding-right: 0px;
 }
 
 .showcase-thumbnail-button-backward .showcase-thumbnail-vertical,
 .showcase-thumbnail-button-forward .showcase-thumbnail-vertical,
 .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal,
 .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal
 {
 background-image: url(/images/arrows-small.png);
 background-repeat: no-repeat;
 display: block;
 width: 17px;
 height: 17px;
 }
 
 .showcase-thumbnail-button-backward .showcase-thumbnail-vertical
 {
 background-position: 0 -51px;
 margin-left: 55px;
 }
 .showcase-thumbnail-button-backward:hover .showcase-thumbnail-vertical
 {
 background-position: -17px -51px;
 }
 
 .showcase-thumbnail-button-forward .showcase-thumbnail-vertical
 {
 background-position: 0 -34px;
 margin-left: 55px;
 }
 .showcase-thumbnail-button-forward:hover .showcase-thumbnail-vertical
 {
 background-position: -17px -34px;
 }
 
 .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal
 {
 background-position: 0 -17px;
 margin-top: 40px;
 margin-bottom: 40px;
 }
 .showcase-thumbnail-button-backward:hover .showcase-thumbnail-horizontal
 {
 background-position: -17px -17px;
 }
 
 .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal
 {
 background-position: 0 0;
 margin-top: 40px;
 margin-bottom: 40px;
 }
 .showcase-thumbnail-button-forward:hover .showcase-thumbnail-horizontal
 {
 background-position: -17px 0;
 }
 
 /* Hide button text */
 .showcase-thumbnail-button-forward span span,
 .showcase-thumbnail-button-backward span span
 {
 display: none;
 }

javascript

jQuery :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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>

  •     content_width (default: 700)
  •     content_height (default: 400)
  •     hundred_percent (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)
  •     transition: (default: ‘vslide’) (options: ‘vslide’, ‘hslide’ ‘fade’)
  •     transition_delay: (default: 300)
  •     transition_speed: (default: 500)
  •     show_caption: (default: ‘onload’) (options: ‘onload’, ‘onhover’ ‘show’)
  •     thumbnails: (default: false)
  •     thumbnails_position: (default: ‘outside-last’) (options: ‘outside-last’, ‘outside-first’, ‘inside-last’ ‘inside-first’)
  •     thumbnails_direction: (default: ‘vertical’) (options: ‘vertical’ ‘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)

: 829
629,32 Kb
?