Phiên bản đầy đủ: jsB@nk » Dự án » Dự án trưng bày và trình diễn ảnh đa trình duyệt
URL: https://www.javascriptbank.com/single-responsive-photo-gallery-plus-slideshow.html
Hiện tại, có rất nhiều hiệu ứng JavaScript để tạo một album ảnh, một không gian trưng bày ảnh hay một trình diễn ảnh trên trang web; và tôi cũng đã thử hầu hết các mã nguồn JavaScript trong các bài viết mà JavaScriptBank.com đã từng giới thiệu: - 65 giải pháp trình diễn ảnh tuyệt vời mà miễn phí - Thêm 30 ứng dụng JavaScript xuất sắc để trình diễn ảnh - 16 hiệu ứng trưng bày ảnh miễn phíNhưng không có bất kì thư viện JavaScript nào có thể thỏa mãn nhu cầu của tôi: tạo một trình diễn ảnh đơn giản nhất nhưng có thể hoạt động tốt trên tất cả kích cỡ màn hình (trình duyệt) của PC, laptop, máy tính bảng và điện thoại thông minh. Đây là lí do tôi quyết định xây dựng riêng cho mình một thư viện JavaScript để hiển thị và trình diễn ảnh.Và hôm nay, tôi quyết định chia sẻ dự án JavaScript này với các bạn, cơ bản thư viện này cực kì dễ nếu muốn sử dụng. Bạn chỉ cần tải về gói dữ liệu, sau đó nhập vào thông tin các hình ảnh rồi chạy hiệu ứng.
Phiên bản đầy đủ: jsB@nk » Dự án » Dự án trưng bày và trình diễn ảnh đa trình duyệt
URL: https://www.javascriptbank.com/single-responsive-photo-gallery-plus-slideshow.html
<link rel="stylesheet" type="text/css" href="srpgs.css"/>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script><script type="text/javascript" src="srpgs.js"></script><script type="text/javascript">/** Project:Single Responsive Photo Gallery plus Slideshow* Author:Phong Thai (http://www.javascriptbank.com/)* Support:http://www.javascriptbank.com/* Version:1.0*//*You are free to use this plugin in any personal, commercial project without my permission.But please help me by leaving the Copyright sign, it just occupies about 10 pixels, otherwise please help me with a milk coffee (paypal) to remove this sign.*/var srpgs_slideshowSpeed = 5000,// speed of the automatic slideshowsrpgs_scroll_delay = 700,// speed of the scrolling controlssrpgs_path_pics = 'pics/';// path to large photossrpgs_path_thumb = 'pics/thumbnails/';var srpgs_photos = [ {"image" : "srpgs-01.jpg"}, {"image" : "srpgs-02.jpg"}, {"image" : "srpgs-03.jpg"}, {"title" : "Title of Photo #04","image" : "srpgs-04.jpg","url" : "http://www.yoursite.com/photo-set-01/","subject" : "#04 in Subject of Set #1"}, {"title" : "Title of Photo #05","image" : "srpgs-05.jpg","url" : "http://www.yoursite.com/photo-set-01/","subject" : "#05 in Subject of Set #1"}, {"title" : "Title of Photo #06","image" : "srpgs-06.jpg","url" : "http://www.yoursite.com/photo-set-02/","subject" : "Subject of Set #2: Photo #06"}, {"title" : "","image" : "srpgs-07.jpg","url" : "","subject" : ""}, {"title" : "Title of Photo #08","image" : "srpgs-08.jpg","url" : "http://www.yoursite.com/photo-set-02/","subject" : "Subject of Set #2: Photo #08"}, {"image" : "srpgs-09.jpg"}, {"image" : "srpgs-10.jpg"}, {"image" : "srpgs-11.jpg"}, {"image" : "srpgs-12.jpg"}, {"image" : "srpgs-13.jpg"}, {"image" : "srpgs-14.jpg"}, {"image" : "srpgs-15.jpg"}, {"image" : "srpgs-16.jpg"}, {"image" : "srpgs-17.jpg"}, {"image" : "srpgs-18.jpg"}];</script><div class="srpgs-container"><!-- Photo placeholders --><div id="srpgs-slideshow"><div id="srpgs-rotate-1" class="srpgs-holder"><img src="" /></div><div id="srpgs-rotate-2" class="srpgs-holder"><img src="" /></div></div><!-- Photo slideshow controls --><div id="srpgs-control"><div class="srpgs-thumbs-nav copyright"><a href="http://www.javascriptbank.com" title="Copyright 2013">+</a></div><div class="srpgs-thumbs-nav up"></div><div id="srpgs-thumbs-gallery"></div><div class="srpgs-thumbs-nav down"></div><div id="srpgs-control-btns"><div id="srpgs-control-back"></div><div id="srpgs-control-play-pause"></div><div id="srpgs-control-next"></div></div></div><!-- Titles and subjects of the photos --><div id="srpgs-picture"><span id="srpgs-picture-title"></span><p class="srpgs-picture-link">In: <a href="#" id="srpgs-picture-url"></a></p></div></div>