bxslider를 사용하는 고급 캡션

Question

이 질문은 이미 질문을 받았지만 대답이 없습니다. 충분한 정보가 제공되지 않았기 때문에 믿습니다.

템플릿으로 bxslider를 사용하고 있습니다. 여기를 참조하십시오 : http://bxslider.com/examples/image-slideshow-captions

"title"속성을 사용하여 아주 간단한 캡션을 만들 수 있지만 작은 텍스트 같은 다른 속성을 가진 자막을 만들려하고 링크로 바꾸고 싶습니다. 컨테이너 내에서 div를 구현하려고 시도했는데 분명히 jquery로 구현하지 않고 슬라이더와 동기화 할 수 없습니다. 또한 CSS 편집을 시도해 보았습니다.

어떻게 캡션을 이미지 제목 이상으로 추가 할 수 있습니까? 사진을 덮고있는 div처럼?

Answer 1

bxslider에서 제공하는 캡션 옵션을 사용할 필요조차 없습니다. 슬라이드를 구성하는 li 태그의 일부로 캡션을 추가하십시오. 이것이 캡션입니다. true 옵션은 어쨌든 수행합니다. 즉, bx-caption 클래스가있는 div를 슬라이드에 추가합니다. 예를 들어

: 폰트가 너무 크기와

<li> 
     <img src="http://bxslider.com/images/730_200/hill_trees.jpg" /> 
     <div class="caption1"> 
     <span>Image 1</span> 
     <div class="caption2"><a id="img1a" href="#">Visit Australia</a></div> 
     </div> 
</li> 

CSS를 사용하여이 방법, 당신은 주위를 재생할 수 있습니다.

여기 난 그냥 모든 코드를 공유하는 것을 사용하고 http://jsfiddle.net/s2L9P/

Answer 2

나는 당신의 문제를 해결했다고 생각하지만, 당신이 그것을 만든 것처럼 당신의 바이올린이 작동하지 않기 때문에 그것을 테스트 할 수 없습니다.

이 함께 Appends image captions to the DOM의 코드를 변경

:

/** 
    * Appends image captions to the DOM 
    * NETCreator enhancement (http://www.netcreator.ro) 
    */ 
    var appendCaptions = function(){ 
     // cycle through each child 
     slider.children.each(function(index){ 
      // get the image title attribute 
      var title = $(this).find('img:first').attr('title'); 
      var nc_subtitle = $(this).find('img:first').attr('nc-subtitle'); 
      // append the caption 
      if (title != undefined && ('' + title).length && nc_subtitle != undefined && ('' + nc_subtitle).length) { 
       $(this).append('<div class="bx-caption"><span class="title">' + title + '</span><br/><span class="nc_subtitle">' + nc_subtitle + '</span></div>'); 
      } 
     }); 
    } 

이제 캡션 제목에 자막을 추가 할 수 있습니다 당신이 원하는대로

<a href ="page.php"> 
    <img src="http://calindragan.files.wordpress.com/2011/01/winter.jpg" title="title 1 here" nc-subtitle="The second title"/> 
</a> 

당신은 자막 스타일을 지정할 수 있습니다, CSS 클래스를 사용하여 nc_subtitle.

희망이 있습니다. 이와

http://pastebin.com/0fvUezg1

그리고 HTML :

편집

변경이와 바이올린에 당신에 의해 공유 전체 자바 스크립트

http://pastebin.com/T038drDV

그것은 작동합니다.