0

ユーザーが URL から画像を検索および検索できるようにするスクリプトを作成しています。私はそれを取得し、配列内の画像 (1 つ以上) の URL を取得できます。<<prevとボタンを使用して一度に 1 つの画像をnext>>表示し、フォームにアップロード ボタンを提供したいと考えています。

インライン スライドショーを実装し、ユーザーが選択した画像をアップロードする方法に関するヒントはありますか?

例えば：

<div id="imgSelected">

  <img src="img1.jpg">
  <img src="img2.jpg">
</div>

<form>
  <input type='hidden' value='img1.jpg>
  <input type=text' placeholder='title'>
  <input type='submit' value='upload'>
</form>

jquery サイクル (http://malsup.com/jquery/cycle2/) のようなものを使用して、次/前のボタンを表示し、画像を循環させることができます。しかし、それが発生した場合、画像 src のフォームの値を更新するにはどうすればよいですか?

4

1 に答える 1

0

次のようなことを試すことができます：

http://jsfiddle.net/EpjYe/

$(document).ready(function () {
    var all_images = $("#images").children(".image");
    var cur_selected = all_images.filter(".image-selected");
    checkNoneSelected(all_images, cur_selected);

    $("#prev").on("click", function () {
        var all_images = $("#images").children(".image");
        var cur_selected = all_images.filter(".image-selected");

        if (!checkNoneSelected(all_images, cur_selected)) {
            cur_selected = moveImage(all_images, cur_selected, -1, 0);
            $("#hidden1").val(cur_selected.prop("src"));
        }
    });

    $("#next").on("click", function () {
        var all_images = $("#images").children(".image");
        var cur_selected = all_images.filter(".image-selected");

        if (!checkNoneSelected(all_images, cur_selected)) {
            cur_selected = moveImage(all_images, cur_selected, 1, all_images.length-1);
            $("#hidden1").val(cur_selected.prop("src"));
        }
    });
});

function checkNoneSelected(all_images, cur_selected) {
    if (cur_selected.length === 0) {
        all_images.first().addClass("image-selected");
        return true;
    }
    return false;
}

function moveImage(all_images, cur_selected, direction, end_pos) {
    var cur_index = all_images.index(cur_selected);

    if (cur_index !== end_pos) {
        var new_index = cur_index + direction;
        cur_selected.removeClass("image-selected");
        cur_selected = $(all_images[new_index]);
        cur_selected.addClass("image-selected");
    }

    return cur_selected;
}

もちろん、一貫した属性idとclass属性を使用する必要があります。私のものは例にすぎません。

于 2012-10-24T06:46:51.763 に答える