더 큰 초기 이미지 표시

Question

페이지가로드 될 때 첫 번째로 큰 이미지가 표시됩니다.하지만 미리보기 이미지를 클릭하면 큰 이미지가 표시됩니다. 처음에는 페이지를로드 할 때 더 큰 이미지를 표시하고 싶지 않습니다. . 처음에는 미리보기 이미지 만 표시해야합니다.

이 시험을 마치고 링크입니다 :

http://jsfiddle.net/L7yKp/37/

Answer 1

그것은 당신이 원하는 것은 이것이다 소리처럼 :

http://jsfiddle.net/L7yKp/38/

$("#panel img").hide(); //<= remove the :not(first-child) filter 

$("#thumbs .UiUx3DSSVFlow").click(function(){ 
    getIndex = $(this).index(); 
    $("#thumbs .clicked").removeClass('clicked'); 
    $("#panel img").fadeOut('fast').eq(getIndex).fadeIn(); 
    $(this).addClass('clicked');  
}); 

//$("#thumbs .UiUx3DSSVFlow:first").click(); //<= don't simulate the first click 
$(['next','prev']).each(function(){ 
    var that=this; 
    $('.'+that).click(function(){ 
     $('#thumbs .clicked')[that]().click(); 
    }); 
}); 
​ 

당신은 단지이 줄을 언급 할 필요가

Answer 2

-

은

//$("#thumbs .UiUx3DSSVFlow:first").click(); 

그리고

Working Fiddle

Answer 3

각 축소판 사업부로이 같은 추가 처음에 $('#panel img').hide();을 추가

rel="http://images1.videolan.org/images/largeVLC.png" 

는 얻을 :

는

<div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item0-__set0-0" data--ui="__item0-__set0-0" rel="http://images1.videolan.org/images/largeVLC.png"> 

그런 다음, 다음과 같은 코드를 사용 게으른로드 이미지 :

$("#thumbs .UiUx3DSSVFlow").click(function(){ 
    getIndex = $(this).index(); 
    $("#thumbs .clicked").removeClass('clicked'); 
    $("#panel img").attr("src",$(this).attr("rel")); 
    $(this).addClass('clicked');  
}); 

이 여기에 설명된다 :

http://jsfiddle.net/webwarrior/L7yKp/55/

당신은 아무것도 표시하지 않을 다음 줄을 숨길 수 있습니다, 처음 :

//$(".displayimage").attr("src",$($("#thumbs .UiUx3DSSVFlow")[0]).attr("rel")); 

HTH