2014-04-05 5 views
1
  1. Nivo Lightbox 플러그인을 사용하고 있습니다. 나는 또한 초현실적 인 CMS를 사용하고있다. 고객이 Nivo Lightbox 슬라이드 쇼에서 이미지의 제목을 변경할 수 있기를 바랍니다.라이트 박스 슬라이드 쇼 제목에 alt 속성을 추가 하시겠습니까?

    <a href="images/1.jpg" title="Untitled 2013" data-lightbox-gallery="gallery1"><img  src="images/1.jpg" /></a> 
    
  2. CMS를 편집기는 클라이언트에게 고도을 편집 할 수있는 옵션을 제공합니다 : 슬라이드 쇼에 제목은 title 속성이 슬라이드 쇼에 표시되는 제목을 선언하여, 이미지 태그를 둘러싸고있는 앵커 태그에 제시되어있다 이미지의 속성. 따라서 앵커의 title 속성을 이미지의 alt 태그로 바꿔야합니다.

질문 : 슬라이드 쇼 링크의 제목을 이미지 태그의 alt 속성으로 둘러싸는 앵커의 title 속성 대신에 어떻게 만들 수 있습니까?

jQuery로

답변

0

플러그인에서 옵션을 찾을 수 없습니다. HTML (또는 DOM 변경)에 대한 변경없이 실제 솔루션 (그러나 개선 할 수 있다고 생각합니다)은 beforeShowLightboxafterShowLightbox 이벤트를 사용하여 자식 img alt 속성을 가져 와서 라이트 박스 제목으로 설정합니다.

번호 :

var altText; 
$(document).ready(function() { 
    $('#nivo-lightbox-demo a').nivoLightbox({ 
     effect: 'fade', 
     beforeShowLightbox: function() { 
      altText = $($(this)[0].el).find('img').prop('alt'); 
     }, 
     afterShowLightbox: function (light) { 
      if (altText!=="") $($(light)[0]).find('.nivo-lightbox-title').html(altText); 
     } 
    }); 
}); 

데모 : http://jsfiddle.net/IrvinDominin/MH8mu/

+0

덕분에, 나는 당신의 코드를 사용하려고 노력하고 있지만 그것은 나를 위해 작동하지 않습니다. 아마도 내 페이지를보고 내가 잘못하고있는 것을 볼 수 있습니다 http://intelligen.info/pro%20templates/template%20grid%20center/ – angela

+0

@angela 좋아, 전설이 만들어지지 않은 것을 볼 수 있습니다. 제목 속성에   값을 설정하십시오. –

+0

위대한 작품! 감사합니다 – angela

0

: $('[data-lightbox-gallery] img').attr('alt', $('[data-lightbox-gallery] img').parent().attr('title'));

나중에 편집 :에

$('[data-lightbox-gallery]').each(function(){ $(this).attr('title', $(this).children('img').attr('alt')); }

+0

(http://stackoverflow.com/a/5876747/247893) – h2ooooooo

+1

[.prop '()'.attr()'VS] $ ('[data-lightbox-gallery] img'). 각 (function() {$ (this) .attr ('alt', $ ('데이터 라이트 박스 갤러리 img'). attr ('title'));})' – n1kkou

0

: 당신은 내가 쓴 적이 정확히 반대 일을 원했다처럼 난 당신을 missunderstood 알고 있지만 것 같습니다하지 않습니다 CMS를 라이트 박스 플러그인 코드로 변경하지 마십시오. alt 속성이 변경된 후 그 변경 후 title 속성을 알게되면 watchplugin을 사용합니다.