이미지를 가져 와서 div에 divX를 통해로드

Question

나는 아래 코드를 가지고 내가해야 할 일은 href에서 ajax를 통해 div로 이미지를로드하는 것입니다. 나는 load()가 이런 이미지를로드 할 수 없다고 믿는다.

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

많은 감사, C

Answer 1

현재 추가 된 이미지를 제거하십시오. 여기에 마크 업을 추가하는 대신 클릭 이벤트와 이미지가 있습니다.

$('#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

하지만 이것은 나뿐만 아니라 또한 초보자의 비트 해요, 내가 시도 할 첫 번째 일이 될 것입니다 : 당신은 또한에있는

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

Answer 3

동적 당신이해야 할 것은 당신의 부모 요소 다음

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

일부 이벤트의 경우에

이 img_div을 말하는의 img src 속성을 변경할 수 있습니다 DOM 을 사용하여 이미지를 변경하려면 이 이미지를 변경하고 싶습니다

im.src = 'image_path2' 

Answer 4

좋습니다. 지저분하지만 완벽하게 작동합니다. 배경 이미지로 이미지를 추가하는 것과 같은 몇 가지 조정. 여기에 그것은 그것이 다른 누군가를 돕기를 바랍니다! 모두들 고마워.

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