ダイナミックスライダーのキャプションへのリンクを追加します

Question

私はamazingsliderプラグインで作成したスライダーを持っています。それは良い作品ですが、各画像のキャプションにリンク（href）を追加する方法はありますか？私はしようとしましたが、リンクはスライダーのキャプションに表示されません。ここで

は私の抜粋です：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script src="http://www.worldinbag.com/js/amazingslider.js"></script> 
 
<script src="http://www.worldinbag.com/js/initslider-1.js"></script> 
 

 
<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:804px;margin:0px auto 59px; overflow:hidden;"> 
 
    <div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;"> 
 
    <ul class="amazingslider-slides" style="display:none;"> 
 
     <li> 
 
     <img src="http://uupload.ir/files/4hlh_img-10.jpg" alt="img-10" title="This is a caption This is a caption This is a caption This is a caption This is a caption " data-description="This is a caption This is a caption This is a caption This is a caption This is a caption " 
 
     /> 
 
     </li> 
 
     <li> 
 
     <img src="http://uupload.ir/files/8dn2_img-11.jpg" alt="img-10" title="img-10" data-description="This is a caption" /> 
 
     </li> 
 

 
    </ul> 
 
    <ul class="amazingslider-thumbnails" style="display:none;"> 
 
     <li> 
 
     <img src="http://uupload.ir/files/zck1_img-10-tn.jpg" alt="img-10" title="img-10" /> 
 
     </li> 
 
     <li> 
 
     <img src="http://uupload.ir/files/jcyq_img-11-tn.jpg" alt="img-11" title="img-11" /> 
 
     </li> 
 

 
    </ul> 
 

 
    </div> 
 
</div>

Answer 1

何ができるかキャプション属性にリンクタグを追加することです。それは、キャプションへのリンクを挿入するために、全体のキャプション自体をリンクするだけでなく、可能です。この方法では

<a href='#your-url'>your caption</a> 

：あなたは、単一引用符やエスケープ二重引用符を使用している場合、これは動作します。

もう1つのヒント：インラインスタイルを使用しないでください。スタイルを適用するために既に使用しているクラスとIDを使用してください。

#amazingslider-wrapper-1 { 
 
    display: block; 
 
    position: relative; 
 
    max-width: 804px; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 
#amazingslider-1 { 
 
    display: block; 
 
    position: relative; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://www.worldinbag.com/js/amazingslider.js"></script> 
 
<script src="http://www.worldinbag.com/js/initslider-1.js"></script> 
 

 

 
<div id="amazingslider-wrapper-1"> 
 
    <div id="amazingslider-1"> 
 
    <ul class="amazingslider-slides" style="display:none;"> 
 
     <li> 
 
     <img src="http://uupload.ir/files/4hlh_img-10.jpg" alt="img-10" title="<a href='#'>This is a link</a> This is a caption This is a caption This is a caption This is a caption " data-description="This is a caption This is a caption This is a caption This is a caption This is a caption " 
 
     /> 
 
     </li> 
 
     <li> 
 
     <img src="http://uupload.ir/files/8dn2_img-11.jpg" alt="img-10" title="img-10" data-description="<a href='#'>This is a link</a>" /> 
 
     </li> 
 

 
    </ul> 
 
    <ul class="amazingslider-thumbnails" style="display:none;"> 
 
     <li> 
 
     <img src="http://uupload.ir/files/zck1_img-10-tn.jpg" alt="img-10" title="img-10" /> 
 
     </li> 
 
     <li> 
 
     <img src="http://uupload.ir/files/jcyq_img-11-tn.jpg" alt="img-11" title="img-11" /> 
 
     </li> 
 

 
    </ul> 
 

 
    </div> 
 
</div>