QA@IT

カメラアプリでのjqueryプラグインを使った画面遷移の方法

1987 PV

【聞きたいこと】
カメラアプリでのjqueryのプラグインを使った画面遷移の方法で3つ迷っています。以下のコードにはalertを指定していますが、1、画像をクリックするので$(image)に、画面遷移を指定するのか? 2、いや、#listに画面遷移を指定したほうがいいのか?3、まったく別のところに画面遷移の指定をすればいいのか?プラグインを使えばいいのはわかったのですが、どこに書けばいいのかがわかりません。
【実行したいプログラム】
現在、カメラ撮影アプリを作っています。カメラボタンをクリックで標準のカメラで撮影し、画像を表示するところまで完成しました。
最後に、写真をタッチすると縦に画面遷移するプログラムを追加したいと考えています。
jqueryでの画面遷移を調べると、カメラアプリのように画像が増えていっても画面遷移が適用できるプログラムを見つけることができませんでした。投稿される画像でいうと、twitterにプロフィールページの最近の投稿された写真のサムネイル画像をクリックすると画面遷移が発生するプログラムがありますが、ソースはHTML CSSまでしか理解できませんでした。環境は、windows monaca phonegapです。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <script src="plugins/plugin-loader.js"></script> 
    <script src="js/main.js"></script>
    <link rel="stylesheet" href="plugins/plugin-loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
    </script>
</head>
<body>
        <div ID="contents"><!-- コンテンツが入る -->
            <div ID="list"><!-- 撮影した写真が入る -->

            </div>

            <div ID ="take-photo">
            <input type="button" ID="camera_button" value="撮影" onclick="snapPicture()">
            </div>
        </div>
</body>
</html>
//撮影ボタンがクリックされたときの処理
    function snapPicture(){navigator.camera.getPicture( onSuccess,onError,{
        quality: 100,
        destinationType: Camera.DestinationType.FIRE_URL,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 340,
        targetHeight: 300,
        saveToPhotoAlbum: false });
    }

    //成功時の処理
    function onSuccess(imageURL){
        var image = document.createElement("img");//変数imageに、新規作成したimgタグを代入
        $(image).attr(("src"),imageURL);//imageにsrc属性を追加
        $("#list").append(image);//#listにimageを追加
        $(image).click(function(){
                    alert("画像タッチしました");
        });
    }

    //エラー時の処理
    function onError(){
        alert("撮影に失敗しました");
    }
ウォッチ

この質問への回答やコメントをメールでお知らせします。