»
Tiếng AnhTiếng PhápTiếng Việt

In - Phòng trưng bày ảnh với hai kiểu hiển thị - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Phòng trưng bày ảnh với hai kiểu hiển thị
URL: https://www.javascriptbank.com/picture-gallery-with-display-switcher.html

Phòng trưng bày ảnh với hai kiểu hiển thị © JavaScriptBank.comĐây thực sự là một hiệu ứng JavaScript/jQuery tuyệt vời để tạo nên một không gian trưng bày ảnh trên web. Bên cạnh một giao diện được thiết kế khá đẹp, hiệu ứng này còn cho phép người dùng chọn cách hiển thị ảnh theo dạng danh sách chi tiết hoặc thu gọn dạng lưới.Hãy xem thêm các hiệu ứng trình diễn ảnh có trên jsB@nk nếu bạn vẫn còn muốn: - 16 hiệu ứng trưng bày ảnh miễn phí - Trưng bày ảnh

Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Phòng trưng bày ảnh với hai kiểu hiển thị
URL: https://www.javascriptbank.com/picture-gallery-with-display-switcher.html



CSS
<style type="text/css">body {margin: 0;padding: 50px 0 0;font: 10px normal Verdana, Arial, Helvetica, sans-serif;color: #fff;}* {margin: 0;padding: 0;}img {border: none;}h1 {font: 5em normal Georgia, 'Times New Roman', Times, serif;text-align:center;margin-bottom: 20px;}h1 span { color: #e7ff61; }h1 small{font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;letter-spacing: 1.5em;display: block;color: #ccc;}.container {width: 758px;margin: 0 auto;padding-bottom: 100px;overflow: hidden;}ul.display {float: left;width: 756px;margin: 0;padding: 0;list-style: none;border-top: 1px solid #333;border-right: 1px solid #333;background: #222;}ul.display li {float: left;width: 754px;padding: 10px 0;margin: 0;border-top: 1px solid #111;border-right: 1px solid #111;border-bottom: 1px solid #333;border-left: 1px solid #333;}ul.display li a {color: #e7ff61;text-decoration: none;}ul.display li .content_block {padding: 0 10px;}ul.display li .content_block h2 {margin: 0;padding: 5px;font-weight: normal;font-size: 1.7em;}ul.display li .content_block p {margin: 0;padding: 5px 5px 5px 245px;font-size: 1.2em;}ul.display li .content_block a img{padding: 5px;border: 2px solid #ccc;background: #fff;margin: 0 15px 0 0;float: left;}ul.thumb_view li{width: 250px;}ul.thumb_view li h2 {display: inline;}ul.thumb_view li p{display: none;}ul.thumb_view li .content_block a img {margin: 0 0 10px;}a.switch_thumb {width: 122px;height: 26px;line-height: 26px;padding: 0;margin: 10px 0;display: block;background: url(switch.gif) no-repeat;outline: none;text-indent: -9999px;}a:hover.switch_thumb {filter:alpha(opacity=75);opacity:.75;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";}a.swap { background-position: left bottom; }</style>


JavaScript
<script type="text/javascript" src="/javascript/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("a.switch_thumb").toggle(function(){  $(this).addClass("swap");   $("ul.display").fadeOut("fast", function() {  $(this).fadeIn("fast").addClass("thumb_view");  });  }, function () {      $(this).removeClass("swap");  $("ul.display").fadeOut("fast", function() {  $(this).fadeIn("fast").removeClass("thumb_view");});}); });</script>


HTML
<a href="javascript:void(0);" class="switch_thumb">Switch Thumb</a> <ul style="display: block;" class="display"><li><div class="content_block"><a href="#"><img src="sample.gif" alt=""></a><h2><a href="#">Image Name</a></h2><p>Askin',jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectorsspell, chitlins spittin' watchin' hootch me rightly kinfolk that. Womankickin', work yer last dogs, rattler hee-haw mobilehome stew trailerdriveway shootin'. </p></div></li><li><div class="content_block"><a href="#"><img src="sample2.gif" alt=""></a><h2><a href="#">Image Name</a></h2><p>Askin',jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectorsspell, chitlins spittin' watchin' hootch me rightly kinfolk that. Womankickin', work yer last dogs, rattler hee-haw mobilehome stew trailerdriveway shootin'. </p></div></li><li><div class="content_block"><a href="#"><img src="sample3.gif" alt=""></a><h2><a href="#">Image Name</a></h2><p>Askin',jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectorsspell, chitlins spittin' watchin' hootch me rightly kinfolk that. Womankickin', work yer last dogs, rattler hee-haw mobilehome stew trailerdriveway shootin'. </p></div></li><li><div class="content_block"><a href="#"><img src="sample4.gif" alt=""></a><h2><a href="#">Image Name</a></h2><p>Askin',jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectorsspell, chitlins spittin' watchin' hootch me rightly kinfolk that. Womankickin', work yer last dogs, rattler hee-haw mobilehome stew trailerdriveway shootin'. </p></div></li><li><div class="content_block"><a href="#"><img src="sample5.gif" alt=""></a><h2><a href="#">Image Name</a></h2><p>Askin',jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectorsspell, chitlins spittin' watchin' hootch me rightly kinfolk that. Womankickin', work yer last dogs, rattler hee-haw mobilehome stew trailerdriveway shootin'. </p></div></li><li><div class="content_block"><a href="#"><img src="sample6.gif" alt=""></a><h2><a href="#">Image Name</a></h2><p>Askin',jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectorsspell, chitlins spittin' watchin' hootch me rightly kinfolk that. Womankickin', work yer last dogs, rattler hee-haw mobilehome stew trailerdriveway shootin'. </p></div></li><li><div class="content_block"><a href="#"><img src="sample7.gif" alt=""></a><h2><a href="#">Image Name</a></h2><p>Askin',jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectorsspell, chitlins spittin' watchin' hootch me rightly kinfolk that. Womankickin', work yer last dogs, rattler hee-haw mobilehome stew trailerdriveway shootin'. </p></div></li><li><div class="content_block"><a href="#"><img src="sample8.gif" alt=""></a><h2><a href="#">Image Name</a></h2><p>Askin',jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectorsspell, chitlins spittin' watchin' hootch me rightly kinfolk that. </p></div></li><li><div class="content_block"><a href="#"><img src="sample9.gif" alt=""></a><h2><a href="#">Image Name</a></h2><p>Askin',jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectorsspell, chitlins spittin' watchin' hootch me rightly kinfolk that. Womankickin', work yer last dogs, rattler hee-haw mobilehome stew trailerdriveway shootin'. Woman kickin', work yer last dogs, rattler hee-hawmobilehome stew trailer driveway shootin'.</p></div></li><li><div class="content_block"><a href="#"><img src="sample10.gif" alt=""></a><h2><a href="#">Image Name</a></h2><p>Askin',jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectorsspell, chitlins spittin' watchin' hootch me rightly kinfolk that. Womankickin', work yer last dogs, rattler hee-haw mobilehome stew trailerdriveway shootin'. </p></div></li><li><div class="content_block"><a href="#"><img src="sample11.gif" alt=""></a><h2><a href="#">Image Name</a></h2><p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell. </p></div></li><li><div class="content_block"><a href="#"><img src="sample12.gif" alt=""></a><h2><a href="#">Image Name</a></h2><p>Askin',jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectorsspell, chitlins spittin' watchin' hootch me rightly kinfolk that. Womankickin', work yer last dogs, rattler hee-haw mobilehome stew trailerdriveway shootin'. </p></div></li></ul>


Files
/javascript/framework/Picture_Gallery_with_Display_Switcher/Picture Gallery with Display Switcher_images.zip