jquery를 사용하여 이미지에 자막을 추가하는 방법

Question

다음은 netcu.de의 이미지 슬라이드 쇼입니다.

:이 슬라이드 쇼가 잘 작동,하지만 어떻게 JQuery와 사이클 플러그인에 대한 FAQ에 따르면 모든 이미지

<script type="text/javascript" src="http://www.netcu.de/templates/netcu/js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="http://www.netcu.de/templates/netcu/js/netcu.js"> </script> 
<script type="text/javascript" src="http://www.netcu.de/templates/netcu/js/jquery.cycle.all.min.js"></script> 
<script type="text/javascript" src="http://www.netcu.de/templates/netcu/js/jquery.touchwipe.js"></script> 
<div id="main"> 
<div id="content"> 
<div id="imagegallery" style="border: 1px solid #666666; width: 400px; height: 300px; margin-top: 10px; margin-bottom: 10px;"> 
<img src="http://www.netcu.de/media/jquery/garden_i400x300.jpg" title="hi" width="400" height="300" /> 
<img style="display: none" src="http://www.netcu.de/media/jquery/waterfall_i400x300.jpg" width="400" height="300" /> 
<img src="http://www.netcu.de/media/jquery/autumn-leaves_i400x300.jpg" width="400" height="300" /> 
<img style="display: none" src="http://www.netcu.de/media/jquery/autumn-leaves_i400x300.jpg" width="400" height="300" /></div> 
<p><a id="prev" href="#">&laquo;</a>&nbsp; <a id="next" href="#">&raquo;</a> 
<script type="text/javascript"><!-- 
$(document).ready(function() { 
$('#imagegallery').cycle({ 
    timeout: 0, 
    fx: 'scrollHorz', 
    next: '#next', 
    prev: '#prev' 
}); 

$("#imagegallery").touchwipe({ 
    wipeLeft: function() { 
     $("#imagegallery").cycle("next"); 
    }, 
    wipeRight: function() { 
     $("#imagegallery").cycle("prev"); 
    } 
}); 
}); 
// --></script> 
</p></div></div> 

http://jsfiddle.net/fztjs/

Answer 1

에 캡션을 추가하려면이 데모를 기반으로 캡션을 추가 할 수 있습니다 http://jquery.malsup.com/cycle/caption.html

<script type="text/javascript"> 
$(function() { 
    $('#slideshow').cycle({ 
     fx:  'fadeZoom', 
     timeout: 2000, 
     after:  function() { 
      $('#caption').html(this.alt); 
     } 
    }); 
}); 
</script> 

<div id="main"> 
     <div id="slideshow" class="pics"> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" alt="Beach 1" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" alt="Beach 2" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" alt="Beach 3" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" alt="Beach 4" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" alt="Beach 5" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" alt="Beach 6" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" alt="Beach 7" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" alt="Beach 8" /> 
     </div> 
     <p id="caption"></p> 
</div>