iPhoneやAndroid端末のWebkit系ブラウザで最適化された

質問

iPhoneやAndroid端末のWebkit系ブラウザで最適化されたWebページを作成しようとしています。
その中で、画像のサムネイルを一覧で表示して、それらを複数選択して操作させるようなインタフェースを作りたいと思っています。
各サムネイルの横にチェックボックスなどを配置すればよいのですが、スマートフォンの画面が小さく、押し間違えなどユーザビリティ上もっといい方法がないかと思っています。
ローカルのアプリですと、「複数選択（モード）」みたいな感じで、サムネイルを複数選択できるような動作ができるのですが、それがWebブラウザ上でできるのか、または似たような方法がないか、どなたかアドバイスいただけませんでしょうか？

回答No.2

kuzumiHK

＞サムネイルを複数選択できるような動作
という部分にしぼってjQueryを使ったソースを作ってみました。

<style type="text/css">
<!--

form#hoge02{
display:none;
}

ul.select li{
cursor:pointer;
}

ul.select li.this{
border:1px solid #f00;
}

.checked img{
border:2px solid #f00;
}

//-->
</style>

<ul class="select">
<li id="a">単独表示</li>
<li id="b">複数選択</li>
</ul>

<div id="hoge01">
<ul>
<li><a href="photo01_large.gif"><img src="photo01.gif" alt="写真1"></a></li>
<li><a href="photo02_large.gif"><img src="photo02.gif" alt="写真2"></a></li>
</ul>
</div>

<form id="hoge02">
<ul>
<li><img src="photo01.gif" alt="写真1"><input type="hidden" name="p01" id="p01" value="" rel="photo01_download.gif"></li>
<li><img src="photo02.gif" alt="写真2"><input type="hidden" name="p02" id="p02" value="" rel="photo02_download.gif"></li>
</ul>
<input type="submit" value="選択した画像をダウンロード">
</form>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$("ul.select li#a").click(
function () {
$("div#hoge01").css('display','block');
$("form#hoge02").css('display','none');
}
);

$("ul.select li#b").click(
function () {
$("div#hoge01").css('display','none');
$("form#hoge02").css('display','block');
}

);

$("ul.select li").click(
function () {
$("ul.select li").attr('class','');
$(this).attr('class','this');
}
);

$("form#hoge02 ul li").toggle(
function () {
$(this).attr('class','checked');
$(this).find('input').attr('value',$(this).find('input').attr('rel'));
},
function () {
$(this).attr('class','');
$(this).find('input').attr('value','');
}
);

</script>

ただ、質問で実現しようとしていること自体にいろいろと複雑な用件が絡んでいますね。

(1)まず、画像によってダウンロードになったり、画面表示になったりしなければならない。
これを静的ページで行うには、MIMEタイプを画像名によって切り替えるために.htaccessかサーバの設定をしなければなりません。
参考URL
http://faq.creasus.net/04/0606/

(2)また、選択して、まとめて画像をダウンロードするということなので、画像を選択したあとに、まとめてダウンロードするようなスクリプトが必要です。

ここに挙げたソースでは、複数選択モードで選択した画像をhiddenに設定して、クエリーで送るところまでです。

回答No.1

kuzumiHK

labelでimgを囲うというのはいかがでしょうか。

<input type="checkbox" value="1" name="c1" id="c1" /><label for="c1"><img src="hoge.gif" alt=""></label>

<label><input type="checkbox" name="c1" value="1"><img src="hoge.gif" alt=""></label>

参考URL
http://www.nishishi.com/css/form-checkbox-hover.html
http://www.htmq.com/html/label.shtml
http://www.tagindex.com/html_tag/form/label.html

お礼

アドバイスありがとうございます。
やりたいことは、通常はサムネイルをタップでプレビュー画像を表示、複数選択モードでは同じサムネイルをタップした時に選択状態になって複数選択したものがダウンロードできるというような、同じ「サムネイルをタップ」という動作でもモードによって動作を変えたいと思っています。
そのような切り替えがjavascript等でできませんでしょうか。