向jquery Nivo Slider添加描述（不是默認標題）

我花了4個小時試圖解決這個問題，到目前爲止我還找不到解決方案。基本上我想要做的是爲幻燈片中的每張圖片添加一個說明。所以，當圖片切換時，說明也必須切換。到目前爲止，我已經嘗試了很多東西，但似乎並沒有觸發這些變化。這就是我現在已經做了向jquery Nivo Slider添加描述（不是默認標題）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<html lang="en"> 
<head> 
<title>Nivo Slider Demo</title> 
<link rel="stylesheet" href="../themes/default/default.css" type="text/css"  media="screen" /> 
<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen"  /> 
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
</head> 
<body> 
<div id="wrapper"> 
    <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a> 

    <div class="slider-wrapper theme-default"> 
     <div id="slider" class="nivoSlider"> 
      <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" id="foto1" /> 
      <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" id="foto2" /></a> 
      <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" id="foto3" /> 
      <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" id="foto4" /> 
     </div> 
        <div id="htmlcaption" class="nivo-html-caption"> 
      <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
     </div> 
    </div> 


</div> 
<!-- my Code --> 

     <div class="descriptionOff" id="first"> 
     Description 1 
     </div> 
     <div class="descriptionOff" id="second"> 
     Description 2 
     </div> 
     <div class="descriptionOff" id="third"> 
     Description 3 
     </div> 
     <div class="descriptionOff" id="fourth"> 
     Description 4 
     </div> 

     <!-- :::::::::::::: --> 
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script> 
<script type="text/javascript" src="scripts/jquery.nivo.slider.js"></script> 
<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider(); 
}); 
</script> 
<script type="text/javascript" src="scripts/andri.js"></script>

所以，我把一些分度，說明和補充上的照片有些ID;

.Description{ 
    display:block; 
} 
.descriptionOff{ 
    display:none; 
}

在CSS中，我已經添加了這兩個類，描述必須用來顯示或不是自己;

if($("#foto1").hasClass("nivo-main-image")){ 
    $("#first").toggleClass("Description"); 
}

而這是我在添加代碼的簡單線（不同的文件）的js：基本上，如果第一照片具有類NIVO-主圖像（其是示出了圖像的類在幻燈片中），它應該切換第一個描述的類來顯示它（if語句不完整，當然我會對其他描述做同樣的事情）。但沒有任何反應，班級不會切換。所以，我要求你的幫助，或者如果你有任何其他的解決方案，如果你分享它，我會很感激。

來源

2013-12-14 liveAndrew

我還沒有真正測試過這個，但是您是否嘗試過在跨度中包裹滑塊圖像並在其中添加標題（在img之後）？

像這樣：

<div id="slider" class="nivoSlider"> 
<span><img src="slide1.jpg" /><p>This is my non-default caption!</p></span> 
<img src="slide2.jpg" /> 
<img src="slide3.jpg" /> 
</div>

來源

2013-12-20 17:46:16 Meg

向jquery Nivo Slider添加描述（不是默認標題）

回答

相關問題