/* * jQuery BG Photo Frame v1.0.0 * Copyright 2016 Takeshi Kashihara * Contributing Author: Takeshi Kashihara * License: GPLv3 or later * License URI: https://www.gnu.org/licenses/gpl.html */ (function($) { $.fn.bgPhotoFrame = function(setting) { /*======================================================================= Utility =======================================================================*/ /* Detect Device ----------------------------------------------------------------------*/ function userAgent() { var a; var ua = navigator.userAgent; if (ua.indexOf("iPhone") > -1 || ua.indexOf("iPad") > -1 || ua.indexOf("iPod") > -1) a = "ios"; else if (ua.indexOf("Android") > -1) a = "android"; else a = "pc"; return a; } /* Remove Unit ----------------------------------------------------------------------*/ function removeUnit(val) { return parseInt(val.replace(/([a-z]+)/, '')); } //params var defaluts = { suffle: false, //シャッフルの有無 width: '100%', //画像の幅 height: 'auto', //画像の高さ minHeight: 'none', //画像の最大の高さ maxHeight: 'none', //画像の最大の高さ autoChange: true, //画像の自動切り替え autoTimer: 4000, //画像の自動切り替えのタイマー interfaceTimer: true, //インターフェース自動非表示 fadeSpeed: 1000, //画像の自動切り替えのタイマー shuffle: false, //シャッフル gradationColor: '0,0,0', //グラデーションカラー callbackBefore: null, //コールバック(画像切り替え前) callbackAfter: null, //コールバック(画像切り替え後) callbackChange: null, photoFrame: false, //フォトフレーム機能 stopWhenClicked: true, contents: '', //コンテンツ要素 maskColor: 'light', //マスクのカラー maskOpacity: 0.7 //マスクの透明度 }; //extend params setting = $.extend(defaluts, setting); if (this.length) { //element var element = this; //Wrapper var wrapper; //Controls var controls; //parent element var parent = element.parent(); //number of images var num = element.find('li').length; //information of images var imgInfo = []; //current image var current = 0; //previous image var previous = 0; //timer var timer = []; //device var device = userAgent(); //load var loaded = false; //BreakPoint var breakPoint = 782; //ButtonFunction var btnEnable = true; //Whether click or not var clicked = false; //Whether click or not var prefix = 'bg-photo-frame'; //Easing var easing = 'easeOutCubic'; //Fade time var fadeTime = 1000; /* call back before run ----------------------------------------------------------------------*/ if (setting.callbackBefore) { window[setting.callbackBefore].apply(); } if (element.find('li').length) { /*add element ----------------------------------------------------------------------*/ element.wrap("
"); wrapper = $('#bg-photo-frame-images-wrapper'); $('body').prepend("
") controls = $('#bg-photo-frame-controls'); /* setting css ----------------------------------------------------------------------*/ //ul element element.css({ margin: '0px', //余白をなくす padding: '0px', }); wrapper.css({ opacity: '1.0' }); if (setting.height != 'auto') { element.css({ height: setting.height + 'px' //高さをパラメータの値に指定 }) }; //list element element.find('li').css({ position: 'absolute', //ポジションを絶対値に指定して画像を重ねて表示 listStyle: 'none', //リストスタイルを無しに指定 display: 'none', overflow: 'hidden' }); element.find('img').css({ maxWidth: 'none' //画像の幅をパラメータの値に指定 }); //image alement if (setting.width == '100%') { element.find('li').css({ width: '100%' //画像の幅をパラメータの値に指定 }); element.find('img').css({ width: '100%' //画像の幅をパラメータの値に指定 }); } else if (setting.width != 'auto') { element.find('img').css({ width: setting.width + 'px' //画像の幅をパラメータの値に指定 }); }; /*シャッフル ----------------------------------------------------------------------*/ if (setting.shuffle) { var shuffleElement = element.html().split(""); shuffleElement.splice(shuffleElement.length - 1); for (var i = shuffleElement.length - 1; i >= 0; i--) { var r = Math.floor(i * Math.random()); var tmp = shuffleElement[i]; shuffleElement[i] = shuffleElement[r]; shuffleElement[r] = tmp; }; element.empty(); for (var i = 0; i < shuffleElement.length; i++) { element.append(shuffleElement[i]); }; } /*画像の情報を初期化 ----------------------------------------------------------------------*/ for (var i = 0; i < element.find('img').length; i++) { var img = element.find('img').eq(i); var src = img.attr('src'); imgInfo.push({ loaded: false, src: src, width: 0, height: 0, retio: 0, source: null }); } /*======================================================================= /* Window resize =======================================================================*/ /* Params ----------------------------------------------------------------------*/ var photoAnimeTime = 1000; var photoAnimeEasing = 'easeOutQuad'; /* Resize event ----------------------------------------------------------------------*/ //Attach event function setResizeEvent() { $(window).resize(function() { for (var i = 0; i < element.find('li').length; i++) { resizeImages(i); } }) for (var i = 0; i < element.find('li').length; i++) { resizeImages(i); } } /* Image resize ----------------------------------------------------------------------*/ function resizeImages(_num, animation, force, callback) { var windowWidth = $(window).width(); var windowHeight = $(window).height(); var windowRatio = windowWidth / windowHeight; var _li = element.find('li').eq(_num); var _img; var arrow; if (force) { arrow = true; } else { if (_li.css('display') != 'none') { arrow = true; } } if (arrow) { if (_num in imgInfo) { _img = _li.find('img'); var imgRatio = imgInfo[_num]['ratio']; var baseWidth = imgInfo[_num]['width']; var baseHeight = imgInfo[_num]['height']; var imgWidth; var imgHeight; var marginTop; var marginLeft; //Stop animation _img.stop(true, false); if (currentMode == 'background') { if (windowRatio > imgRatio) { imgWidth = windowWidth; imgHeight = parseInt(baseHeight * (imgWidth / baseWidth)); marginTop = -(imgHeight - windowHeight) / 2; marginLeft = 0; } else { imgHeight = windowHeight; imgWidth = parseInt(baseWidth * (imgHeight / baseHeight)); marginTop = 0; marginLeft = -(imgWidth - windowWidth) / 2; } } else if (currentMode == 'photoframe') { if (windowRatio >= imgRatio) { //if window is taller imgHeight = windowHeight; imgWidth = parseInt(baseWidth * (imgHeight / baseHeight)); marginLeft = (windowWidth - imgWidth) / 2; marginTop = 0; } else { //if window is wider imgWidth = windowWidth; imgHeight = parseInt(baseHeight * (imgWidth / baseWidth)); marginLeft = 0; marginTop = (windowHeight - imgHeight) / 2; } } imgWidth = parseInt(imgWidth); imgHeight = parseInt(imgHeight); marginTop = parseInt(marginTop); marginLeft = parseInt(marginLeft); if (animation) { _img.animate({ width: imgWidth + 'px', height: imgHeight + 'px', marginTop: marginTop + 'px', marginLeft: marginLeft + 'px' }, photoAnimeTime, easing, function() { if (callback) { eval(callback + "()"); } }) } else { _img.width(imgWidth); _img.height(imgHeight); _img.css({ marginTop: marginTop + 'px', marginLeft: marginLeft + 'px' }) } } } } function stopResizeImages() { for (var i = 0; i < element.find('li').length; i++) { var _li = element.find('li').eq(_num); var _img = _li.find('img'); _img.stop(false, true); } } // JavaScript Document var mask = []; var maskElement; /* Init ----------------------------------------------------------------------*/ function initMask() { wrapper.after("
") maskElement = $('#images-mask'); //CSS maskElement.css({ background: 'rgba(' + setting.maskColor + ',' + setting.maskColor + ',' + setting.maskColor + ',' + setting.maskOpacity + ')' }) } /* Resize ----------------------------------------------------------------------*/ function resizeMask() { maskElement.css({ width: $(window).width() + 'px', height: $(window).height() + 'px' }); } mask.showMask = function() { maskElement.stop(true, false).fadeTo(fadeTime, 1.0); } mask.hideMask = function() { maskElement.stop(true, false).fadeTo(fadeTime, 0.0); } /* Run ----------------------------------------------------------------------*/ //Attach event $(window).resize(function() { resizeMask(); }) initMask(); resizeMask(); /*======================================================================= /*読み込み =======================================================================*/ /* 読み込み完了イベントの割り当て ----------------------------------------------------------------------*/ for (var i = 0; i < element.find('img').length; i++) { var img = this.find('img').eq(i); var imgSrc = img.attr('src'); var loadImg = $(new Image()); loadImg.attr('id', i); loadImg.bind('load', function() { var index = $(this).attr('id'); var src = $(this).attr('src'); imgInfo[index]['loaded'] = true; setImageSize(index); //画像サイズを取得 attachThumbImage(index, src); //サムネール画像の作成 checkLoadComplete(); //画像が全て読み込まれたかチェック }) loadImg.attr('src', imgSrc); } /*元画像のサイズを取得 ----------------------------------------------------------------------*/ function setImageSize(_index) { var img = element.find('img').eq(_index); var _src = img.attr('src'); var _size = getImageTrueSize(img); _size['ratio'] = _size['width'] / _size['height']; imgInfo[_index]['width'] = _size['width']; imgInfo[_index]['height'] = _size['height']; imgInfo[_index]['ratio'] = _size['ratio']; imgInfo[_index]['loaded'] = true; checkLoadComplete(_index); //読み込み完了のチェック } function getImageTrueSize(image) { var size = []; if (image.prop('naturalWidth')) { size['width'] = image.prop('naturalWidth'); size['height'] = image.prop('naturalHeight'); } else { var img = new Image(); img.src = image.attr('src'); size['width'] = img.width; size['height'] = img.height; } return size; } /* 読み込み完了チェック ----------------------------------------------------------------------*/ function checkLoadComplete(index) { var allLoaded = true; if (index == 0) { //最初の画像が読み込み完了したら動作スタート LoadFirstImageComplete(); } else { for (var i = 0; i < imgInfo.length; i++) { if (!imgInfo[i]['loaded']) { allLoaded = false; break; } } } if (allLoaded) { loaded = true; LoadComplete(); } } /* 最初に表示させる画像の読み込み完了 ----------------------------------------------------------------------*/ function LoadFirstImageComplete() { start(); } /* 全ての画像の読み込み完了 ----------------------------------------------------------------------*/ function LoadComplete() { } /*======================================================================= 動作スタート =======================================================================*/ function start() { showFirstImage(); setResizeEvent(); //最初のタイマーイベントを設定 setTimer(); if (setting.callbackAfter) { window[setting.callbackAfter].apply(); } } /*1番目以外の画像を非表示にする ----------------------------------------------------------------------*/ function showFirstImage() { for (var i = 0; i < element.find('li').length; i++) { //i番目のリスト要素を取得 var li = element.find('li').eq(i); //最初の画像以外は非表示に設定 if (i == 0) { li.fadeIn(setting.fadeSpeed); resizeImages(i); } else { li.hide(); } //sdsds } element.show(); } /*=======================================================================   Photoframe function =======================================================================*/ var commandProcess = []; var interface = false; /*Command ----------------------------------------------------------------------*/ function command(sentence, val) { commandProcess[sentence](val); } commandProcess.modeChange = function() { if (btnEnable) { btnEnable = false; mode.modeChange(); if (currentMode == 'photoframe') { mask.hideMask(); } else if (currentMode == 'background') { hideInterface(); disableTimerInterface(); } disableTimer(); } } commandProcess.modeChangeEnd = function() { if (currentMode == 'photoframe') { showInterface(); enableTimerInterface(); } else if ('background') { timerOn(); mask.showMask(); } setTimer(); btnEnable = true; } commandProcess.imgChange = function(val) { disableTimer(); var newNum = change.getChangeNum(val); dammy.removeDammy(); if (val == 'next' || val == 'prev' || val == 'current') { dammy.setDammy(newNum, val); transition(newNum, 'swipe', val); } else { transition(newNum, 'fade'); } previous = current; current = newNum; removeTimerInterface(); setTimerInterface(); } commandProcess.setSwipeImage = function(val) { resizeImages(val, false, true); } commandProcess.setDammy = function(val) { resizeImages(val, false, true); } commandProcess.swipeDown = function() { dammy.removeDammy(); dammy.setDammy(current, 'current'); disableTimer(); removeTimerInterface(); setTimerInterface(); } commandProcess.swipeUp = function() { setTimer(); } commandProcess.swipeEnd = function() { dammy.removeDammy(); } commandProcess.transitionEnd = function() { setTimer(); } commandProcess.timerChange = function() { var newNum = change.getChangeNum('next'); transition(newNum, 'fade'); current = newNum; } /*Show/Hide Interface ----------------------------------------------------------------------*/ var interfaceTimer = []; function showInterface() { showNav(); showThumbBtn(); showTimer(); interface = true; } function hideInterface() { hideNav(); hideThumbBtn(); hideTimer(); interface = false; } function toggleInterface() { if (interface) { hideInterface(); } else { showInterface(); } } function enableTimerInterface() { if (setting.interfaceTimer) { maskElement.bind('click', function() { if (currentMode == 'photoframe') { showInterface(); removeTimerInterface(); setTimerInterface(); } }) setTimerInterface(); } } function setTimerInterface() { if (setting.interfaceTimer) { interfaceTimer.push(setTimeout(function() { hideInterface() }, setting.autoTimer)); } } function disableTimerInterface() { maskElement.unbind('click'); removeTimerInterface(); } function removeTimerInterface() { for (var i = 0; i < interfaceTimer.length; i++) { clearTimeout(interfaceTimer[i]); } interfaceTimer.length = 0; } /*=======================================================================   Photoframe function =======================================================================*/ /* params ----------------------------------------------------------------------*/ var contentFadeTime = 500; var currentMode = 'background'; var mode = []; /* Change mode ----------------------------------------------------------------------*/ //Toggle mode.modeChange = function() { stopModeChangeAnimation(); if (currentMode == 'background') { photoFrameMode(); } else if (currentMode == 'photoframe') { backgroundMode(); } } //Photoframe function photoFrameMode() { currentMode = "photoframe"; hideContents(); } //Background function backgroundMode() { currentMode = "background"; modeChangeAnimation(mode); } /*Contents animation ----------------------------------------------------------------------*/ //Show function showContents() { $(setting.contents).fadeIn(contentFadeTime, function() { contentsAnimationEnd(); }); } //Hide function hideContents() { $(setting.contents).fadeOut(contentFadeTime, function() { contentsAnimationEnd(); }); } function stopContentsAnimation() { $(setting.contents).stop(false, true); } //Animation end. function contentsAnimationEnd() { //Run resize if mode has photoframe. if (currentMode == "photoframe") { modeChangeAnimation(); } else if (currentMode == "background") { command('modeChangeEnd'); } } /* Change Animation ----------------------------------------------------------------------*/ function modeChangeAnimation(mode) { var currentImage = element.find('li').eq(current).find('img'); resizeImages(current, true, true, 'EndModeChangeAnimation'); } function EndModeChangeAnimation() { if (currentMode == "photoframe") { } else if (currentMode == "background") { showContents(); } changeToggleBtnIcon(); command('modeChangeEnd'); } function stopModeChangeAnimation() { stopContentsAnimation(); } /*=======================================================================   Toggle =======================================================================*/ /* Params ----------------------------------------------------------------------*/ var toggleBtnId = prefix + '-toggle'; var iconClassPhotoFrame = 'glyphicon-picture'; var iconClassBlog = 'glyphicon-list-alt'; var toggleButtonSrc = ''; var toggleButton; /* init ----------------------------------------------------------------------*/ function initPhotoFrame() { controls.append(toggleButtonSrc); toggleButton = $('#' + toggleBtnId); if (device == 'pc') { toggleButton.click(function() { command('modeChange'); return false; }) } else { toggleButton.bind('touchstart', function(event) { command('modeChange'); event.preventDefault(); }) } } /* Icon Change ----------------------------------------------------------------------*/ function changeToggleBtnIcon() { $('#' + toggleBtnId).find('span').removeClass(iconClassPhotoFrame); $('#' + toggleBtnId).find('span').removeClass(iconClassBlog); if (currentMode == 'background') { $('#' + toggleBtnId).find('span').addClass(iconClassPhotoFrame); } else if (currentMode == 'photoframe') { $('#' + toggleBtnId).find('span').addClass(iconClassBlog); } } if (setting.photoFrame) { initPhotoFrame(); } /*=======================================================================   Navigation =======================================================================*/ var nav; var prev; var next; var navClicked = false; var navPrefix = prefix + '-nav'; /* Init ----------------------------------------------------------------------*/ function initNav() { if (element.find('li').length > 1) { //prev controls.append(''); //next controls.append(''); if (device == 'pc') { $('.' + navPrefix).click(function() { navClick($(this)); return false; }) } else { $('.' + navPrefix).bind('touchstart', function(event) { navClick($(this)); event.preventDefault(); }) } $(window).resize(function() { resizeNav(); }) nav = $('.' + navPrefix); } } /* Click ----------------------------------------------------------------------*/ function navClick(btn) { if (btnEnable && nav.hasClass('active')) { var btn = btn.attr('id').replace(navPrefix + '-', ''); command('imgChange', btn); } } /* Show/Hide ----------------------------------------------------------------------*/ function showNav() { nav.stop(false, true) nav.fadeIn(fadeTime, function() { nav.addClass('active'); }); navPosition(); } function hideNav() { nav.removeClass('active'); nav.stop(false, true); nav.fadeOut(); } function stopNav() { } /* Resize ----------------------------------------------------------------------*/ function resizeNav() { navPosition(); } function navPosition() { var left; var top = ($(window).height() - nav.width()) / 2; $('#' + navPrefix + '-prev, #' + navPrefix + '-next').css({ top: top + 'px' }) } /* Init ----------------------------------------------------------------------*/ if (setting.photoFrame) { initNav(); } /*======================================================================= Image Thumbnails =======================================================================*/ var thumbPage; var thumbBtn; var thumbPrefix = prefix + '-thumb'; var thumbPageClass = thumbPrefix + '-thumbs'; var thumbBtnClass = thumbPrefix + '-btn'; var thumbTime = 500; /* Init ----------------------------------------------------------------------*/ function initThumbs() { //ボタン controls.append(''); thumbBtn = $('#' + thumbBtnClass); //ページ controls.append('
'); thumbPage = $('#' + thumbPageClass + ' ul'); //サムネール for (var i = 0; i < element.find('li').length; i++) { var thumb = '
  • '; thumbPage.append(thumb); } //Event if (device == 'pc') { thumbBtn.click(function() { toggleThumbBtn(); return false; }) } else { thumbBtn.bind('touchstart', function(event) { toggleThumbBtn(); event.preventDefault(); }) } $('#' + thumbPageClass).bind('click', function() { closeThumbs(); return false; }) } if (setting.photoFrame) { initThumbs(); } function attachThumbImage(num, src) { var thumb = thumbPage.find('li').eq(num).find('a'); var thumbImg = new Image(); thumbImg.src = src; //元画像のサイズを取得 imgWidth = imgInfo[num]['width']; imgHeight = imgInfo[num]['height']; imgRatio = imgInfo[num]['ratio']; //サムネールのサイズを取得 thumbSize = thumbPage.find('li').width(); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var fixWidth; var fixHeight; var fixMarginTop = 0; var fixMarginLeft = 0; var drawPositonX = 0; var drawPositonY = 0; if (imgRatio > 1) { //横長の場合 fixHeight = thumbSize; fixWidth = thumbSize * imgRatio; drawPositonX = (thumbSize - (thumbSize * imgRatio)) / 2; } else {  //縦長の場合 fixWidth = thumbSize; fixHeight = imgHeight * (thumbSize / fixWidth); drawPositonY = (thumbSize - (thumbSize / imgRatio)) / 2; } ctx.drawImage(thumbImg, drawPositonX, drawPositonY, fixWidth, fixHeight); thumb.append(canvas); thumb.click(function() { ThumbClick(thumb); return false; }) } /* Resize ----------------------------------------------------------------------*/ function resizeThumbs() { var innerWidth = $(window).width(); var innerHeight = $(window).height(); var innerPaddingHorizontal = $(window).width() * 0.02; $('#' + thumbPageClass + '-inner').css({ width: innerWidth + 'px', //height : innerHeight + 'px', padding: innerPaddingHorizontal + 'px ' + innerPaddingHorizontal + 'px', }) //サムネールのサイズを取得 var thumbSize = thumbPage.find('li').width(); var thumbMargin = removeUnit(thumbPage.find('li').css('margin')); var ulMargin = ( $('#' + thumbPageClass + ' ul').width() - (thumbSize + thumbMargin * 2) * parseInt($('#' + thumbPageClass + ' ul').width() / (thumbMargin * 2 + thumbSize)) ) / 2; $('#' + thumbPageClass + ' ul').css({ marginLeft: ulMargin + 'px' }) } $(window).resize(function() { resizeThumbs(); }) resizeThumbs(); /* Button ----------------------------------------------------------------------*/ //Show function showThumbBtn() { thumbBtn.stop(false, true); thumbBtn.fadeIn(fadeTime); } //Hide function hideThumbBtn() { thumbBtn.stop(false, true); thumbBtn.fadeOut(fadeTime); } //サムネールボタンの開閉 function toggleThumbBtn() { thumbBtn.toggleClass('active'); toggleThumbs(); } /* Event of Thumbs ----------------------------------------------------------------------*/ function toggleThumbs() { thumbAnimationStop(); if (thumbBtn.hasClass('active')) { openThumbs(); } else { closeThumbs(); } } function thumbAnimationStop() { $('#' + thumbPageClass).stop(false, true); } function openThumbs() { $('#' + thumbPageClass).show() $('#' + thumbPageClass).animate({ width: '100%', height: '100%' }, thumbTime, easing); } function closeThumbs() { $('#' + thumbPageClass).animate({ width: '0%', height: '0%' }, thumbTime, easing, function() { $('#' + thumbPageClass).hide() }); thumbBtn.removeClass('active'); } /* Thumbnails ----------------------------------------------------------------------*/ //Event function ThumbClick(thumb) { var num = thumb.attr('href').replace('#', ''); command('imgChange', num); closeThumbs(); } /*======================================================================= Timer Chnage =======================================================================*/ var timer; var timerBtn; var timerPrefix = prefix + '-timer'; var timerBtnId = timerPrefix + '-btn'; /* Init ----------------------------------------------------------------------*/ function initTimer() { if (setting.autoChange && element.find('li').length > 1) { var timerBtnSrc = ''; controls.append(timerBtnSrc); timerBtn = $('#' + timerBtnId); if (setting.autoChange && element.find('li').length > 1) { timerBtn.addClass('on'); } //Event if (device == 'pc') { timerBtn.click(function() { toggleTimer(); return false; }) } else { timerBtn.bind('touchend', function(event) { toggleTimer(); event.preventDefault(); }) } } } initTimer(); /* Click ----------------------------------------------------------------------*/ function toggleTimer() { timerBtn.toggleClass('on'); if (timerBtn.hasClass('on')) { timerOn(); } else { timerOff(); } } function timerOn() { timerBtn.addClass('on'); setTimer(); } function timerOff() { timerBtn.removeClass('on'); disableTimer(); } /* Event ----------------------------------------------------------------------*/ function setTimer() { disableTimer(); if (setting.autoChange && timerBtn.hasClass('on') && element.find('li').length > 1) { enableTimer(); } } function enableTimer() { timer.push(setTimeout(function() { timerChange() }, setting.autoTimer)); } function disableTimer() { for (var i = 0; i < timer.length; i++) { clearTimeout(timer[i]); } timer.length = 0; } /* Change ----------------------------------------------------------------------*/ function timerChange() { command('timerChange'); } /* Show/Hide ----------------------------------------------------------------------*/ function showTimer() { timerBtn.stop(false, true); timerBtn.fadeIn(); timerBtn.addClass('active'); } function hideTimer() { timerBtn.removeClass('active'); timerBtn.stop(false, true); timerBtn.fadeOut(); } // JavaScript Document var change = []; change.getChangeNum = function(val) { var newNum; if (isNaN(val)) { newNum = changeType[val](); } else { newNum = changeType['num'](val); } return newNum; } var changeType = []; changeType.next = function() { var newNum; if (current == element.find('li').length - 1) { //一番最後の画像を表示させている場合は最初に戻る newNum = 0; } else { //それ以外は次の画像を指定する。 newNum = parseInt(current) + 1; } return newNum; } changeType.prev = function() { var newNum; if (current == 0) { //一番最後の画像を表示させている場合は最初に戻る newNum = element.find('li').length - 1; } else { //それ以外は次の画像を指定する。 newNum = parseInt(current) - 1; } return newNum; } changeType.current = function() { return current; } changeType.num = function(val) { return val; } // JavaScript Document transitionMode = 'fade'; function initTransition() { } function changeTransitionMode(mode) { transitionMode = mode; } function transition(num, transitionMode, direction) { transitionStop(); if (transitionMode == 'fade') { fade.transitionFade(num); } else if (transitionMode == 'swipe') { swipe.transitionSwipe(num, direction); } } function transitionStop() { if (transitionMode == 'fade') { transitionFadeStop(); } else if (transitionMode == 'swipe') { } } /*======================================================================= Image Transition(Fade) =======================================================================*/ var fade = []; fade.transitionFade = function(num) { //各画像の表示・非表示 var length = element.find('li').length; for (var i = 0; i < length; i++) { //i番目のリスト要素を取得 var li = element.find('li').eq(i); li.stop(true, false); if (num == i) { //クリックされたボタンの順番と同一なら画像をフェードで表示 li.css({ marginLeft: 0 }) if (num != current) { if (li.css('display') == 'none') { li.fadeIn(setting.fadeSpeed, function() { transitionFadeEnd(); }); } else { li.fadeTo(setting.fadeSpeed, 1.0, function() { transitionFadeEnd(); }); } resizeImages(i); } } else { //そうでなければフェードで非表示 li.fadeOut(setting.fadeSpeed); } } transitionFadeEnd(); } function transitionFadeStop() { var length = element.find('li').length; for (var i = 0; i < length; i++) { var li = element.find('li').eq(i); li.stop(false, true); } } function transitionFadeEnd() { command('transitionEnd'); } /*======================================================================= Image Auto change(Swipe) =======================================================================*/ var swipe = []; var swipeSpeed = 2000; var swipeAnmation = false; var currentSwipeNum = 0; var nextSwipeNum = 0; var swipeSpeedLimit = 5; var swipeSpeedTimerSpan = 100 swipe.transitionSwipe = function(num, direction) { if (!swipeAnmation) { currentSwipeNum = parseInt(current); } swipeLoopStop(); swipeLoop(num, direction); } function swipeLoop(num, direction) { var margin; var swipeEasing = easing; var speed = swipeSpeed; var brake = 1; var currentMargin = removeUnit(wrapper.css('marginLeft')); var _nextSwipeNum; var wrapperMargin; speed = setSpeed(num, direction); setSwiprPosition(num, direction); setSwipeImage(num, direction); wrapper.animate({ marginLeft: 0 }, speed, swipeEasing, function() { swipeEnd(num, direction); } ); swipeAnmation = true; } function setSwiprPosition(num, direction) { var margin = 0; var wrapMargin = removeUnit(wrapper.css('marginLeft')); if (direction == 'current') { margin = removeUnit(wrapper.css('marginLeft')); } else if (direction == 'next') { margin = $(window).width() + wrapMargin; } else if (direction == 'prev') { margin = -$(window).width() + wrapMargin; } wrapper.css({ marginLeft: margin + 'px' }) } function setSwipeImage(num, direction) { var img = element.find('li').eq(num); command('setSwipeImage', num); img.css({ display: 'block', marginLeft: 0 }); element.find('li:not(:eq(' + num + '))').css({ display: 'none' }); } function setSpeed(num, direction) { var speed = 0; var brake = 1; var margin = removeUnit(wrapper.css('marginLeft')); if (margin >= 0) { speed = ($(window).width() - margin) * brake; } else { speed = ($(window).width() + margin) * brake; } return speed; } function swipeEnd(num, direction) { swipeLoopStop(); command('swipeEnd'); } function swipeLoopStop() { wrapper.stop(true, false); swipeAnmation = false; } /*======================================================================= Swipe Interaction =======================================================================*/ var swipeActive; var swipeActiveStart; var swipeActiveCurrent; var swipeStartMargin; var swipeDistance; var swipeSpeed; var swipeSpeedStart; var swipeSpeedCurrent; var swipeSpeedTimer = [] if (device == 'pc') { maskElement.mousedown(function(e) { swipeDown(e.pageX); }) $(window).mousemove(function(e) { swipeMove(e.pageX); }) $(window).mouseup(function(e) { swipeUp(e.pageX); }) } else { maskElement.bind('touchstart', function() { swipeDown(event.changedTouches[0].pageX); }) $(window).bind('touchmove', function() { swipeMove(event.changedTouches[0].pageX); }) $(window).bind('touchend', function() { swipeUp(event.changedTouches[0].pageX); }) } function swipeDown(_x) { if (currentMode == 'photoframe') { swipeLoopStop(); swipeActive = true; swipeDistance = 0; swipeSpeed = 0; setSwiprPosition(current, 'current'); setSwipeImage(current, 'current'); swipeActiveStart = _x; swipeSpeedStart = _x; swipeStartMargin = removeUnit(wrapper.css('marginLeft')); swipeSpeedTimer.push(setInterval(function() { setSwipeSpeed() }, swipeSpeedTimerSpan)) command('swipeDown'); } } function setSwipeSpeed() { swipeSpeed = swipeSpeedStart - swipeSpeedCurrent; swipeSpeedStart = swipeSpeedCurrent; } function swipeMove(_x) { if (swipeActive) { swipeLoopStop(); swipeDistance = _x - swipeActiveStart; swipeSpeedCurrent = _x; var margin = swipeStartMargin + swipeDistance; wrapper.css({ marginLeft: margin + 'px' }) } } function swipeUp(_x) { if (swipeActive) { swipeLoopStop(); for (var i = 0; i < swipeSpeedTimer.length; i++) { clearInterval(swipeSpeedTimer[i]); } swipeSpeedTimer.length = 0; var direction = 'current'; var wrapperMargin = removeUnit(wrapper.css('marginLeft')); swipeSpeed = swipeSpeedStart - _x; if (swipeSpeed > swipeSpeedLimit || swipeSpeed < -swipeSpeedLimit) { if (swipeSpeed > 0) { direction = 'next'; } else { direction = 'prev'; } } else { if (wrapperMargin > $(window).width() / 2 || wrapperMargin < -$(window).width() / 2) { if (wrapperMargin < 0) { direction = 'next'; } else { direction = 'prev'; } } } if (direction) { command('imgChange', direction); } command('swipeUp'); swipeDistance = 0; } swipeActive = false; } // JavaScript Document var dammy = []; var dammyGroup; /* init ----------------------------------------------------------------------*/ function initDammy() { dammyGroup = $('