LayerSlider Documentation




「LayerSlider」 と 使用中のテンプレート JS CSS に 競合 ありか ・・・

「LayerSlider」
IEで正常に表示される場合と正常に表示されない場合がある
問題の切り分けが必要だ


<html>
<head>
<title>LayerSlider</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://kaiyuryozin.web.fc2.com/web_tech/layer_slider//layerslider/css/layerslider.css" type="text/css">
<!--[if lt IE 9]>
<script src="http://kaiyuryozin.web.fc2.com/web_tech/layer_slider//assets/js/html5.js"></script>
<![endif]-->
</head>
<body>
<style type="text/css" media="screen">
.ls-layer,
.ls-layer * {
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', Helvetica, Arial, Serif;
text-shadow: none;
font-weight: normal;
}
.sh {
height: 36px;
line-height: 36px;
color: #333;
font-size: 25px;
white-space: nowrap;
}
.sp {
line-height: auto;
color: #555;
font-size: 15px;
width: 280px;
text-align: justify;
}
.si {
border: 1px solid #ddd;
padding: 5px;
}
</style>
<div id="layerslider-container">
<div id="layerslider" style="width: 600px; height: 200px; margin-bottom: 20px;">
<div class="ls-layer" style="slidedirection: right; slidedelay: 6000; durationin: 0; durationout: 0; easingin: easeInOutQuint; easingout: easeInOutQuint; delayin: 0; delayout: 1000;">
<p class="ls-s3 sh" style="top:10px; left: 10px; slidedirection : left; slideoutdirection : left; durationin : 1000; durationout : 1000; easingin : easeInOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; ">SIGMA</p>
<p class="ls-s3 sp" style="top:50px; left: 10px; slidedirection : bottom; slideoutdirection : fade; durationin : 1000; durationout : 1000; easingin : easeInOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; showuntil : 1500;">初めてカメラを手がけたときからずっと、
シグマは、作品づくりのための機材を考えてきました。今日ではあたりまえになった「フルスペック・コンパクト・デジタルカメラ」も、
Foveonからインスピレーションを得たシグマが創ったカテゴリでした。</p>
<p class="ls-s3 sp" style="top:50px; left: 10px; slidedirection : bottom; slideoutdirection : bottom; durationin : 1000; durationout : 1000; easingin : easeInOutQuint; easingout : easeInOutQuint; delayin : 3000; delayout : 0; ">Foveonセンサー独特の豊かなトーンとグラデーション、しっかりとしたテクスチャを感じさせる「フルボディ」画質は、光の情報を垂直方向にまるごと取り込める世界唯一のセンサー方式、「フルカラーキャプチャシステム」によるものです。</p>
<img class="ls-s3 si" src="http://blog-imgs-68-origin.fc2.com/k/a/i/kaiyuryozin/13988320373fZC4YI0f5bqT841398832034.gif" style="top: 5px; left: 315px; slidedirection : right; slideoutdirection : fade; durationin : 1000; durationout : 1000; easingin : easeInOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; ">
</div>
<div class="ls-layer" style="slidedirection: right; slidedelay: 6000; durationin: 0; durationout: 0; easingin: easeInOutQuint; easingout: easeInOutQuint; delayin: 0; delayout: 1000;">
<p class="ls-s3 sh" style="top:10px; left: 300px; slidedirection : top; slideoutdirection : top; durationin : 1000; durationout : 1000; easingin : easeInOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; ">愛犬ダイの散歩道にて</p>
<p class="ls-s3 sp" style="top:50px; left: 300px; slidedirection : fade; slideoutdirection : right; durationin : 1000; durationout : 1000; easingin : easeInOutQuint; easingout : easeInOutQuint; delayin : 500; delayout : 0; ">牡丹の花が 美しく 咲いています</p>
<img class="ls-s3 si" src="http://blog-imgs-68-origin.fc2.com/k/a/i/kaiyuryozin/1398827290eCscberwrt3blru1398827281.gif" style="top: 3px; left: 3px; slidedirection : fade; slideoutdirection : top; durationin : 1000; durationout : 1000; easingin : easeInOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; showuntil : 1500;">
<img class="ls-s3 si" src="http://blog-imgs-68-origin.fc2.com/k/a/i/kaiyuryozin/1398820577x1kF0z85XuC1vR11398820572.gif" style="top: 3px; left: 3px; slidedirection : bottom; slideoutdirection : fade; durationin : 1000; durationout : 1000; easingin : easeInOutQuint; easingout : easeInOutQuint; delayin : 3000; delayout : 0; ">
</div>
<div class="ls-layer" style="slidedirection: right; slidedelay: 6000; durationin: 0; durationout: 0; easingin: easeInOutQuint; easingout: easeInOutQuint; delayin: 0; delayout: 1000;">
<h1 class="ls-s3 sh" style="top:10px; left: 10px; slidedirection : left; slideoutdirection : left; durationin : 1000; durationout : 1000; easingin : easeInOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; ">Layer Slider</h1>
<p class="ls-s3 sp" style="top:50px; left: 10px; slidedirection : bottom; slideoutdirection : bottom; durationin : 1000; durationout : 1000; easingin : easeInOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; ">高機能です  使い方 勉強中です</p>
<img class="ls-s3 si" src="http://blog-imgs-68-origin.fc2.com/k/a/i/kaiyuryozin/1398820577x1kF0z85XuC1vR11398820572.gif" style="top: 15px; left: 315px; slidedirection : top; slideoutdirection : fade; durationin : 1000; durationout : 1000; easingin : easeInOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0; showuntil : 1500;">
<p class="ls-s3 sp" style="top:50px; left: 310px; slidedirection : fade; slideoutdirection : right; durationin : 1000; durationout : 1000; easingin : easeInOutQuint; easingout : easeInOutQuint; delayin : 3000; delayout : 0; ">Vimeo映像の連続自動再生も可能です</p>
</div>
</div>
<script src="http://kaiyuryozin.web.fc2.com/web_tech/layer_slider//layerslider/jQuery/jquery.js" type="text/javascript"></script>
<script src="http://kaiyuryozin.web.fc2.com/web_tech/layer_slider//layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script>
<script src="http://kaiyuryozin.web.fc2.com/web_tech/layer_slider//layerslider/jQuery/jquery-transit-modified.js" type="text/javascript"></script>
<script src="http://kaiyuryozin.web.fc2.com/web_tech/layer_slider//layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
<script src="http://kaiyuryozin.web.fc2.com/web_tech/layer_slider//layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#layerslider').layerSlider({
skinsPath : 'http://kaiyuryozin.web.fc2.com/web_tech/layer_slider//layerslider/skins/',
skin : 'borderlessdark',
autoStart : true,
navStartStop : false,
responsive : false,
navPrevNext : false,
hoverPrevNext : false,
thumbnailNavigation : false
});
$('#layerslider2').layerSlider({
skinsPath : 'http://kaiyuryozin.web.fc2.com/web_tech/layer_slider//layerslider/skins/',
skin : 'borderlessdark',
autoStart : true,
navStartStop : false,
navPrevNext : false,
hoverPrevNext : false,
thumbnailNavigation : false
});
});
</script>
</body>
</html>
関連記事

 ソフトウェア


全タイトルを表示

openclose

プルダウン 降順 昇順 年別

01月 | 2020年02月 | 03月
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29


全タイトルを表示

​海遊旅人 - Photography ​海遊旅人 - VideoGraphy ​201200819the_wagyu_database2.jpg 201200819google_drive2.jpg 20120829weer_tech00.jpg

名前:
メール:
件名:
本文:

QRコード
・最近記事のRSS
・最新コメントのRSS
・最新トラックバックのRSS


new BL TP ML gif_anime vimeo youtube
Google Picasa flickr Facebook Pin
Globe

*