探してみるとPCと共通で使えるものはあまりなく、
スマートフォン専用であるものがほとんどでした。
その中で、スマートフォンとPCと共通で使えるフォトギャラリーを見つけましたので
紹介します。
画像をフリック可能なフォトギャラリー
まずは、データフォルダのヘルプページでも使ってるフォトギャラリーです。
PCならマウスでドラッグ、スマートフォンならフリックで画像を切り替えられます。
PCとスマートフォン共通で利用できるので、別々なページに切り替える必要がなく便利です。
下部の画像をクリック／タップしても画像切替が可能です。
ちょっと長いですが、以下のソースコードだけで実装できます。
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style id='page-skin-1' type='text/css'><!--
@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-weight: inherit;
/* outline: 0;*/
}
html { font-size: 75%; filter: expression(document.execCommand("BackgroundImageCache", false, true));}
img { vertical-align: text-bottom; -ms-interpolation-mode: bicubic;}
strong { font-weight: bold; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; vertical-align: top; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a:focus { overflow: hidden; }
option { padding-right: 10px; }
body { font-size: 100%; line-height: 140%; font-family: Arial,Helvetica,sans-serif; color: #000; text-align: center; background: #eaeaea; }
a:link { text-decoration:none; color: #000;}
a:visited { text-decoration:none; color: #000;}
a:active { text-decoration:none; color: #000;}
a:hover { text-decoration:none; color: #000;}
h1 { margin-bottom: 20px; padding: 10px 0; background: #000; color: #fff; font-size: 12px; font-weight: bold; text-align: center; }
h2 { padding: 30px 0; width: 100%; font-size: 12px; }
#container { margin: 0 auto; width: 400px; text-align: center; }
#flickscroll { margin: 0 auto; width: 400px; height: 400px; text-align: left; position: relative; overflow: hidden; cursor: pointer; }
#flickscroll ul { top: 0; left: 0; height: 400px; position: absolute; overflow: hidden; }
#flickscroll ul li { width: 400px; height: 400px; float: left; display: inline; overflow: hidden; }
#flickthumb { margin: 10px auto; width: 400px; height: 100px; text-align: center; }
#flickthumb ul { width: 400px; height: 100px; }
#flickthumb ul li { width: 100px; height: 100px; float: left; cursor: pointer; display: inline; }
#flickthumb ul li.active { filter:alpha(opacity=100)!important; -moz-opacity: 1!important; opacity: 1!important; }
#flickscroll ul:after,
#flickthumb ul:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }
#flickscroll ul,
#flickthumb ul { display: inline-block; overflow: hidden; }
--></style>
<script language='javascript' type='text/javascript'>
$(function(){
var $setMainId = $('#flickscroll');
var $setThumbId = $('#flickthumb');
var scrollSpeed = 300;
var $setMainUl = $setMainId.children('ul'),
$setThumbUl = $setThumbId.children('ul'),
$setThumbLi = $setThumbUl.children('li'),
$setThumbLiFirst = $setThumbUl.children('li:first'),
listWidth = parseInt($setMainUl.children('li').css('width')),
listCount = $setMainUl.children('li').length,
leftMax = -((listWidth)*((listCount)-1));
$setMainUl.each(function(){
$(this).css({width:(listWidth)*(listCount)});
});
var isTouch = ('ontouchstart' in window);
$setMainUl.bind(
{'touchstart mousedown': function(e){
var $setMainUlNot = $setMainId.children('ul:not(:animated)');
$setMainUlNot.each(function(){
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);
if(this.left < 0 && this.left > leftMax){
$(this).css({left:this.left});
} else if(this.left >= 0) {
$(this).css({left:'0'});
} else if(this.left <= leftMax) {
$(this).css({left:(leftMax)});
}
},'touchend mouseup mouseout': function(e){
if (!this.touched) {
return;
}
this.touched = false;
var $setThumbLiActive = $setThumbUl.children('li.active');
if(this.leftBegin > this.left && (!((this.leftBegin) === (leftMax)))){
$(this).stop().animate({left:((this.leftBegin)-(listWidth))},scrollSpeed);
$setThumbLiActive.each(function(){
$(this).removeClass('active');
$(this).next().addClass('active');
});
} else if(this.leftBegin < this.left && (!((this.leftBegin) === 0))) {
$(this).stop().animate({left:((this.leftBegin)+(listWidth))},scrollSpeed);
$setThumbLiActive.each(function(){
$(this).removeClass('active');
$(this).prev().addClass('active');
});
} else if(this.leftBegin === 0) {
$(this).css({left:'0'});
} else if(this.leftBegin <= leftMax) {
$(this).css({left:(leftMax)});
}
}
});
$setThumbLi.click(function(){
var connectCont = $setThumbLi.index(this);
$setMainUl.stop().animate({left:(-(listWidth)*(connectCont))},scrollSpeed);
$setThumbLi.removeClass('active');
$(this).addClass('active');
});
$setThumbLiFirst.addClass('active');
$setThumbLi.css({opacity:'0.5'});
var agent = navigator.userAgent;
if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
$setThumbLi.hover(function(){
$(this).stop().animate({opacity:'1'},300);
},function(){
$(this).stop().animate({opacity:'0.5'},300);
});
}
});
</script>
<div align=center>
<div id="flickscroll">
<ul>
<li><img src="http://www.takahara-books.com/Image/Android/data_folder/device30.png" width=320 height=400></li>
<li><img src="http://www.takahara-books.com/Image/Android/data_folder/device100.png" width=320 height=400></li>
<li><img src="http://www.takahara-books.com/Image/Android/data_folder/device200.png" width=320 height=400></li>
</ul>
</div><!--/#flickscroll-->
<div id="flickthumb">
<ul>
<li><img src="http://www.takahara-books.com/Image/Android/data_folder/device30.png" width="50" height="50" alt="" /></li>
<li><img src="http://www.takahara-books.com/Image/Android/data_folder/device100.png" width="50" height="50" alt="" /></li>
<li><img src="http://www.takahara-books.com/Image/Android/data_folder/device200.png" width="50" height="50" alt="" /></li>
</ul>
</div><!--/#flickthumb-->
</div>
たぶん、アレンジすればもう少しいろいろ飾り付けもできるかと思います。
ぜひお試しください☆
参考サイト：jQueryでフリック／スワイプ動作の画像スライドギャラリーを作成する実験
0 件のコメント:
コメントを投稿