2014.03.15
jquery

画像と文字がスライドしたり開閉したりする必見jQueryプラグイン

jQuery　
・ ・ ・

jQueryのプラグインの中でもとてもユニークな動きをするスライドショーのプラグインを紹介します。
数枚の画像などを同時にスライドすることをカルーセルといいますが、今回もカルーセルプラグインの１つです。

CIRCULAR CONTENT CAROUSELというプラグイン。
jquery019

Circular Content Carousel

1.headにjqueryとプラグインを読み込む

jQuery本体

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

プラグイン

<script type="text/javascript" src="ファイルのパス/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="ファイルのパス/jquery.mousewheel.js"></script>
<script type="text/javascript" src="ファイルのパス/jquery.contentcarousel.js"></script>

今回メインのプラグインは一番最後のcontentcarouselというプラグインですが、easingとmousewheelのプラグインと共に使っています。

jQueryの読み込む上記の記述は、厳密に言うとheadにでなくても大丈夫です。

2. jQueryソース

bodyタグの直後に記述。

<script type="text/javascript">
$('#ca-container').contentcarousel();
</script>

jQuery本体とプラグインをheadに記述していない場合は、このjQueryのソースの記述場所に気を付けましょう。
プラグインよりも後に記述しないと動かないので注意が必要です。

3.CSSのソース

body {
	background:#373737;
}
.ca-container{
	position:relative;
	margin:25px auto 20px auto;
	width:900px;
	height:400px;
}
.ca-wrapper{
	width:100%;
	height:100%;
	position:relative;
}
.ca-item{
	position:relative;
	float:left;
	width:303px;
	height:100%;
	text-align:center;
}
.ca-more{
	position: absolute;
	bottom: 10px;
	right:0px;
	padding:4px 15px;
	font-weight:bold;
	background: #7ac9e3;
	text-align:center;
	color: #fff;
	font-family: "Georgia","Times New Roman",serif;
	font-style:italic;
	text-shadow:1px 1px 1px #000;
}
.ca-close{
	position:absolute;
	top:10px;
	right:10px;
	background:#fff url(画像のパス/cross.png) no-repeat center center;
	width:27px;
	height:27px;
	text-indent:-9000px;
	outline:none;
	-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
	box-shadow:1px 1px 2px rgba(0,0,0,0.2);
	opacity:0.7;
}
.ca-close:hover{
	opacity:1.0;
}
.ca-item-main{
	padding:10px;
	position:absolute;
	top:5px;
	left:1px;
	right:15px;
	bottom:5px;
	background:#262626;
	overflow:hidden;
	-moz-box-shadow:0px 0px 3px rgba(0,0,0,1.0),inset 0px 0px 5px rgba(255, 255, 255, 0.2);
	-webkit-box-shadow:0px 0px 3px rgba(0,0,0,1.0),inset 0px 0px 5px rgba(255, 255, 255, 0.2);
	box-shadow:0px 0px 3px rgba(0,0,0,1.0),inset 0px 0px 5px rgba(255, 255, 255, 0.2);
}
.ca-icon{
	width:250px;
	height:140px;
	position:relative;
	margin:5px auto;
}
.ca-item h3{
	font-family: "Georgia","Times New Roman",serif;
	font-style:italic;
	font-size:24px;
	color:#fff;
	margin:10px;
	text-align:center;
	text-shadow: 0px 1px 1px #000;
}
.ca-item .sub {
	font-size:12px;
	color:#fff;
	text-align:center;
	text-shadow: 0px 1px 1px #000;
	margin-bottom:20px;
	display:block;
}
.ca-item h4{
	font-family: "Georgia","Times New Roman",serif;
	font-style:italic;
	font-size:12px;
	text-align:left;
	border-left:10px solid #7ac9e3;
	padding-left:10px;
	line-height:24px;
	margin:10px;
	position:relative;
}
.ca-item h4 span{
	display:block;
	color:#8c8c8c;
	text-shadow: 0px 1px 1px #000;
}

