대체 텍스트가 비어 있으면 슬라이드 쇼 캡션이 표시되지 않음

Question

이미지의 제목과 대체 텍스트의 텍스트를 사용하여 이미지 위에 캡션을 만드는 간단한 jQuery 슬라이드 쇼로 작업하고 있습니다. 그것은 훌륭하지만, 슬라이드 쇼의 이미지에 title/alt가 없을 때 아무 것도 표시하지 않기를 바란다. http://jsfiddle.net/qWZWJ/24/

나는 기본적으로 이미지 제목/ALT가 비어있는 경우 테스트하는 IF 문을 추가해야합니다,하지만 난 어떻게 그렇게 아무 생각이 :

여기 예제 코드를 참조하십시오.

Answer 1

변경이 귀하의 자바 스크립트의 내용에 "캡션 표시"

//Display the caption 
if($('#slideshow-caption p').html() != "") 
    $('#slideshow-caption').css({opacity: 0.7, bottom:0}); 

즐길 :)를

Answer 2

이봐 srry이 수정입니다 :

사용이 스크립트로 :

<script type="text/javascript"> 
$(document).ready(function() {   

    //Execute the slideShow, set 4 seconds for each images 
    slideShow(2000); 

}); 

var timer; 

function slideShow(speed) { 


    //append a LI item to the UL list for displaying caption 
    $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>'); 

    //Set the opacity of all images to 0 
    $('ul.slideshow li').css({opacity: 0.0}); 

    //Get the first image and display it (set it to full opacity) 
    $('ul.slideshow li:first').css({opacity: 1.0}).addClass('show'); 

    //Get the caption of the first image from REL attribute and display it 
    $('#slideshow-caption h3').html($('ul.slideshow li.show').find('img').attr('title')); 
    $('#slideshow-caption p').html($('ul.slideshow li.show').find('img').attr('alt')); 

    //Call the gallery function to run the slideshow  
    timer = setInterval('gallery()',speed); 

    //pause the slideshow on mouse over 
    $('ul.slideshow').hover(
     function() { 
      clearInterval(timer);  
     },  
     function() { 
      timer = setInterval('gallery()',speed);    
     } 
    ); 

} 

function gallery() { 


    //if no IMGs have the show class, grab the first image 
    var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); 

    //trying to avoid speed issue 
    if(current.queue('fx').length == 0) {  

     //Get next image, if it reached the end of the slideshow, rotate it back to the first image 
     var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? clearInterval(timer) :current.next()) : $('ul.slideshow li:first')); 

     if (next) {  

      //Get next image caption 
      var title = next.find('img').attr('title');  
      var desc = next.find('img').attr('alt');  

      //Set the fade in effect for the next image, show class has higher z-index 
      next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); 

      //Hide the caption first, and then set and display the caption 
      $('#slideshow-caption').slideToggle(300, function() { 
       $('#slideshow-caption h3').html(title); 
       $('#slideshow-caption p').html(desc); 
       if(desc != "" || title != "") 
       { 
        $('#slideshow-caption').css({opacity: 0.7, bottom:0}); 
        $('#slideshow-caption').slideToggle(500);           
       } 
      });   

      //Hide the current image 
      current.animate({opacity: 0.0}, 1000).removeClass('show'); 
     } 
    } 

} 
</script>