Question

Is there a jQuery plug-in / JavaScript control that will allow me to display array of images, but with (at least) option to delete image on certain user action.

Something like this: http://www.gmarwaha.com/jquery/jcarousellite/index.php but with dedicated delete button on every image.

First extra option that I can think of is to rearrange order of images.

If not… I guess I’ll start extending mentioned jcarousellite myself….

Answer 1

You could just add a click event to each image and some jQuery to remove the image from the list. There is no need to write a separate plugin. Syntax below might be wrong. I am writing this on my phone so no way to check. But you get the picture (sic).

<script type="text/javascript">
    $(function() {
        $("div.jCarouselLite > img").click(function(){
            $(this).hide();
        });
    });
</script>

        <div class="jCarouselLite">
            <ul>
                <li><img src="image/1.jpg" alt="" width="150" height="118"></li>

                <li><img src="image/2.jpg" alt="" width="150" height="118"></li>
                <li><img src="image/3.jpg" alt="" width="150" height="118"></li>
                <li><img src="image/4.jpg" alt="" width="150" height="118"></li>
                <li><img src="image/5.jpg" alt="" width="150" height="118"></li>
                <li><img src="image/6.jpg" alt="" width="150" height="118"></li>
                <li><img src="image/7.jpg" alt="" width="150" height="118"></li>
                <li><img src="image/8.jpg" alt="" width="150" height="118"></li>
                <li><img src="image/9.jpg" alt="" width="150" height="118"></li>
                <li><img src="image/10.jpg" alt="" width="150" height="118"></li>

                <li><img src="image/11.jpg" alt="" width="150" height="118"></li>
            </ul>
        </div>