제이쿼리(jQuery) 이미지 슬라이드쇼


제이쿼리(jQuery) 이미지 슬라이드쇼



















jQuery를 이용한 이미지 슬라이드쇼 입니다.
어느정도 기본적인 테그사용법만 아셔도 손쉽게 수정사용하실수 있습니다.
화려한 이미지 슬라이드쇼는 아니지만 손십게 소스를 수정사용할수 있다는것이 장점 같네요.
jQuery 슬라이드쇼의 모든소스를 압축파일로 다운받으실수 있습니다.

데모페이지 에서 어떻게 출력되는지 살펴보시고  
상세 설정방법 으로 이동하시면 자세한 설정방법과 데모소스를 압축파일로 다운받을수 있습니다.


아래는 데모소스의 일부분입니다. 별로 어려워보이지도 않죠~~
텍스트 부분과 링크그리고 이미지정도만 수정하셔도 바로 사용할수 있겠죠~~

   <!-- Slideshow HTML -->
  <div id="slideshow">
   <div id="slidesContainer">
     <div class="slide">
       <h2>Web Development Tutorial</h2>
       <p><a href="http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/"><img src="img/img_slide_01.jpg" alt="An image that says Install X A M P P for wordpress." width="215" height="145" /></a>If you're into developing web apps, you should check out the tutorial called "<a href="http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/">Using XAMPP for Local WordPress Theme Development</a>" which shows you how to set up a local testing server for developing PHP/Perl based applications locally on your computer. The example also shows you how to set up WordPress locally!</p>
     </div>
     <div class="slide">
       <h2>Grunge Brushes, Anyone?</h2>
       <p><a href="http://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/"><img src="img/img_slide_02.jpg" width="215" height="145" alt="A thumbnail image that says S R grunge photoshop brushes 6 high resolution grunge brushes by six revisions." /></a>In this layout, I used <a href="http://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/">SR Grunge</a>, which is a free set of high-resolution Photoshop brushes you can download here on Six Revisions.</p>
       <p>
     </div>
     <div class="slide">
       <h2>How About Some Awesome Grunge Textures?</h2>
       <p><a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><img src="img/img_slide_03.jpg" width="215" height="145" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a>The texture used in this web page is from the Grunge Extreme Textures freebie set by JC Parmley released here on Six Revisions.</p>
       <p>You can head over to the <a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/">Grunge Extreme</a> page to download the texture set or check out Six Revisions' <a href="http://sixrevisions.com/category/freebies/">freebie section</a> for even more goodies!</p>
     </div>
     <div class="slide">
       <h2>'Tis the End, My Friend.</h2>
       <p><a href="http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/"><img src="img/img_slide_04.jpg" width="215" height="145" alt="Thumbnail image that says sleek button using photoshop that links to a Photoshop tutoril." /></a>This is the last slide. Hit the left arrow control to go back to the other slides.</p>
       <p>Alternatively, you may want to check out the tutorial on how to create a simple and cool button in Photoshop called &quot;<a href="http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/">How to Create a Slick and Clean Button in Photoshop</a>&quot; which was inspired by the <a href="http://www.campaignmonitor.com/designer/?utm_source=sixrevisions&amp;utm_medium=banner&amp;utm_term=2&amp;utm_content=0003&amp;utm_campaign=Apr09Banners">Campaign Monitor</a> web interface.</p>
     </div>
   </div>
  </div>
  <!-- Slideshow HTML -->


플래시 포토 갤러리 23가지 모음-Flash Photo Gallery
이미지 슬라이드-Agile Carousel jQuery Plugin
플래시 포토 갤러리-Flash Photo Gallery
이미지 슬라이드쇼-s3Slider jQuery Plugin




신고