»
AnglaisFrançaisVietnamien

Imprimer - Galerie de photos avec affichage Switcher - JavaScriptBank.com

Version complète: jsB@nk » Framework » jQuery » Galerie de photos avec affichage Switcher
URL: http://www.javascriptbank.com/picture-gallery-with-display-switcher.html

Galerie de photos avec affichage Switcher © JavaScriptBank.comC'est vraiment galerie de photos tr?s cool et ?tonnant de la promotion de vos personnels images/entreprise sur le web Avec deux types d'affichage, ce script JavaScript galerie permettent aux utilisateurs de changer la disposition de galerie en vignette de pr?visualisation ou de la sc?ne annonce Essayez Afficher plus de photos sur JavaScript ACC @ nk si vous avez encore besoin:? 16 images libres diaporama scripts Galerie - JaS Gallery - Galerie d'images Pr?c?dent Suivant-

Version complète: jsB@nk » Framework » jQuery » Galerie de photos avec affichage Switcher
URL: http://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