슬라이드 쇼 캡션

Question

크로스 페이드 전환으로 슬라이드 쇼를 만들었으므로 캡션을 이미지 위의 3 열 테이블 가운데에 배치하고 싶습니다. 행운을 빌지 않고 스크립트를 몇 개 사용해 보았습니다. 어떻게 든 테이블 내부의 위치가 엉망이되었습니다.

나는 슬라이드 쇼 위의 표에 2 열에서 캡션을 배치 할 :

http://munzerhodayfa.com/blaise.html

Answer 1

우선 당신이 레이아웃을 위해 테이블을 사용하지 말아야한다는 것입니다. 여기

<div id="header clearfix"> 
    <div id="contact"> 
    <a href="contact.html">BLAISE REUTERSWARD</a> 
    </div> 
    <div id="caption"> 
    <!-- Caption Text Here --> 
    </div> 
</div> 
<div class="fadein"> 
    <!-- All your images in here --> 
    <img src="images/BR_12.jpg" alt="This will be your caption area for javascript to read"> 
</div> 

위의 CSS입니다 : : 위의

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tbody> 
    <tr> 
     <td width="25%"><a href="contact.html">BLAISE REUTERSWARD</a></td> 
     <td width="50%"></td> 
     <td width="25%"></td> 
    </tr> 
    </tbody> 
</table> 
<div class="fadein"> 
    <!-- All your images in here --> 
</div> 

변경 : 자바 스크립트를

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } 

.clearfix { display: inline-block; } 

html[xmlns] .clearfix { display: block; } 

* html .clearfix { height: 1%; } 

#contact { 
    width: 25%; 
    float: left; 
} 

#caption { 
    width: 50%; 
    float: left; 
} 

.fadein { 
    clear:both; 
} 

는 캡션을받을 필요가 여기에

는 레이아웃입니다 어딘가에서. 캡션을 이미지의 "alt"속성에 넣고 javascript를 사용하여 그림을로드하고 캡션 div에 배치합니다 (위의 제안 된 HTML 참조).

$(function() { 

    $(".fadein :first-child").appendTo(".fadein"); 

    setInterval(function() { 

     $(".fadein :first-child").hide().appendTo(".fadein").fadeIn(2000, function() { 
       var caption = $(this).attr('alt'); 
       $('#caption').text(caption); 
      }); 

    }, 6000); 
});