ギャラリー参考
http://black-flag.net/jquery/20130514-4588.html
ローディング参考
http://mori-coding.blog.jp/archives/6760786.html
レスポンシブ 幅100% 高さ同じ比率 参考
http://tsudoi.org/weblog/?p=2949
これ少々改造
サイドナビ 透明度変更のためthumbOpc2項目追加
//これはローディング画像を出すスクリプト 後入れ
window.onload = function(){
$(function() {
$("#loading").fadeOut(0);
$(".flickSlider").fadeIn(500);
});
}
$(function(){
$(window).load(function(){
var setWrap = $('.flickSlider'),//スライダー全体を囲うブロック要素名（IDでも可）
setMainView = $('.flickView'),//メインビジュアル部分を囲うブロック要素名（IDでも可）
setThumbNail = $('.flickThumb'),//サムネイル部分を囲うブロック要素名（IDでも可）
setMaxWidth = 800,//スライダー部分の最大幅
setMinWidth = 320,//スライダー部分の最小幅
thumbNum = 6,//一行に並べるサムネイル数
thumbOpc = 0.5,//サムネイルの非アクティブ時の透過度
thumbOpc2 = 0.3,//サイドバーの非アクティブ時の透過度
scrollSpeed = 500,//スライドアニメーションスピード
delayTime = 5000,//スライドアニメーション待機時間
easing = 'linear',//スライドアニメーションのイージング指定
sideNavi = 'on', // 'on' or 'off'//左右NEXT／BACKの表示／非表示（非表示の場合は「off」等）
autoPlay = 'off'; // 'on' or 'off'//自動切換え動作のON／OFF（自動切換えさせない場合は「off」等）
var agent = navigator.userAgent;
setWrap.each(function(){
var thisObj = $(this),
childMain = thisObj.find(setMainView),mainUl = childMain.find('ul'),mainLi = mainUl.find('li'),mainLiLink = mainLi.children('a'),mainLiImg = mainLi.find('img'),
childThumb = thisObj.find(setThumbNail),thumbUl = childThumb.find('ul'),thumbLi = childThumb.find('li'),thumbLiFst = childThumb.find('li:first'),thumbLiLst = childThumb.find('li:last'),
mainWidth = parseInt(childMain.css('width')),mainHeight = parseInt(childMain.css('height')),listCount = mainUl.children('li').length;
thisObj.css({display:'block'});
// レスポンシブ動作メイン
imgSize();
function imgSize(){
var windowWidth = parseInt($(window).width()),
setUlLeft = parseInt(mainUl.css('left')),
setlistWidth = parseInt(mainLi.css('width')),
setLeft = setUlLeft / setlistWidth;
if(windowWidth >= setMaxWidth) {
thisObj.css({width:setMaxWidth});
childMain.css({width:setMaxWidth});
mainUl.css({width:((setMaxWidth)*(listCount))});
mainLi.css({width:setMaxWidth});
var listWidthA = parseInt(mainLi.css('width')),
leftMax = -((listWidthA)*((listCount)-1)),
baseHeight = mainLiImg.height();
childMain.css({height:baseHeight});
mainUl.css({height:baseHeight});
mainLi.css({height:baseHeight});
thumbUl.css({width:setMaxWidth});
thumbLi.css({width:((setMaxWidth)/(thumbNum)),height:''});
} else if(windowWidth < setMaxWidth) {
var listWidthB = parseInt(childMain.css('width')),
leftMax = -((listWidthB)*((listCount)-1));
thisObj.css({width:setMaxWidth});
if(windowWidth >= setMinWidth) {
thisObj.css({width:'100%'});
childMain.css({width:'100%'});
mainUl.css({width:((listWidthB)*(listCount))});
mainLi.css({width:(listWidthB)});
} else if(windowWidth < setMinWidth) {
thisObj.css({width:setMinWidth});
childMain.css({width:setMinWidth});
mainUl.css({width:((setMinWidth)*(listCount))});
mainLi.css({width:setMinWidth});
}
var reHeight = mainLiImg.height();
childMain.css({height:reHeight});
mainUl.css({height:reHeight});
mainLi.css({height:reHeight});
var reWidth = setThumbNail.width();
thumbUl.css({width:reWidth});
thumbLi.css({width:((reWidth)/(thumbNum))});
}
var adjLeftWidth = parseInt(mainLi.css('width')),
adjLeft = adjLeftWidth * setLeft;
mainUl.css({left:(adjLeft)});
}
imgSize();
$(window).resize(function(){
if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
if(autoPlay == 'on'){clearInterval(setTimer);}
imgSize();
if(autoPlay == 'on'){slideTimer();}
} else {
imgSize();
}
});
// フリックアクション
var isTouch = ('ontouchstart' in window);
mainUl.on(
{'touchstart mousedown': function(e){
if(mainUl.is(':animated')){
e.preventDefault();
} else {
if(autoPlay == 'on'){clearInterval(setTimer);}
if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
e.preventDefault();
}
this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
this.leftBegin = parseInt($(this).css('left'));
this.left = parseInt($(this).css('left'));
this.touched = true;
}
},'touchmove mousemove': function(e){
if(!this.touched){return;}
e.preventDefault();
this.left = this.left - (this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX) );
this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
$(this).css({left:this.left});
},'touchend mouseup mouseout': function(e){
if (!this.touched) {return;}
this.touched = false;
var setThumbLiActive = thumbUl.children('li.active'),
listWidth = parseInt(mainLi.css('width')),leftMax = -((listWidth)*((listCount)-1));
if(((this.leftBegin)-30) > this.left && (!((this.leftBegin) === (leftMax)))){
$(this).stop().animate({left:((this.leftBegin)-(listWidth))},scrollSpeed,easing);
setThumbLiActive.each(function(){
$(this).removeClass('active');
$(this).next().addClass('active');
});
} else if(((this.leftBegin)+30) < this.left && (!((this.leftBegin) === 0))){
$(this).stop().animate({left:((this.leftBegin)+(listWidth))},scrollSpeed,easing);
setThumbLiActive.each(function(){
$(this).removeClass('active');
$(this).prev().addClass('active');
});
} else if(this.leftBegin === 0) {
$(this).stop().animate({left:'0'},scrollSpeed,easing);
} else if(this.leftBegin <= leftMax) {
$(this).stop().animate({left:(leftMax)},scrollSpeed,easing);
} else if(this.left >= 0) {
$(this).stop().animate({left:'0'},scrollSpeed);
} else if(this.left <= leftMax) {
$(this).stop().animate({left:(leftMax)},scrollSpeed,easing);
} else {
$(this).stop().animate({left:(this.leftBegin)},scrollSpeed,easing);
}
compBeginLeft = this.leftBegin;
compThisLeft = this.left;
mainLiLink.click(function(e){
if(!(compBeginLeft === compThisLeft)){
e.preventDefault();
}
});
if(autoPlay == 'on'){slideTimer();}
}
});
// ボタン移動動作
thumbLi.click(function(){
if(autoPlay == 'on'){clearInterval(setTimer);}
var listWidth = parseInt(mainLi.css('width')),leftMax = -((listWidth)*((listCount)-1)),
connectCont = thumbLi.index(this);
mainUl.stop().animate({left:(-(listWidth)*(connectCont))},scrollSpeed,easing);
thumbLi.removeClass('active');
$(this).addClass('active');
if(autoPlay == 'on'){slideTimer();}
});
thumbLiFst.addClass('active');
thumbLi.css({opacity:thumbOpc});
// サイドナビボタン（有り無し）
if(sideNavi == 'on'){
childMain.append('<div class="btnPrev"></div><div class="btnNext"></div>');
var setPrev = childMain.find('.btnPrev'),setNext = childMain.find('.btnNext'),setPrevNext = childMain.find('.btnPrev,.btnNext');
setPrevNext.css({opacity:thumbOpc2});
setNext.click(function(){
var setThumbLiActive = thumbUl.children('li.active');
setThumbLiActive.each(function(){
var listLengh = thumbLi.length;
var listIndex = thumbLi.index(this);
var listCount = listIndex+1;
if(listLengh == listCount){
thumbLiFst.click();
} else {
$(this).next('li').click();
}
});
});
setPrev.click(function(){
var setThumbLiActive = thumbUl.children('li.active');
setThumbLiActive.each(function(){
var listLengh = thumbLi.length;
var listIndex = thumbLi.index(this);
var listCount = listIndex+1;
if(1 == listCount){
thumbLiLst.click();
} else {
$(this).prev('li').click();
}
});
});
}
// サムネイルマウスオーバー
if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
thumbLi.hover(function(){
$(this).stop().animate({opacity:'1'},300);
},function(){
$(this).stop().animate({opacity:thumbOpc},300);
});
if(sideNavi == 'on'){
setPrevNext.hover(function(){
$(this).stop().animate({opacity:'0.5'},300);
},function(){
$(this).stop().animate({opacity:thumbOpc2},300);
});
}
}
// 自動再生（有り無し）
if(autoPlay == 'on'){
function slideTimer() {
setTimer = setInterval(function(){
var setThumbLiActive = thumbUl.children('li.active');
setThumbLiActive.each(function(){
var listLengh = thumbLi.length;
var listIndex = thumbLi.index(this);
var listCount = listIndex+1;
if(listLengh == listCount){
thumbLiFst.click();
} else {
$(this).next('li').click();
}
});
},delayTime);
}
slideTimer();
}
});
});
});
/*--------------------------------
フリックギャラリー
---------------------------------*/
/*ローディング画像*/
#loading{ position: relative;
width: 100%;
height: 100%;
padding: 75% 0 0;}
#loading .inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(/wp-content/themes/D/d/img/parts/wait3.gif) center center no-repeat #FFF;
}
/* .flickSlider
--------------------------- */
.flickSlider {
margin: 24px auto;
text-align: left;
display: none;
}
/* .flickView
--------------------------- */
.flickSlider .flickView {
width: 100%;
text-align: left;
position: relative;
overflow: hidden;
}
.flickSlider .flickView ul {
top: 0;
left: 0;
width: 100%;
position: absolute;
overflow: hidden;
}
.flickSlider .flickView ul li {
width: 100%;
float: left;
display: inline;
overflow: hidden;
}
.flickSlider .flickView ul li img {
width: 100%;
height:auto;
}
/* .flickThumb
--------------------------- */
.flickSlider .flickThumb {
width: 100%;
overflow: hidden;
}
.flickSlider .flickThumb ul {
width: 110%;
}
.flickSlider .flickThumb ul li {
float: left;
cursor: pointer;
display: inline;
}
.flickSlider .flickThumb ul li img {
width: 100%;
height:auto;
}
.flickSlider .flickThumb ul li.active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
/* sideNavi
------------------------- */
.flickSlider .btnPrev,
.flickSlider .btnNext {
top: 0;
width: 5%;
height: 100%;
position: absolute;
cursor: pointer;
}
.flickSlider .btnPrev {
left: 0;
background: #6d6d6d url(/wp-content/themes/D/d/img/parts/btnPrev.png) no-repeat center center;
}
.flickSlider .btnNext {
right: 0;
background: #6d6d6d url(/wp-content/themes/D/d/img/parts/btnNext.png) no-repeat center center;
}
/* =======================================
ClearFixElements
======================================= */
.flickSlider .flickView ul:after,
.flickSlider .flickThumb ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
.flickSlider .flickView ul,
.flickSlider .flickThumb ul {
display: inline-block;
overflow: hidden;
}
.flickSlider .flickView ul li a img:hover{ opacity:1;
filter: alpha(opacity=100); /* ie lt 8 */
-ms-filter: "alpha(opacity=100)"; /* ie 8 */
-moz-opacity:1; /* FF lt 1.5, Netscape */
-khtml-opacity: 1; /* Safari 1.x */}