Jquery 슬라이드 쇼 ALT 텍스트

jQuery를 사용하여 슬라이드 쇼가 있으며 div의 각 슬라이드 이름에 캡션 클래스가 표시됩니다. 이미지의 대체 텍스트에서 가져온 div에있는 텍스트를 변경하려면 - 이전 텍스트를 제거해야합니다. - 이제 각 이미지의 텍스트가 계속해서 증가하는 목록으로 나타납니다. 각 이미지의 클릭. 다음 이미지의 텍스트가 튀어 나오면 첫 번째 텍스트가 사라져야합니다. remove()를 사용해 보았지만 제대로 작동하지 않는 것처럼 보입니다.Jquery 슬라이드 쇼 ALT 텍스트

html로 :

<!DOCTYPE html> 
<html> 

    <head> 
     <title>jQuery Gallery</title> 
     <meta charset='utf-8'> 
     <link href="css/styles.css" type="text/css" rel="stylesheet"> 
     <script type="text/javascript" src="js/jquery-1.3.2.js"></script> 
     <script type="text/javascript" src="js/project7.js"></script> 
     <style type="text/css"> 
</style> 
    </head> 

    <body> 
     <h1>jQuery-based Gallery</h1> 

     <div id="gallery"> 
      <ul id="thumbs"> 
       <li><a href="images/andytimmons.jpg"><img src="images/thumbs/andytimmons.jpg" alt="Andy Timmons plays Sgt. Pepper"></a> 
       </li> 
       <li><a href="images/ericgales.jpg"><img src="images/thumbs/ericgales.jpg" alt="Eric Gales - Relentless"></a> 
       </li> 
       <li><a href="images/jellyfish.jpg"><img src="images/thumbs/jellyfish.jpg" alt="Jelly Fish - Spilt Milk"></a> 
       </li> 
       <li><a href="images/kingsx.jpg"><img src="images/thumbs/kingsx.jpg" alt="King's X"></a> 
       </li> 
      </ul> 
     </div> 
    </body> 

</html>

는 CSS :

/* style the thumbnails */ 
#thumbs { 
    list-style: none; 
    padding: 0 0 20px; 
    margin: 0 0 20px; 
    border-bottom: 2px solid #333; 
} 
#thumbs li { 
    display: inline; 
    margin: 0 5px; 
} 
#thumbs li a img { 
    border: 1px dashed #000; 
    padding: 1px; 
    background: #fff; 
    opacity: .6; 
} 
#thumbs li a img:hover { 
    opacity: 1; 
} 
/* style the big main image and caption */ 
.galleryBig { 
    border: 4px solid #333; 
    padding: 2px; 
    background: #666; 
} 
.caption { 
    font: bold 18px georgia, times, serif; 
    background: rgba(255, 255, 255, .7); 
    position: relative; 
    top: -3em; 
    padding: 5px; 
}

JQuery와는 :

$('document').ready(function(){ 
loadImages(); 
displayFirst(); 
gallery(); 

}); 

function loadImages(){ 
var galleryImages = []; 
var loadThese = $('#thumbs a'); 
for(i=0; i<loadThese.length; i++){ 
    galleryImages[i] = new Image(); 
    galleryImages[i].src = loadThese[i]; 
    } 

} // end loadImages 

function displayFirst(){ 
    var firstImagePath = $('#thumbs a').attr('href'); 
    var firstImage = $('<img class="galleryBig" src="' + firstImagePath + '">'); 
    $('#thumbs').after(firstImage); 
    var firstAltText = $('#thumbs img').attr('alt'); 
    $('.galleryBig').after('<div class="caption">' + firstAltText + '</div>'); 

} 
// end displayFirst 


function gallery(){ 
$('#gallery a').click(function(evt){ 
    evt.preventDefault(); 
    $(".caption").hide(); 

    var alt = $(this).children("img").attr("alt"); 

    oldImage = $('#thumbs').next(); 

    var imgPath = $(this).attr('href'); 

    var newImage = $('<img class="galleryBig" src="' + imgPath + '">'); 
    var altText = $('.galleryBig').after('<div class="caption">' + alt + '</div>'); 


    newImage.hide(); 

    $('#thumbs').after(newImage); 

    newImage.fadeIn(); 
    oldImage.remove(); 


    }); //end anonymous fcn 

} //end gallery

출처

2013-10-20 Regina Shepherd Riddle

여기에 코드를 게시하면 사람들이 더 잘 도와 줄 수 있습니다! – pna

element.html (textvar) 할려고 했습니까 – w3bMak3r

아니요 - element.html (textvar)을 시도하지 않았습니다. 어떻게해야할지 모르겠다. 나는 jquery에 매우 익숙하고 배우고 있습니다. 내가 어떻게해야하는지 말해 줄 수 있다면 고맙겠습니다. 감사. –

사용하기로 결정했습니다 해결책은 좋지 않다. caption.hide()의 결과로 개의 캡션이 사용자에게 표시되지 않습니다. 그것은 그것이 있어야하는 방식이 아닙니다. 대안으로 -이 바이올린을 보아라. http://jsfiddle.net/dVmq2/

나는 당신의 코드와 논리를 단순화했다. 캡션을 숨기거나 DOM에서 요소를 제거하지 않으면 유용 할 것입니다. pageload에 삽입 된 요소 만 수정하면됩니다.

$('document').ready(function(){ 
    var thumbs = $('#thumbs'), 
     thumbs_links = thumbs.find('a'), 
     firstAltText = thumbs.find('img').attr('alt'), 
     newImage = $('<img />', {class: 'galleryBig'}), 
     caption = $('<div />', {class: 'caption'}), 
     full_image = newImage.attr('src', thumbs_links.attr('href')).insertAfter(thumbs), 
     caption_block = caption.text(firstAltText).insertAfter('.galleryBig'); 

    thumbs.on('click', 'a', function(evt){ 
     evt.preventDefault(); 

     var link = $(this), 
      imgPath = link.attr('href'), 
      alt = link.children("img").attr("alt"); 

     caption_block.text(alt); 
     full_image.hide().attr('src', imgPath).fadeIn(); 
    }); 
});

출처

2013-10-22 15:10:39 skip405

강사가 hide 대신에 hide()를 사용하여 효과가 있다고 제안했습니다. 답변 주셔서 감사합니다. –

답변

관련 문제