jQuery Mobileを使った、シンプルなイメージギャラリー
jQuery Mobileを使った、シンプルなイメージギャラリー
<!DOCTYPE HTML>
<html>
<head>
<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css” />
<script src=”https://code.jquery.com/jquery-1.6.2.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js”></script>
<style type=”text/css”>
#pagecontent {
text-align:center;
}
.gallerycontent a img {
height:80px;
width:80px;
padding:3px;
background-color:#222;
}
#prevbtn, #nextbtn {
margin:10px 15px;
}
</style>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<title>jQuery Mobile Dialog-Based Gallery</title>
</head>
<body>
<div data-role=”page” id=”gallerypage” data-theme=”a”>
<div data-role=”header”>
<h1>Gallery</h1>
</div> <!–header–>
<div data-role=”content” id=”pagecontent”>
<div>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/1.jpg” alt=”画像１”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/2.jpg” alt=”画像２”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/3.jpg” alt=”画像３”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/4.jpg” alt=”画像４”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/5.jpg” alt=”画像５”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/2.jpg” alt=”画像６”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/3.jpg” alt=”画像７”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/4.jpg” alt=”画像８”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/5.jpg” alt=”画像９”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/6.jpg” alt=”画像１０”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/7.jpg” alt=”画像１１”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/8.jpg” alt=”画像１２”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/9.jpg” alt=”画像１３”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/10.jpg” alt=”画像１４”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/11.jpg” alt=”画像１５”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/12.jpg” alt=”画像１６”/>
</a>
</div>
</div> <!–/content–>
<div data-role=”footer” style=”height:40px;line-height:40px;”>
<center>jQuery Mobile Galeery</center>
</div> <!–/footer–>
</div> <!–/page–>
<div data-role=”dialog” id=”imgshow” data-theme=”a”>
<div data-role=”header” data-theme=”a”>
<div id=”dialoghead”></div>
</div><!– /header –>
<div data-role=”content” data-theme=”a”>
<center><div id=”dialogcontent”></div></center>
</div>
<div data-role=”footer”>
<center>
<a href=”#” id=”prevbtn” data-role=”button” data-iconpos=”notext” data-icon=”arrow-l”>Previous</a>
<a href=”#” id=”nextbtn” data-role=”button” data-iconpos=”notext” data-icon=”arrow-r”>Next</a>
</center>
</div>
</div>
<script type=”text/javascript”>
<!–
$(‘.gallerycontent img’).bind(‘tap’,function(event, ui){
var src = $(this).attr(“src”);
var alt = $(this).attr(“alt”);
$(‘#dialogcontent’).empty().append(‘<a href=”#gallerypage”><img src=”‘ + src + ‘” style=”width:100%; height:100%;”/></a>’ );
$(‘#dialoghead’).empty().append(‘<center><h2>’ + alt + ‘</h2></center>’ );
$(this).parent().addClass(‘selectedimg’);
});
function gonext() {
var current = $(‘a.selectedimg’);
if (current.hasClass(‘last’)) {
var next = $(‘a.first’)
} else {
var next = current.next();
}
var src = next.find(‘img’).attr(“src”);
var alt = next.find(‘img’).attr(“alt”);
next.addClass(‘selectedimg’);
current.removeClass(‘selectedimg’);
$(‘#dialogcontent’).empty().append(‘<a href=”#gallerypage”><img src=”‘ + src + ‘” style=”width:100%; height:100%;”/></a>’ );
$(‘#dialoghead’).empty().append(‘<center><h2>’ + alt + ‘</h2></center>’ );
}
function goprev() {
var current = $(‘a.selectedimg’);
if (current.hasClass(‘first’)) {
var prev = $(‘a.last’)
} else {
var prev = current.prev();
}
var src = prev.find(‘img’).attr(“src”);
var alt = prev.find(‘img’).attr(“alt”);
prev.addClass(‘selectedimg’);
current.removeClass(‘selectedimg’);
$(‘#dialogcontent’).empty().append(‘<a href=”#gallerypage”><img src=”‘ + src + ‘” style=”width:100%; height:100%;”/></a>’ );
$(‘#dialoghead’).empty().append(‘<center><h2>’ + alt + ‘</h2></center>’ );
}
$(‘#nextbtn’).bind(‘tap’,function(event, ui){
gonext();
});
$(‘#imgshow’).bind(‘swipeleft’,function(event, ui){
gonext();
});
$(‘#prevbtn’).bind(‘tap’,function(event, ui){
goprev();
});
$(‘#imgshow’).bind(‘swiperight’,function(event, ui){
goprev();
});
// –>
</script>
</body>
</html>
Comment