JSSOR Slider FULLPACK をダウンロードし、このギャラリーを使用することにしました: http://www.jssor.com/demos/image-gallery.html
ソースに示されているのと同じように、これをページに挿入しました。ただし、サムネイルやナビゲーション矢印は表示されません。
次に、表示されている現在の画像のサイズを 306x306 に変更しました。これは使用する画像のサイズであり、サムネイルのサイズを 64x64 に変更しました。これは私のサムネイルのサイズです。
スライドショーのメイン画像は機能しますが、サムネイルはメイン スライドショーの一部であり、メイン画像の下にはありません。また、まだナビゲーション矢印は表示されません。
デフォルト値であるため、矢印が表示されないことはわかっています。
<span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 158px; left: 8px;">
<span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px; right: 8px">
ただし、ここで必要な値はわかりません。
私のhtmlファイルのスライドショーの完全なコードは次のとおりです。
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 306px; height: 372px; background: #191919; overflow: hidden;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; background: url(../imag/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 306px; height: 306px; overflow: hidden;">
<div>
<img u="image" src="../images/dundee1.jpg" />
<img u="thumb" src="../images/thumbs/dundee1_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee3.jpg" />
<img u="thumb" src="../images/thumbs/dundee3_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee12.jpg" />
<img u="thumb" src="../images/thumbs/dundee12_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee16.jpg" />
<img u="thumb" src="../images/thumbs/dundee16_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee17.jpg" />
<img u="thumb" src="../images/thumbs/dundee17_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee18.jpg" />
<img u="thumb" src="../images/thumbs/dundee18_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee19.jpg" />
<img u="thumb" src="../images/thumbs/dundee19_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee25.jpg" />
<img u="thumb" src="../images/thumbs/dundee25_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee26.jpg" />
<img u="thumb" src="../images/thumbs/dundee26_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee27.jpg" />
<img u="thumb" src="../images/thumbs/dundee27_thumb.jpg" />
</div>
<!-- Arrow Navigator Skin Begin -->
<style>
/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l (normal)
.jssora05r (normal)
.jssora05l:hover (normal mouseover)
.jssora05r:hover (normal mouseover)
.jssora05ldn (mousedown)
.jssora05rdn (mousedown)
*/
.jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn
{
position: absolute;
cursor: pointer;
display: block;
background: url(../images/a17.png) no-repeat;
overflow:hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05ldn { background-position: -250px -40px; }
.jssora05rdn { background-position: -310px -40px; }
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 158px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px; right: 8px">
</span>
<!-- Arrow Navigator Skin End -->
<!-- Thumbnail Navigator Skin Begin -->
<div u="thumbnavigator" class="jssort01" style="position: absolute; width: 306px; height: 64px; left:0px; bottom: 0px;">
<!-- Thumbnail Item Skin Begin -->
<style>
/* jssor slider thumbnail navigator skin 01 css */
/*
.jssort01 .p (normal)
.jssort01 .p:hover (normal mouseover)
.jssort01 .pav (active)
.jssort01 .pav:hover (active mouseover)
.jssort01 .pdn (mousedown)
*/
.jssort01 .w {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.jssort01 .c {
position: absolute;
top: 0px;
left: 0px;
width: 64px;
height: 64px;
border: #000 2px solid;
}
.jssort01 .p:hover .c, .jssort01 .pav:hover .c, .jssort01 .pav .c {
background: url(../images/t01.png) center center;
border-width: 0px;
top: 2px;
left: 2px;
width: 64px;
height: 64px;
}
.jssort01 .p:hover .c, .jssort01 .pav:hover .c {
top: 0px;
left: 0px;
width: 66px;
height: 66px;
border: #fff 1px solid;
}
</style>
<div u="slides" style="cursor: move;">
<div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0; left: 0;">
<div class=w><thumbnailtemplate style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></thumbnailtemplate></div>
<div class=c>
</div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Thumbnail Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">CE0832a jQuery Slider</a>
</div>
<!-- Jssor Slider End -->
<img width=0 height=0 />
<!--<div id="debuginfo" style="width:300px;height:300px;background-color:Red;color:White;Padding:5px;"></div>-->
そして、ここにスクリプトコードがあります：
jQuery(document).ready(function ($) {
var _SlideshowTransitions = [
//Fade in L
{$Duration: 1200, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 1, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
//Fade out R
, { $Duration: 1200, $SlideOut: true, $FlyDirection: 2, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
//Fade in R
, { $Duration: 1200, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 2, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
//Fade out L
, { $Duration: 1200, $SlideOut: true, $FlyDirection: 1, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
//Fade in T
, { $Duration: 1200, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 4, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade out B
, { $Duration: 1200, $SlideOut: true, $FlyDirection: 8, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade in B
, { $Duration: 1200, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 8, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade out T
, { $Duration: 1200, $SlideOut: true, $FlyDirection: 4, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade in LR
, { $Duration: 1200, $Cols: 2, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 1, $ChessMode: { $Column: 3 }, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
//Fade out LR
, { $Duration: 1200, $Cols: 2, $SlideOut: true, $FlyDirection: 1, $ChessMode: { $Column: 3 }, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
//Fade in TB
, { $Duration: 1200, $Rows: 2, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 4, $ChessMode: { $Row: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade out TB
, { $Duration: 1200, $Rows: 2, $SlideOut: true, $FlyDirection: 4, $ChessMode: { $Row: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade in LR Chess
, { $Duration: 1200, $Cols: 2, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 4, $ChessMode: { $Column: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade out LR Chess
, { $Duration: 1200, $Cols: 2, $SlideOut: true, $FlyDirection: 8, $ChessMode: { $Column: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade in TB Chess
, { $Duration: 1200, $Rows: 2, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 1, $ChessMode: { $Row: 3 }, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
//Fade out TB Chess
, { $Duration: 1200, $Rows: 2, $SlideOut: true, $FlyDirection: 2, $ChessMode: { $Row: 3 }, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
//Fade in Corners
, { $Duration: 1200, $Cols: 2, $Rows: 2, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $FlyDirection: 5, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $Jease$.$InCubic, $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade out Corners
, { $Duration: 1200, $Cols: 2, $Rows: 2, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $SlideOut: true, $FlyDirection: 5, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $Jease$.$InCubic, $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade Clip in H
, { $Duration: 1200, $Delay: 20, $Clip: 3, $Assembly: 260, $Easing: { $Clip: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }
//Fade Clip out H
, { $Duration: 1200, $Delay: 20, $Clip: 3, $SlideOut: true, $Assembly: 260, $Easing: { $Clip: $Jease$.$OutCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }
//Fade Clip in V
, { $Duration: 1200, $Delay: 20, $Clip: 12, $Assembly: 260, $Easing: { $Clip: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }
//Fade Clip out V
, { $Duration: 1200, $Delay: 20, $Clip: 12, $SlideOut: true, $Assembly: 260, $Easing: { $Clip: $Jease$.$OutCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }
];
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlayInterval: 1500, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$PauseOnHover: 3, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 3
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
$SlideDuration: 800, //Specifies default duration (swipe) for slide in milliseconds
$SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not
$Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow
$Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
$TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
$ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
},
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 1 //[Required] 0 Never, 1 Mouse Over, 2 Always
},
$ThumbnailNavigatorOptions: { //[Optional] Options to specify and enable thumbnail navigator or not
$Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$ActionMode: 1, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
$SpacingX: 8, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
$Cols: 10, //[Optional] Number of pieces to display, default value is 1
$Align: 360 //[Optional] The offset position to park thumbnail
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 306), 306));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
現在、次の問題があります。
サムネイルの周りの黒いボックスがオフになっています..... http://www.imagebam.com/image/cd9d52323141060
スライドショーはページの一番左にあります...中央に配置する必要がありますが、試した方法はどれもうまくいきません。
スライドショーにかなりの数の画像がありますが、上の画像に表示されている以外のサムネイルが表示されません... サムネイルを左右にドラッグできます。画像のサムネイルに戻るだけです。