Nivo-slider : nivo-caption div에 추가 수업 추가

Question

html 로이

같은 것이 있고 그것을 여전히 한 번 표시됩니다.

<div class="nivo-caption" style="opacity: 0.8;"> 

nivo 캡션 div 내 클래스를 밀고 있지만 extraclass1 필요합니다. 추가 할 수있는 방법은 무엇입니까? 각 nivo-caption div에 다른 클래스를 추가해야합니다.

Answer 1

는 addClass() 또는 css()가 mebbe 시도가

Answer 2

실제로 하나의 <div class="nivo-caption"> 존재하는 경우는 이미지 당 클래스를 교환 사소한하지 그래서 내용이 각 이미지의 캡션으로 대체하는. 그러나 & hellip; 이를 수행하는 한 가지 방법은 다음 슬라이드를 표시하기 전에 beforeChange() 콜백을 사용하여 캡션에 CSS 클래스를 복사하는 것입니다.

저는이 작업장을 로컬로 운영하고 있으므로 계속 진행해야합니다. 그러나 클래스가 이미지보다 먼저 스왑되기 때문에 이미지와 클래스 스왑의 타이밍이 완전히 동기화되지 않습니다. 또한 올바른 CSS를 사용하여 캡션을 afterLoad()에 초기화 할 수도 있습니다.

다음 코드는 의 이미지를 사용하며 jQuery (v1.6.2 사용)와 다음 Nivo JavaScript 및 CSS가 올바르게 작동해야합니다.

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script> 

자바 스크립트 :

$('#slider').nivoSlider({ 
    beforeChange: function(){ 
     var nivoVars = $('#slider').data('nivo:vars'); 
     var currentImage = nivoVars.currentImage; 
     var htmlCaptionForCurrentImage = $(currentImage.attr('title')); 
     var classList = htmlCaptionForCurrentImage.attr('class').split(/\s+/); 
     var extraClass = classList[classList.length-1]; // assumes your extra class is always the last one (so may need a "starts with" test here as well if it is not)  

     $('.nivo-caption').removeClass(function(index, classes) { 
      return (classes.match(/extraclass\d/) || []).join(' '); // assumes your classes are extraclass1, extraclass2, etc. so again may need changing to match your actual classes 
     }).addClass(extraClass); 
    } 
}); 

HTML :

<div id="slider"> 
    <img src="toystory.jpg" id="image1" alt="" title="#htmlcaption" /> 
    <img src="walle.jpg" id="image2" alt="" title="#htmlcaption2" /> 
</div> 
<div id="htmlcaption" class="nivo-html-caption extraclass1"> 
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
</div> 
<div id="htmlcaption2" class="nivo-html-caption extraclass2"> 
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
</div> 

그리고 CSS :이 답변

구축에 사용

#slider { 
    width:618px; 
    height:246px; 
} 
.extraclass1 { 
    color:red !important; 
} 
.extraclass2 { 
    color:lightblue !important; 
} 

참조 대신에 클래스를 추가하기 위해 jQuery를 사용

• Get class list for element with jQuery
• JQuery removeClass wildcard

Answer 3

, 당신이 중첩 #htmlcaption의 DIV 안에 다른 사업부 내부의 캡션을 할 수는 :

<div id="htmlcaption" class="nivo-html-caption extraclass1"> 

    <div class="extraclass1"> 

     <em>HTML</em> caption 

    </div> 

</div> 

내가 어떻게 할 것인지의 그 어쨌든.