اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح نهم)
اسلاید شو یا گالری تصاویر برای نمایش تصاویر بصورتی زیبا و تکنیکی با استفاده از راه کارها و روش های گوناگون . برای دوستان چند مدل را گردآوری کرده ام که در اینجا قرار میدهم . نمونه ی زنده را در زیر ببینید و سپس برای بررسی و استفاده , از کد های داده شده استفاده کنید . تغییرات بعهده ی شماست .
کد HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns = "http://www.w3.org/1999/xhtml" >
<meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
<style type = "text/css" >
#info p {margin-left:15px;}
/* defaults required for IE6 */
a {color:#000;}
a:visited {color:#111;}
a:active {color:#222;}
a:hover {text-decoration:none;}
/* Gallery styling */
.photo {position:relative; width:732px; height:382px; margin:0 auto 20px auto;}
.photo ul, .photo ul ul {padding:0; margin:0; border:0; list-style:none; width:215px;}
.photo ul ul {margin-left:-9999px; height:0; overflow:hidden;}
.photo ul li {width:215px; background:#ddd; float:left; background:#fff url(gallery_2.gif) no-repeat;}
.photo ul li a.set {display:block; text-align:center; height:30px; line-height:30px; background:#fff url(gallery_0.gif) no-repeat;
font-family: verdana, arial, sans-serif; font-size:11px; text-decoration:none;}
.photo ul li table {margin:0; padding:0; display:none;}
.photo ul li a.set:hover {background:transparent;}
.photo ul li:hover a.set {background:transparent;}
.photo ul :hover b {display:block; width:480px; height:360px; background:#f8f8f8; border:1px solid #888; position:absolute; left:250px; top:0;}
.photo ul :hover table
{padding:0; margin-top:-2px; display:block; border:1px solid #888; border-width:0 1px 1px 1px;}
.photo ul :hover ul
{margin:0; width:207px; overflow:visible; height:207px; background:transparent;}
.photo ul :hover ul li
{float:left; display:inline; width:56px; margin:2px 6px; background:transparent;}
.photo ul :hover ul li a
{background:transparent;}
.photo ul :hover ul li a img.thumb
{margin:3px; display:block; border:0;}
.photo ul :hover ul li a img.full
{position:absolute; left:-9999px; top:0; border:0;}
.photo ul :hover ul li a:hover img.thumb
{margin:0; border:3px solid #fc0;}
.photo ul :hover ul li a:hover
{background:#fff;}
.photo ul :hover ul li a:hover img.full
{left:250px; z-index:0; border:1px solid #000;}
.photo .default {width:480px; height:360px; position:absolute; left:250px; top:0; border:1px solid #ddd;}
</style>
<div class ="photo">
<img class ="default" src="default.jpg" alt="default image" title="">
<ul class ="topic">
<li> <a class ="set" href="#nogo">Image Set #1</a> <b> </b>
<ins> <table> <tbody> <tr> <td>
<ul>
<li> <a href = "#nogo" > <img class ="thumb" src="portrait2b.jpg" alt="" title="">
<img class ="full" src="portrait2.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="portrait3b.jpg" alt="" title="">
<img class ="full" src="portrait3.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="portrait4b.jpg" alt="" title="">
<img class ="full" src="portrait4.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="portrait5b.jpg" alt="" title="">
<img class ="full" src="portrait5.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="portrait6b.jpg" alt="" title="">
<img class ="full" src="portrait6.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="portrait7b.jpg" alt="" title="">
<img class ="full" src="portrait7.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="portrait8b.jpg" alt="" title="">
<img class ="full" src="portrait8.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="portrait9b.jpg" alt="" title="">
<img class ="full" src="portrait9.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="portrait10b.jpg" alt="" title="">
<img class ="full" src="portrait10.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="portrait11b.jpg" alt="" title="">
<img class ="full" src="portrait11.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="portrait12b.jpg" alt="" title="">
<img class ="full" src="portrait12.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="portrait13b.jpg" alt="" title="">
<img class ="full" src="portrait13.jpg" alt="" title=""></a> </li>
</ul>
</td> </tr> </tbody> </table> </ins>
</li>
<li> <a class ="set" href="#nogo">Image Set #2</a> <b> </b>
<ins> <table> <tbody> <tr> <td>
<ul>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape1b.jpg" alt="" title="">
<img class ="full" src="landscape1.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape2b.jpg" alt="" title="">
<img class ="full" src="landscape2.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape3b.jpg" alt="" title="">
<img class ="full" src="landscape3.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape4b.jpg" alt="" title="">
<img class ="full" src="landscape4.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape5b.jpg" alt="" title="">
<img class ="full" src="landscape5.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape6b.jpg" alt="" title="">
<img class ="full" src="landscape6.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape7b.jpg" alt="" title="">
<img class ="full" src="landscape7.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape8b.jpg" alt="" title="">
<img class ="full" src="landscape8.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape9b.jpg" alt="" title="">
<img class ="full" src="landscape9.jpg" alt="" title=""></a> </li>
</ul>
</td> </tr> </tbody> </table> </ins>
</li>
<li> <a class ="set" href="#nogo">Image Set #3</a> <b> </b>
<ins> <table> <tbody> <tr> <td>
<ul>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape13b.jpg" alt="" title="">
<img class ="full" src="landscape13.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape14b.jpg" alt="" title="">
<img class ="full" src="landscape14.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape15b.jpg" alt="" title="">
<img class ="full" src="landscape15.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape16b.jpg" alt="" title="">
<img class ="full" src="landscape16.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape13b.jpg" alt="" title="">
<img class ="full" src="landscape13.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape14b.jpg" alt="" title="">
<img class ="full" src="landscape14.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape15b.jpg" alt="" title="">
<img class ="full" src="landscape15.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape16b.jpg" alt="" title="">
<img class ="full" src="landscape16.jpg" alt="" title=""></a> </li>
</ul>
</td> </tr> </tbody> </table> </ins>
</li>
<li> <a class ="set" href="#nogo">Image Set #4</a> <b> </b>
<ins> <table> <tbody> <tr> <td>
<ul>
<li> <a href = "#nogo" > <img class ="thumb" src="bird1b.jpg" alt="" title="">
<img class ="full" src="bird1.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="bird2b.jpg" alt="" title="">
<img class ="full" src="bird2.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="bird3b.jpg" alt="" title="">
<img class ="full" src="bird3.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="bird4b.jpg" alt="" title="">
<img class ="full" src="bird4.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="bird5b.jpg" alt="" title="">
<img class ="full" src="bird5.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="bird6b.jpg" alt="" title="">
<img class ="full" src="bird6.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="bird7b.jpg" alt="" title="">
<img class ="full" src="bird7.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="bird8b.jpg" alt="" title="">
<img class ="full" src="bird8.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="portrait15b.jpg" alt="" title="">
<img class ="full" src="portrait15.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape10b.jpg" alt="" title="">
<img class ="full" src="landscape10.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape11b.jpg" alt="" title="">
<img class ="full" src="landscape11.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="landscape12b.jpg" alt="" title="">
<img class ="full" src="landscape12.jpg" alt="" title=""></a> </li>
</ul>
</td> </tr> </tbody> </table> </ins>
</li>
<li> <a class ="set" href="#nogo">Image Set #5</a> <b> </b>
<ins> <table> <tbody> <tr> <td>
<ul>
<li> <a href = "#nogo" > <img class ="thumb" src="bird9b.jpg" alt="" title="">
<img class ="full" src="bird9.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="bird10b.jpg" alt="" title="">
<img class ="full" src="bird10.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="bird11b.jpg" alt="" title=""><img class ="full" src="bird11.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="bird12b.jpg" alt="" title="">
<img class ="full" src="bird12.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="bird13b.jpg" alt="" title="">
<img class ="full" src="bird13.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="bird14b.jpg" alt="" title="">
<img class ="full" src="bird14.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="bird15b.jpg" alt="" title="">
<img class ="full" src="bird15.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="bird16b.jpg" alt="" title="">
<img class ="full" src="bird16.jpg" alt="" title=""></a> </li>
<li> <a href = "#nogo" > <img class ="thumb" src="portrait16b.jpg" alt="" title="">
<img class ="full" src="portrait16.jpg" alt="" title=""></a> </li>
</ul>
</td> </tr> </tbody> </table> </ins>
</li>
</ul>
<br class ="clear">
</div>
</html>