ちゃんと覚えておけよ?

忘れちゃいけない事のメモ、覚え書き

jQuery Mobileを使った、シンプルなイメージギャラリー

jQuery Mobileを使った、シンプルなイメージギャラリー

<!DOCTYPE HTML>
<html>
<head>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css” />
<script src=”http://code.jquery.com/jquery-1.6.2.min.js”></script>
<script src=”http://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=”画像1”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/2.jpg” alt=”画像2”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/3.jpg” alt=”画像3”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/4.jpg” alt=”画像4”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/5.jpg” alt=”画像5”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/2.jpg” alt=”画像6”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/3.jpg” alt=”画像7”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/4.jpg” alt=”画像8”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/5.jpg” alt=”画像9”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/6.jpg” alt=”画像10”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/7.jpg” alt=”画像11”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/8.jpg” alt=”画像12”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/9.jpg” alt=”画像13”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/10.jpg” alt=”画像14”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/11.jpg” alt=”画像15”/>
</a>
<a href=”#imgshow” data-transition=”pop” data-rel=”dialog”>
<img src=”images/12.jpg” alt=”画像16”/>
</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

*