Question

I am writing a script which lets user search and find images from a url. I got it, and can get the urls of the images (one or more) in an array. I want to show one image at a time, with <<prev and next>> buttons and provide an upload button in a form.

Any hints on how to implement an inline slideshow, and upload the image that user has selected?

eg:

<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>

I can use something like jquery cycle (http://malsup.com/jquery/cycle2/) to show the next/ prev buttons and cycle the image. but when that happens, how can I update the value in the form for the image src?

Answer 1

You could try something like this:

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;
}

Of course you’d have to use consistent id and class attributes, as mine is only an example.