01
01
caption

Mouse Hover Caption

02
02
caption
03
03
caption
04
04
caption

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>style.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>jquery.aw-showcase.min.js"></script>
<script>
	$(window).load(function() {
		$('#showcase').awShowcase({
			content_width:			400,
			content_height:			250,
			show_caption:			'onhover',
			thumbnails:				true,
			thumbnails_position:	'outside-last',
			thumbnails_direction:	'horizontal',
			thumbnails_slidex:		0
	});
</script>


/*オプション一覧 */
content_width:			700,
content_height:			470,
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:			true,
keybord_keys:			true,
mousetrace:				false, /* Trace x and y coordinates for the mouse */
pauseonover:			true,
stoponclick:			true,
transition:				'hslide', /* hslide/vslide/fade */
transition_delay:		300,
transition_speed:		500,
show_caption:			'onhover', /* onload/onhover/show */
thumbnails:				true,
thumbnails_position:	'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction:	'horizontal', /* vertical/horizontal */
thumbnails_slidex:		0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height:			false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change:			false, /* Set to true to prevent users from swithing more then one slide at once. */
viewline:				false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */ the width and height of images in the source. */
<div id="showcase" class="showcase">
	<div class="showcase-slide">
		<div class="showcase-content">
			<img src="<PATH>/img01.jpg" alt="01" />
		</div>
		<div class="showcase-thumbnail">
			<img src="<PATH>/img01.jpg" alt="01" width="150px" />
			<div class="showcase-thumbnail-caption">caption</div>
		</div>
		<div class="showcase-caption">
			<p>Mouse Hover Caption</p>
		</div>
	</div>
	<div class="showcase-slide">
		<div class="showcase-content">
			<img src="<PATH>/img02.jpg" alt="02" />
		</div>
		<div class="showcase-thumbnail">
			<img src="<PATH>/img02.jpg" alt="02" width="150px" />
			<div class="showcase-thumbnail-caption">caption</div>
		</div>
	</div>
	<div class="showcase-slide">
		<div class="showcase-content">
			<img src="<PATH>/img03.jpg" alt="03" />
		</div>
		<div class="showcase-thumbnail">
			<img src="<PATH>/img03.jpg" alt="03" width="150px" />
			<div class="showcase-thumbnail-caption">caption</div>
		</div>
	</div>
	<div class="showcase-slide">
		<div class="showcase-content">
			<img src="<PATH>/img04.jpg" alt="04" />
		</div>
		<div class="showcase-thumbnail">
			<img src="<PATH>/img04.jpg" alt="04" width="150px" />
			<div class="showcase-thumbnail-caption">caption</div>
		</div>
	</div>
</div>

AwkwardShowcaseについて

Awkward-Showcaseは、シンプルなスライダーからちょっと豪華なスライダーまで幅広く設定できるプラグインです。
サムネイルの縦横表示、マウスオーバーでのキャプション表示、youtubeのようなツールチップまでオプションで設定可能です。
ダウンロード こちら
ドキュメント こちら
デモ デモページはありません
ライセンスAttribution-ShareAlike 3.0 CC
対応ブラウザ

関連するjQueryプラグイン

  • SlidesJS

    SlidesJS

    シンプルなスライダー

  • MOVINGBOXES

    MOVINGBOXES

    ECサイトの商品ディスプレイ向き

  • FlexSlider

    FlexSlider

    簡単に多機能なスライダーを設置でき、豊富なオプションを備えている

  • Camera

    Camera

    足りないものはないんじゃないかというぐらい高機能なスライダー

  • Fathom

    Fathom

    プレゼン向きのスライダープラグイン