Can I get an image and upload via ajax in a div

Question

I have the code below and what I need to do is upload the image from href to div via ajax ... Any help is appreciated. I believe load () cannot load images like this?

    <ul id="list">
    <li class="list-item-1"><a href="images/image1.jpg">Image 1</a></li>
    <li class="list-item-2"><a href="images/image2.jpg">Image 2</a></li>
    <li class="list-item-3"><a href="images/image3.jpg">Image 3</a></li>
    <li class="list-item-4"><a href="images/image4.jpg">Image 4</a></li>
    </ul>
<div id="image-holder"></div>

Thanks a lot, C

Answer 1

You must also delete the currently added image. This happens with the click and Image event instead of adding markup.

$('#list li a').click(function () {
    var url = $(this).attr('href'),
    image = new Image();
    image.src = url;
    image.onload = function () {
        $('#image-holder').empty().append(image);
    };
    image.onerror = function () {
        $('#image-holder').empty().html('That image is not available.');
    }

    $('#image-holder').empty().html('Loading...');

    return false;
});

Answer 2

This would be the first thing I would try, but I'm also a little newbie:

var image = $('<img></img>');
image.attr('src', 'images/image1.jpg');
$('#image-holder').append(image);

Answer 3

. , . , . , , - ! .

<script type="text/javascript">
$(function(){
    var list = $("#list");
    var li = list.children();
    var lengthMinusOne = li.length - 1;
    var index = 0;
    var num = $("#list li").length;
    var prevLi = $(li[0]).css("background-color", "gray");

    $("#next").click(function(){
       index++;
       if (index > lengthMinusOne) index = 0;
       prevLi.css("background-color","white");
       prevLi = $(li[index]).css("background-color", "gray");

       //Trigger a href click
       $(prevLi).children('a').trigger('click');

       //Display class in console
       var myClass = $(prevLi).attr("class");
       console.log(myClass);
    });
    $("#prev").click(function(){
       index--;
       if (index < 0) index = lengthMinusOne;
       prevLi.css("background-color","white");
       prevLi = $(li[index]).css("background-color", "gray");

       //Trigger a href click
       $(prevLi).children('a').trigger('click');

       //Display class in consol
       var myClass = $(prevLi).attr("class");
       console.log(myClass);
    });


    //Loader
    loader = $('#loader');
    loader.hide();
    var firstImg = $('<img />');
    $(firstImg).attr('src',$('#list li a').attr('href'));
    $('#image-holder').append(firstImg);

    //get image and load into div
    $('#list li a').click(function(event) {                        
        //Add class to image within holder
        oldImg = $('#image-holder img').addClass('old');
        newImg = $('<img />');

        $(newImg).attr('src',$(this).attr('href'));
        //remove old image and show loader
        $(oldImg).fadeOut().remove();
        loader.show();

        $(newImg).bind({
            load: function() {          
                //console.log("Image loaded");
                //Hide loader before fading in image
                loader.hide();
                $('#image-holder').append(newImg).hide().fadeIn(1300);
            },
            error: function() {
                //console.log("Error thrown, image didn't load, probably a 404.");
            }
        });

        event.preventDefault();
    });


})
</script>

Answer 4

, dom , img src

say img_div - ,

var im = document.createElement('img');
im.src = 'image_path1';
img_div.appendChild(im);

- ,

im.src = 'image_path2'