jQuery 사진로드

Question

jQuery에서 도움이 필요합니다. 내가하려는 것은 작은 사진 갤러리를 만드는 것입니다. 이 갤러리에는 몇 개의 작은 사진과 하나의 큰 그림이 있습니다. 작은 그림을 클릭하면 jQuery가 큰 그림을로드하고 교체하기를 원합니다.

작동하지 않는 약간의 시도가 있습니다! 그러나 아마도 누군가가 나에게 이유를 말할 수있을 것입니다.

$(function(){
   $("a.smallpics").click(function(e){
      $(".bigpic")
      .load(function () {
          $(this).hide();
          $('#loader')
            .append(this);
            .removeClass('loading')
          $(this).fadeIn();
      });
      .attr('src', this.href);
      e.preventDefault();
   });
});

그리고 HTML

<a href="pic1_big.jpg" class="smallpics" /><img src="pic1_small.jpg" style="width: 20px; height: 20px" /></a>
<a href="pic2_big.jpg" class="smallpics" /><img src="pic2_small.jpg" style="width: 20px; height: 20px" /></a>
<a href="pic3_big.jpg" class="smallpics" /><img src="pic3_small.jpg" style="width: 20px; height: 20px" /></a>
<div id="loader" class="loading" /><img src="pic3_big.jpg" class="bigpic" /></div>

따라서 최선의 경우 스크립트는 회색 반 투명 레이어로 큰 그림을 덮고 스피너를 시작하고 그림이 페이딩 된 후에는 그림이 페이딩됩니다 (스피너는 클래스 '로딩'의 배경에 있습니다).

당신의 도움을 주셔서 감사합니다.

Answer 1

아마도 당신은 당신이 올바르게 일을 정리하지 않기 때문에 많은 JS 오류를 받고 있지만, 솔루션의 논리에도 약간의 결함이 있습니다.

하지만 질문을 올바르게 이해한다면 BigPic을 숨겨야합니다. ~ 전에 그만큼 load 이벤트 load 이벤트, 다시 보여주세요 :

$(function(){
    $('a.smallpics').click(function() {        
        var $bigpic = $('.bigpic');
        var $loader = $('#loader').show();        
        $bigpic.hide().load(function () {
            $loader.fadeOut();
            $(this).fadeIn();
        }).attr('src', $(this).attr('href'));
        return false;
    });
});

Answer 2

당신은 일종의 바퀴를 재창조하고 있습니다 ... 4,000,000 시간 동안, 그것은 jQuery를 배우기위한 좋은 운동입니다.

웹 페이지에서 JavaScript를 디버깅하려면 Firefox + Firebug 플러그인을 능가하지 않습니다.

Answer 3

체크 아웃하고 싶을 수도 있습니다 이 jQuery 로더 플러그인... 또는 이것.