동적 슬라이더 캡션에 링크 추가

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> 

: 당신은 작은 따옴표 또는 탈출 따옴표를 사용하는 경우이 작동합니다.

다른 힌트 : 인라인 스타일을 사용하지 않으려 고 이미 스타일을 적용하는 데 사용하는 클래스와 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>