.ca-content-wrapper{
	background:#464646;
	position:absolute;
	width:0px; /* expands to width of the wrapper minus 1 element */
	height:390px;
	top:5px;
	text-align:left;
	z-index:10000;
	overflow:hidden;
	-moz-box-shadow:0px 0px 3px rgba(0,0,0,1.0),inset 0px 0px 5px rgba(255, 255, 255, 0.3);
	-webkit-box-shadow:0px 0px 3px rgba(0,0,0,1.0),inset 0px 0px 5px rgba(255, 255, 255, 0.3);
	box-shadow:0px 0px 3px rgba(0,0,0,1.0),inset 0px 0px 5px rgba(255, 255, 255, 0.3);
}
.ca-content{
	padding:10px 20px 10px 5px;
	overflow:hidden;
}
.ca-content-text{
	font-size: 12px;
	margin:10px 20px;
	padding:10px 20px;
	line-height:24px;
	color:#fff;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
}
.ca-content-text p{
	padding-bottom:5px;
}
.ca-content h6{
	margin:25px 20px 0px 35px;
	font-size:28px;
	padding-bottom:5px;
	font-style: italic;
	font-family: "Georgia","Times New Roman",serif;
	color:#fff;
	border-bottom:2px solid #7ac9e3;
	text-shadow: 1px 1px 1px #7ac9e3;
}
.ca-content ul{
	margin:20px 35px 20px 0px;
	height:30px;
}
.ca-content ul li{
	float:left;
	margin:0px 2px;
	list-style:none;
}
.ca-content ul li a{
	color:#fff;
	background: #7ac9e3;
	padding:3px 6px;
	font-size:14px;
	font-family: "Georgia","Times New Roman",serif;
	font-style:italic;
	text-shadow:1px 1px 1px rgba(0,0,0,0.8);
}
.ca-content ul li a:hover{
	background:#fff;
	color:#000;
	text-shadow:none;
}
.ca-nav span{
	width:25px;
	height:38px;
	background:transparent url(画像のパス/arrows.png) no-repeat top left;
	position:absolute;
	top:50%;
	margin-top:-19px;
	left:-40px;
	text-indent:-9000px;
	opacity:0.7;
	cursor:pointer;
	z-index:100;
}
.ca-nav span.ca-nav-next{
	background-position:top right;
	left:auto;
	right:-40px;
}
.ca-nav span:hover{
	opacity:1.0;
}

閉じるボタン、前へ次へのナビボタンは画像を使ってます。

4.HTMLソース

jquery020
まずは、上記の画像の部分のみのソースです。
これが1つの単位でスライドする仕組み。

  <div class="ca-item">
    <div class="ca-item-main">
      <div class="ca-icon"><img src="http://ri-mode.com/photos/files/2014/02/flower025-250x140.jpg"></div>
      <h3>Gerbera</h3>
      <span class="sub">ガーベラ</span>
      <h4><span>Gerbera  is a genus of ornamental plants from the sunflower family (Asteraceae).</span></h4>
      <a href="#" class="ca-more" title="詳しくはこちら">more...</a>
    </div>
    <div class="ca-content-wrapper">
       <div class="ca-content">
         <h6>Innocence, modesty and purity</h6>
         <a href="#" class="ca-close">close</a>
         <div class="ca-content-text">
           <p>ガーベラの花言葉は「希望」「辛抱強さ」「神秘」「崇高美」</p>
           <p>ガーベラ (Gerbera) は、キク科ガーベラ属に属する植物の総称。多年草。別名アフリカセンボンヤリ。温帯な地域および、熱帯アジアやアフリカなどに分布し、野生で約40種が存在する（特に南アフリカが多い）。花のもちが良く、フラワーアレンジメントでも比較的多く用いられる。花色はピンク、赤、白、黄色、緑、オレンジなど豊富にある。発見者であるドイツの自然学者ゲルバー（de:Traugott Gerber）の名前からとられた。</p>
         </div>
         <ul>
            <li><a href="#" title="もっと読む">Read more</a></li>
            <li><a href="#" title="シェアする">Share this</a></li>
            <li><a href="#" title="会員になる">Become a member</a></li>
            <li><a href="#" title="寄付する">Donate</a></li>
         </ul>
       </div>
    </div>

今回のサンプルでは5個の画像とその文章をスライドさせているので、単純に言ってしまうと上記のソースを5回コピペして、画像と文章等のみ変更している、という状態です。

ソースが長くなるので省略しますが、以下のようにしてみてください。

<div id="ca-container" class="ca-container">
   <div class="ca-wrapper">

上記のHTMLを5回コピペして画像と文字を変更

   </div>
</div>

5. プラグインソース変更

今回はCSSを若干カスタマイズしたので、最初に読み込んだjquery.contentcarousel.jsの中のソースを2か所だけ変更しました。

54行目と80行目を変更しています。

変更前

width	: cache.itemW * 2 + 'px',

変更後

width	: cache.itemW * 2 - 10 + 'px',
jQuery　
・ ・ ・
関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


人気の記事
  1. CMYKで印刷すると特色のゴールドのような色になる配色
  2. 革パターン
    【PSD,AI,JPG】 無料で使える革・レザー調の素材全部で250種類以上
  3. シンプルなソース・CSSだけでアニメーション・ドロップダウンメニュー
  4. DTP 文字の大きさと配置の目安
  5. CSS3 アニメーションの基礎 @keyframes transform
最新の記事
人気記事プラグインなし
【WordPress】プラグインなしで人気の記事をランキングで載せる方法
カスタム投稿タイプ デフォルト値
カスタム投稿タイプを作るときに参考になるデフォルト値
ロゴデザインをするときに大切な7つのポイント
ロゴデザインの参考にしたい素敵なロゴ100選
jQueryで特定のCSSの表示を遅くする方法
カテゴリー
タグ
CSS3 FB IE MT PHP WPテクニック WPテーマ作成 WPプラグイン アニメーション ウェブデザイン サムネイル サンプルあり スライドショー フォント フォーム フリー素材 プラグイン マウスオーバー メニュー リスト表示 レイアウト ロゴ 印刷・DTP 参考サイト 画像 色・配色
おすすめの本
ネットで調べればなんとかなる！という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
役立つリンク 相互リンク
TO TOP