カスタマイズができるスライドショーを設置する方法。diapoを使用。
今回は、スライドショーを設置してみました。
ホームページにスライドショーを設置するのは、当たり前になってきました。
スライドショーと言っても色々な種類があります。
どんなスライドショーがいいのかな？なんて調べているうちに、いろいろありすぎて、結局わかんなくなってしまう事もあると思います。
そこで今回は、カスタマイズがしやすく、なおかつわかりやすいスライドショーを使ってみました。
今回は、diapoというスライドショーを使用してみました。
このスライドショーは、画像の上にテキストを書くことができます。
そして、画像切り替えの秒数や、切り替えの時のエフェクト（動き）など、変更する所が一覧になって変更しやすくなっています。
まずは、デモを用意しましたので、見てください。
デモ01
こちらが、今回の参考もとになります。
Diapo | a free jQuery slideshow by Pixedelic
画像の上にテキストを書いたり、動画を埋め込んだり、画像や動画ではなくて、htmlも書くことができとても便利ではないかと思います。
以下に、ソースを記載します。
今回使用する、スタイルシートは、
index.css（スライドショー以外の部分）
diapo.css（スライドショー専用）
以上の2つを使用します。
scriptは、
jquery-1.4.4.min.js
diapo.js
jquery.easing.1.3.js
jquery.hoverIntent.minified.js
jquery.mobile-1.0rc2.customized.min.js
以上の5つを使用します。
今回scriptを多く使用しますが、主に、diapo.jsだけが、変更する際に使用します。
あとは、変更することは、ほとんどありません。
以上の7つのファイルと
<script type="text/javascript">
$(function(){
$('.pix_diapo').diapo();
});
</script>
をhtmlに記載します。
以下がindex.htmlのファイルです。
index.htmlファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<title>カスタマイズがしやすいスライドショーを設置する方法。</title>
<meta charset="UTF-8" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/diapo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="main_area">
<div class="pix_diapo">
<div data-thumb="images/thumbs/megamind1048.jpg"><!--←サムネイル指定はここ-->
<img src="images/slides/megamind1048.jpg" alt="画像名" />
<div class="caption elemHover fromLeft">
テキストはここに記入してください。<br />選択ボタンのこのサムネイル表示画像は、<font color="#ff0000">images/thumbs/megamind1048.jpgです。</font>
</div>
</div>
<div data-thumb="images/thumbs/megamind_07.jpg">
<a href="index.html"><img src="images/slides/megamind_07.jpg" alt="画像名" /></a>
<div class="caption elemHover fromLeft" style="bottom:100px;">
テキスト開始の合図は、<font color="#ff0000">"caption elemHover fromLeft"</font>このように指定すれば、左から出てきます。
</div>
<div class="caption elemHover fromRight" style="bottom:5px;">
また、<font color="#ff0000">"caption elemHover fromRight"</font>と指定すれば、右からでてきます。<br /><font color="#ffff00">注意。両方から、テキストを出す際は、かぶってしまうのでstyle="bottom:5px;"などで表示位置をずらして回避してください。</font>
</div>
<div class="caption elemHover fromTop" style="top:40px; left:100px; width:250px;">
<font color="#ff0000">"caption elemHover fromTop"</font><br />と指定すれば、上からでてきます。
</div>
<div class="caption elemHover fromBottom" style="top:40px; right:100px; width:250px;">
<font color="#ff0000">"caption elemHover fromBottom"</font><br />と指定すれば、下からでてきます。
</div>
</div>
<div data-thumb="images/thumbs/wall-e.jpg" data-time="7000"><!--←data-timeを指定すればローディング時間が指定できます。-->
<img src="images/slides/wall-e.jpg" alt="画像名" />
<div class="elemHover caption fromLeft" style="bottom:350px; left:350px; width:200px;">
このようにstyleの中にwidth指定して、widthが調整できます。
</div>
<div class="elemHover caption fromTop" data-easing="easeOutElastic" style="bottom:78px; width:200px;">
このように<font color="#ff0000">easing</font>を指定すれば、登場アクション変更も可能。
</div>
<div class="elemHover caption fromBottom" data-easing="easeOutElastic" style="right:0px; bottom:78px; width:400px;">
このように登場アクションの時間変更も可能。<br />編集箇所は、diapo.jsの1109行目からです。<br /><font color="#ffff00">※動きに差をつける為fromBottomのみ遅く設定しています。でデフォルトに戻す際は、diapo.jsファイルの1118行目179桁の数字を1.2から0.2に戻してください。</font>
</div>
<div class="elemHover fadeIn" style="left:600px; bottom:auto; top:0;">
<font color="#ff0000">"elemHover fadeIn"</font>と指定すればフレームなしのテキストも可能。
</div>
</div>
<div data-thumb="images/thumbs/up-official-trailer-fake.jpg">
<iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="images/slides/up-official-trailer-fake.jpg" frameborder="0"></iframe>
<div class="elemHover caption fromLeft elemToHide" style="bottom: 350px; width:auto;">
このように動画も埋め込むことができます。<br /><font color="#ff0000">elemToHideを指定することによって、再生時にテキストが消えます。</font>
</div>
</div>
<div data-thumb="images/thumbs/big_buck_bunny.jpg">
<div style="position:absolute; top:0; left:0; width:900px; height:430px; padding:20px; background:#ffffff; color:#222;">
<div style="width:600px; height:400px; margin:auto; margin-top:20px; background:#cccccc;">
<div class="elemHover fromBottom" data-easing="easeOutExpo" style="left:200; top:40;">
<div style="width:598px; border: 1px solid #c7a60c; text-align: center;">背景を画像ではなくhtmlでも書けます。</div>
</div>
<div class="elemHover fromRight" data-easing="easeOutExpo" style="text-align: center; left:300px; bottom:78px; width:80px; height:50px; background:#ffffff; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-bottomleft: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px;">
<a href="index.html">ENTER</a>
</div>
<div class="elemHover fromLeft" data-easing="easeOutExpo" style="text-align: center; left:500px; bottom:78px; width:80px; height:50px; background:#ffffff; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-bottomleft: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px;">
<a href="index.html">EXIT</a>
</div>
</div>
</div>
</div>
<div data-thumb="images/thumbs/ratatouille2.jpg">
<img src="images/slides/ratatouille2.jpg" alt="画像名" />
<div style="position:absolute; bottom:0; left:0;">
<iframe src="http://player.vimeo.com/video/1084537?title=0&byline=0&portrait=0&color=f0bc00&autoplay=1" data-fake="images/slides/big_buck_bunny.jpg" width="300" height="169" frameborder="0"></iframe>
</div>
<div class="elemHover fadeIn" style="left:600px; bottom:0;">
もちろん画像の上に動画もおけます。<br />いろんなカスタマイズができますので、色々試してみてください。<br /><a href="http://www.pixedelic.com/plugins/diapo/">詳しくは、配信先のこちらも参考にしてみてください。</a>
</div>
</div>
</div><!-- #pix_diapo -->
</div><!-- #main_area -->
</div><!--wrapper-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type='text/javascript' src='js/jquery.mobile-1.0rc2.customized.min.js'></script>
<script type='text/javascript' src='js/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/diapo.js'></script>
<script type="text/javascript">
$(function(){
$('.pix_diapo').diapo();
});
</script>
</body>
</html>
次に、スタイルシートです。
index.css（スライドショー以外の部分です。）
body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #000;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
font-size: 16px;
background-repeat: repeat-x;
width: 100%;
background-color: #ffffff;
min-width: 1200px;
}
#wrapper{
width:100%;
margin:0 auto;
position:relative;
z-index:0;
color:#ffffff;
}
diapo.css（スライドショー専用の部分です。）
/* sectionの枠設定 */
section {
display: block;
overflow: hidden;
position: relative;
background: #ffffff;
}
#main_area {
overflow:hidden;
width:1000px;
margin: 10px auto;
background: #cccccc;
}
/* pix_diapoの枠設定 */
.pix_diapo {
background: #000;
-moz-box-shadow: 0 3px 6px #000;
-webkit-box-shadow: 0 3px 6px #000;
box-shadow: 0 3px 6px #000;
height: 470px;
margin: 10px auto;
overflow: hidden;
position: relative;
width: 940px;
}
.pix_diapo > div {
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
/* 次へ前への位置設定 */
#pix_prev, #pix_next {
cursor: pointer;
display: block;
height: 40px;
margin-top: -20px;
position: absolute;
top: 50%;
width: 31px;
z-index: 1001;
}
/* 前への画像設定 */
#pix_prev {
background: url(images/diapo/arrows.png) no-repeat left;
left: 10px;
}
/* 次への画像設定 */
#pix_next {
background: url(images/diapo/arrows.png) no-repeat right;
left: auto!important;
right: 10px!important;
}
/* 画像下の枠設定 */
#pix_pag {
margin: 0 auto;
position: relative;
width: 940px;
z-index: 1002;
margin-bottom: 80px;
}
/* 再生ボタンの位置設定 */
#pix_commands {
cursor: pointer;
display: block;
float: left;
height: 26px;
margin: 15px 0 0 13px;
position: relative;
width: 24px;
}
/* 再生ボタン画像設定 */
#pix_play {
background: url(images/diapo/play.png) center no-repeat;
height: 24px;
left: 0;
position: absolute;
top: 0;
width: 24px;
}
/* 再生ストップボタン画像設定 */
#pix_stop {
background: url(images/diapo/pause.png) center no-repeat;
height: 24px;
left: 0;
position: absolute;
top: 0;
width: 24px;
}
/* 選択ボタン全体の位置設定 */
#pix_pag_ul {
float: right;
margin: 0;
padding: 0;
}
/* 選択ボタン1つずつの枠や間隔の設定 */
#pix_pag_ul > li {
cursor: pointer;
display: block;
.display: inline-block;
float: left;
list-style: none;
margin: 0 10px 0 0;
padding: 20px 8px 0;
text-align: center;
text-indent: -9999px;
width: 16px;
}
/* 選択ボタン丸部分の外ふち設定 */
#pix_pag_ul > li > span {
background: #222;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
display: block;
height: 16px;
width: 16px;
}
/* 選択ボタン丸部分のマウスを乗せた時の内ふち設定 */
#pix_pag_ul > li:hover > span > span {
background: #ffff00;
}
/* 選択ボタン丸部分の内ふち設定 */
#pix_pag_ul > li > span > span {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
display: block;
float: left;
height: 8px;
margin: 4px;
width: 8px;
}
/* 選択ボタン丸部分の選択時の内ふち設定 */
#pix_pag_ul > li.diapocurrent > span > span {
background: #ffffff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
/* 選択ボタンサムネイル表示の枠設定 */
#pix_pag_ul > li > .pix_thumb {
border: 4px solid #f2f2f2;
.border: 4px solid #e6e6e6;
border: 4px solid #e6e6e6\9;
-moz-box-shadow: 0 1px 8px #000;
-webkit-box-shadow: 0 1px 8px #000;
box-shadow: 0 1px 8px #000;
height: 58px;
left: -17px;
position: absolute;
top: -40px;
width: 58px;
}
/* 選択ボタンサムネイル表示時の下矢印の設定（丸ボタンとサムネイルの間の矢印） */
#pix_pag_ul > li > .thumb_arrow {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #e6e6e6;
top: 26px;
left: 12px;
position: absolute;
}
.pix_relativize {
overflow: hidden;
position: relative;
}
.imgFake {
cursor: pointer;
}
.elemHover {
position: absolute;
}
/* 画像上のテキストの通常設定 */
.caption {
background: rgba(0, 0, 0, 0.8);
.filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000)\9;
bottom: 20px;
color: #fff;
display: block;
font-size: 13px;
padding: 20px;
width: 900px;
}
.ui-loader {
display: none;
}
/* 以下カスタム用 */
.button {
background: #00ff00;
background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));
border: 1px solid #368DBE;
border-top: 1px solid #c3d6df;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 3px black;
-webkit-box-shadow: 0 1px 3px black;
box-shadow: 0 1px 3px black;
color: white;
display: block;
font-size: 12px;
font-weight: bold;
height: 30px;
/*line-height: 30px*/;
padding: 5px 20px;
text-align: center;
text-decoration: none;
/*text-shadow: 1px 1px 1px black;
text-transform: uppercase;*/
width: auto;
}
.button2 {
background: #d9ae00;
background: -moz-linear-gradient(top, #b28b06, #9c7705 50%, #9c7705 51%, #5c4100);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b28b06), color-stop(.5, #9c7705), color-stop(.5, #9c7705), to(#5c4100));
border: 1px solid #c7a60c;
border-top: 1px solid #e5d51f;
}
.button3 {
background: #ffd838;
background: -moz-linear-gradient(top, #edbf21, #c89b0f 50%, #9c7705 51%, #906706);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #edbf21), color-stop(.5, #c89b0f), color-stop(.5, #c89b0f), to(#906706));
border: 1px solid #c7a60c;
border-top: 1px solid #e5d51f;
}
.price_table {
float: right;
font-size: 12px;
margin: 10px auto 0;
padding: 20px 0;
position: relative;
width: 570px;
}
.price_table .price_column.highlighted {
background: #ffd838;
margin: -5px!important;
padding: 10px;
z-index: 2;
}
.price_table .price_column {
display: block;
margin: 5px;
float: left;
position: absolute;
width: 180px;
z-index: 1;
}
.price_table .price_column > div {
background: #eeeeee;
}
.price_table .price_column > div > div {
padding: 10px 15px;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #f6f6f6;
}
.price_table .price_column > div > p {
padding: 10px 15px;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #f6f6f6;
}
.price_table .price_column > div > ul {
padding: 10px 15px;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #f6f6f6;
}
.price_table .price_title {
background-color: #333333;
border-top: 0!important;
color: #ffffff;
font-size: 14px;
}
.price_table .highlighted .price_title {
font-size: 16px;
}
.price_table .price_price {
font-size: 36px;
line-height: 40px;
}
.price_table .highlighted .price_price {
font-size: 40px;
line-height: 44px;
}
.price_table .price_explanation {
font-size: 10px;
line-height: 13px;
text-transform: uppercase;
}
.price_table .cusButton {
background-color: #333333;
display: block;
text-align: center;
}
.price_table li {
padding: 5px 0;
}
.price_table div.pix_check {
background: url(../images/demo/list-check-green.png) no-repeat 15px center;
padding-left: 38px!important;
}
.price_table div.pix_error {
background: url(../images/demo/list-error.png) no-repeat 15px center;
padding-left: 38px!important;
}
最後にjsファイルです。
今回は、ファイルが多いので、diapo.jsだけ記載します。
そのほかのファイルは、そのままUPして頂いてかまいません。
diapo.js（記載内容が多いので、一部だけ記載します。）
// Diapo slideshow v1.0.4 - a jQuery slideshow with many effects, transitions, easy to customize, using canvas and mobile ready, based on jQuery 1.4+
// Copyright (c) 2011 by Manuel Masia - www.pixedelic.com
// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
;(function($){$.fn.diapo = function(opts, callback) {
var defaults = {
selector : 'div', //target element
fx : 'random',//エフェクト設定。以下がエフェクトリスト
//'random','simpleFade','curtainTopLeft','curtainTopRight','curtainBottomLeft','curtainBottomRight','curtainSliceLeft','curtainSliceRight','blindCurtainTopLeft','blindCurtainTopRight','blindCurtainBottomLeft','blindCurtainBottomRight','blindCurtainSliceBottom','blindCurtainSliceTop','stampede','mosaic','mosaicReverse','mosaicRandom','mosaicSpiral','mosaicSpiralReverse','topLeftBottomRight','bottomRightTopLeft','bottomLeftTopRight','bottomLeftTopRight','scrollLeft','scrollRight','scrollTop','scrollBottom','scrollHorz'
//you can also use more than one effect: 'curtainTopLeft, mosaic, bottomLeftTopRight'
mobileFx : '', //leave empty if you want to display the same effect on mobile devices and on desktop etc.
slideOn : 'random', //next, prev, random: decide if the transition effect will be applied to the current (prev) or the next slide
gridDifference : 250, //to make the grid blocks slower than the slices, this value must be smaller than transPeriod
easing : 'easeInOutExpo', //スライド移動のパターン。（スライド開始から終了まで）エフェクトとは別。以下がeasingリスト。for the complete list http://jqueryui.com/demos/effect/easing.html
mobileEasing : '', //leave empty if you want to display the same easing on mobile devices and on desktop etc.
loader : 'pie', //ローディングの種類。pie＝丸タイプ, bar＝バータイプ, none＝表示なし, (even if you choose "pie", old browsers like IE8- can't display it... they will display always a loading bar)
loaderOpacity : .8, //ローディングの透明度。0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1
loaderColor : '#ffffff', //ローディングの内色。
loaderBgColor : '#222222', //ローディングの外色。
pieDiameter : 50, //（pieの時）ローディング枠の大きさ。
piePosition : 'top:5px; right:5px', //（pieの時）ローディングの位置設定。this option accepts any CSS value
pieStroke : 8, //（pieの時）ローディング線の太さ設定。
barPosition : 'bottom', //（barの時）ローディングの位置設定。bottom＝下, top＝上
barStroke : 5,//（barの時）ローディング線の太さ設定。
navigation : true, //次への画像表示、非表示設定。next、prevの表示の部分。true＝表示,false＝非表示,true, false. It enables the previous and the next buttons, their IDs are #pix_prev and #pix_next
mobileNavigation : true, //モバイル用。true, false. It enables the previous and the next buttons on mobile devices
navigationHover : true, //次への画像マウスオーバー時表示、非表示設定。true＝マウスオーバー時表示。true＝常に表示true, false. If true navigation will be visible only on hover state
mobileNavHover : true, //モバイル用。true, false. If true navigation will be visible only on hover state for mobile devices
commands : true, //再生画像表示、非表示設定。true＝表示。false＝非表示。true, false. It enables stop and play buttons
mobileCommands : true, //モバイル用。true, false. It enables stop and play buttons on mobile devices
pagination : true, //選択ボタンの表示、非表示。true＝表示。false＝非表示。true, false. It enables the pagination numbers. This is the appended code:
//<div id="pix_pag">
//<ul id="pix_pag_ul">
//<li id="pag_nav_0"><span><span>0</span></span></li>
//<li id="pag_nav_1"><span><span>1</span></span></li>
//<li id="pag_nav_2"><span><span>2</span></span></li>
//...etc.
//</ul>
//</div>
mobilePagination : true, //モバイル用。true, false. It enables the pagination numbers on mobile devices
thumbs : true, //選択ボタンサムネイル表示、非表示。true＝表示。false＝非表示。（モバイル用選択不可）true, false. It shows the thumbnails (if available) when the mouse is on the pagination buttons. Not available for mobile devices
hover : true, //オンマウスでローディングが止まる。true＝ストップ。false＝ノンストップ。（モバイル用選択不可）true, false. Puase on state hover. Not available for mobile devices
pauseOnClick : true, //スライダーをクリックした時、ローディングが止まる。true＝ストップ。false＝ノンストップ。true, false. It stops the slideshow when you click the sliders.
rows : 4, //エフェクトのボックスの数（縦）
cols : 6, //エフェクトのボックスの数（横）
slicedRows : 8, //if 0 the same value of rows
slicedCols : 12, //if 0 the same value of cols
time : 3000, //エフェクトの時間。milliseconds between the end of the sliding effect and the start of the nex one
transPeriod : 1500, //スライドの時間。lenght of the sliding effect in milliseconds
autoAdvance : true, //ローディングオートスタート。true＝オートスタート。false＝オートスタートストップ。true, false
mobileAutoAdvance : true, //モバイル用。truem false. Auto-advancing for mobile devices
onStartLoading : function() { },
onLoaded : function() { },
onEnterSlide : function() { },
onStartTransition : function() { }
};
基本的に上記の部分だけを変更してもらえれば、カスタマイズができます。
カスタマイズしやすい用に、各項目の横に、内容を記載しときました。
以上で設置が完了します。
今回、使用したサイトがありますので、こちらも参考にしてみてください。
Diapo | a free jQuery slideshow by Pixedelic
今回デモ01で使用したファイルをUPしときましたので、
よかったら参考にしてみてください。
ダウンロード
——————————————————————-
補足
今回は、使用するファイルが多く少しわかりづらい部分もあるとおもいます。
ですが、あきらめないでください。
設置ができたら、あとは、htmlを編集するだけです。
今回の、スライドショーは、画像の上にテキストが書けるという事が、非常に便利だと感じました。
テキスト開始箇所など、fromLeftこのように指定するば簡単に変更できます。
画像切り替えの変更や、サムネル画像の表示、非表示などは、すべてdiapo.jsファイルで変更ができます。
色々試してみてください。
今回のスライドショーは、とてもカスタマイズがしやすくとても使いやすいですが、
1つ欠点をあげるとするならば、SEOには、あんまり強くないという印象を受けました。
これは、個人的な、感想です。
ですが、使いやすいので、良しとしました。
関連記事
-
-
画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。
今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が
-
-
スクロールバーのカスタマイズ。jScrollPaneを使用してみました。
今回は、スクロールバーのカスタマイズに取り組んでみました。 サイトにスクロ
-
-
-jQuery-スクロールしたらあとからついてくるコンテンツの作成方法
今回は、スクロールしてもあとからついてくるコンテンツを作成してみました。 スクロールしたら
-
-
-jQuery-自動で画像のフェードイン・フェードアウトをする方法
今回は、自動で画像を切り替える方法について調べてみました。 （フェイドイン・フェイドアウトのみ）
-
-
htmlの書き方について。
ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた
-
-
背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。
今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ
-
-
-jQuery-チェックをつけないとボタンが押せなくする方法
今回は、チェックボックスにチェックをつけないとボタンを押せないようにする方法を作成してみました。
-
-
スクロールしても固定されるコンテンツの作成方法。(“jquery”box-fixed.jsを使用。)
今回は、スクロールしても一部分が固定されるという事をしてみました。 まずは、デモを見てください。
-
-
背景に画像をフルスクリーンさせる方法。 maximageを使用。
今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。
-
-
animationでboxを動かしてみた。
今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb
- PREV
- 海外サイトのかっこいいサイト集。
- NEXT
- htmlの書き方について。
Comment
はじめまして。
sliderproをwebページに導入しようと思って、いろいろ検索をしていてこのページに辿り着き、勉強させていただいています。
このサイトにある「デモ01」で、画像の上にテキストがありますが、それらのテキストは「テキスト選択」ができるようになっています。
わたしも、テキストを挿入したのですが、「テキスト選択」ができません。何か思い当たる事はありますでしょうか？
タグは、単純に以下のようです。
TEST
お忙しい中、恐縮ですが、お返事頂けましたら幸いです。
ご質問ありがとうございます。
ご回答が遅くなり申し訳ございません。
「テキスト選択」とはどのような表現をさせたいのでしょうか？
具体的な内容をお知らせいただけると回答を致します。
「デモ01」では、画像の上にテキストを書く際は以下の様に書くことでテキストの表示ができます。
テキストをどのように開始するかの設定は以下の方法になります。
■上からテキストが出てくる
■下からテキストが出てくる
■左からテキストが出てくる
■右からテキストが出てくる
■フェードしながらテキストが出てくる
という様に設定することが可能です。
こちらの回答でお力のなれましたら幸いです。
また、ご不明点がございましたらお知らせください。
webサイト上でテキストをコピー＆ペーストできる様にするという事がしたかったのです。
touchSwipeなど、機能が豊富なので、
いろいろ試行錯誤の結果、カスタマイズする事ができました。
SliderproからDLしたものと、こちらのサイトを参考にカスタマイズを進めていました。
とても参考になりました。
また、ご丁寧にお返事いただけてありがとうございました。