الهجان مستر وليد فريد
ادعية لوجة الله : عدد المساهمات : 4697 تاريخ الميلاد : 04/07/1975 تاريخ التسجيل : 21/09/2009 العمر : 48
| موضوع: سلايد شو جزاب انيق بالشرح الإثنين أبريل 07 2014, 04:47 | |
| ابحث عن - الكود:
-
</head> وضع اعلاها الكود التالى - الكود:
-
<style type='text/css'> #slideshow {list-style:none; color:#fff} #slideshow span {display:none} #wrapper {width:506px; margin:50px auto; display:none} #wrapper * {margin:0; padding:0} #fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000} #information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)} #information h3 {padding:4px 8px 3px; font-size:14px} #information p {padding:0 8px 8px} #image {width:500px} #image img {position:absolute; z-index:25; width:auto} .imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150} #imgprev {left:0; background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/SxIRDLhbFvI/AAAAAAAAAZM/4N4RrfeWPdA/left.gif) left center no-repeat} #imgnext {right:0; background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/SxIRJLGnjKI/AAAAAAAAAZc/Z99UWtjYHeo/right.gif) right center no-repeat} #imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)} .linkhover {background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRGajwsfI/AAAAAAAAAZU/9e3kt7Z5Bjo/link.gif) center center no-repeat} #thumbnails {margin-top:15px} #slideleft {float:left; width:20px; height:81px; background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRMN8VUeI/AAAAAAAAAZk/BTNwDZsGQhw/scroll-left.gif) center center no-repeat; background-color:#222} #slideleft:hover {background-color:#333} #slideright {float:right; width:20px; height:81px; background:#222 url(http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRPJktr1I/AAAAAAAAAZs/Z3Qj8DTDrMw/scroll-right.gif) center center no-repeat} #slideright:hover {background-color:#333} #slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden} #slider {position:absolute; left:0; height:81px} #slider img {cursor:pointer; border:1px solid #666; padding:2px} </style> ثم ابحث عن - الكود:
-
</body> وضغ اغلاها الكود التالى - الكود:
-
<script src='compressed.js' type='text/javascript'/>
<script type='text/javascript'> $('slideshow').style.display='none'; $('wrapper').style.display='block'; var slideshow=new TINY.slideshow("slideshow"); window.onload=function(){ slideshow.auto=true; slideshow.speed=5; slideshow.link="linkhover"; slideshow.info="information"; slideshow.thumbs="slider"; slideshow.left="slideleft"; slideshow.right="slideright"; slideshow.scrollSpeed=4; slideshow.spacing=5; slideshow.active="#fff"; slideshow.init("slideshow","image","imgprev","imgnext","imglink"); } </script> ثم ضع الكود التالى داخل اداة جافا - الكود:
-
<ul id="slideshow">
<li> <h3>Enter Title 1 Here</h3>
<span>http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRTF4hqFI/AAAAAAAAAZ0/a0rDe2UC838/slideshow+1+big.jpg</span>
<p>Enter Description 1 Here.</p> <a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRWePfVYI/AAAAAAAAAZ8/MSmCLCmWA8k/slideshow+1+small.jpg" alt="Bionic" /></a> </li>
<li> <h3>Enter Title 2 Here</h3>
<span>http://3.bp.blogspot.com/_4HKUHirY_2U/SxIRePsmefI/AAAAAAAAAaE/1bEo7Jhje7Y/slideshow+2+big.jpg</span>
<p>Enter Description 2 Here.</p> <img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRhli6o6I/AAAAAAAAAaM/fmkIOf7MPtE/slideshow+2+small.jpg" alt="MOH" /> </li>
<li> <h3>Enter Title 3 Here</h3>
<span>http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRlhta4NI/AAAAAAAAAaU/91As7SkDIZE/slideshow+3+big.jpg</span>
<p>Enter Description 3 Here.</p> <a href="#"><img src="http://3.bp.blogspot.com/_4HKUHirY_2U/SxIRonaYyII/AAAAAAAAAac/ls3j_gSduPk/slideshow+3+small.jpg" alt="Fear" /></a> </li>
<li> <h3>Enter Title 4 Here</h3>
<span>http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRudm44wI/AAAAAAAAAak/xPjT8DtBq9s/slideshow+4+big.jpg</span>
<p>Enter Description 4 Here.</p> <a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRxSG7ulI/AAAAAAAAAas/ct3UpnpLKAM/slideshow+4+small.jpg" alt="Farcry" /></a> </li>
<li> <h3>Enter Title 5 Here</h3>
<span>http://1.bp.blogspot.com/_4HKUHirY_2U/SxIR4NEkreI/AAAAAAAAAa0/B0ab0ypP_z4/slideshow+5+big.jpg</span>
<p>Enter Description 5 Here.</p> <img src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxIR8SoimVI/AAAAAAAAAa8/LJ0Ggp_2Wz4/slideshow+5+small.jpg" alt="Farcry 2" /> </li>
<li> <h3>Enter Title 6 Here</h3>
<span>http://1.bp.blogspot.com/_4HKUHirY_2U/SxISBN5s6XI/AAAAAAAAAbE/jYBV3sn5y8o/slideshow+6+big.jpg</span>
<p>Enter Description 6 Here.</p> <a href="#"><img src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxISEGMzIAI/AAAAAAAAAbM/FrFClSn_PIQ/slideshow+6+small.jpg" alt="Crysis" /></a> </li>
<li> <h3>Enter Title 7 Here</h3>
<span>http://1.bp.blogspot.com/_4HKUHirY_2U/SxISHlkmzLI/AAAAAAAAAbU/gbpIfiAelH0/slideshow+7+big.jpeg</span>
<p>Enter Description 7 Here.</p> <a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxISKamDHFI/AAAAAAAAAbc/ZX9bd600VUg/slideshow+7+small.jpg" alt="Tomb Raider" /></a> </li>
<li> <h3>Enter Title 8 Here</h3>
<span>http://3.bp.blogspot.com/_4HKUHirY_2U/SxISPRJ9FyI/AAAAAAAAAbk/col8cO-Gtc8/slideshow+8+big.jpg</span>
<p>Enter Description 8 Here.</p> <a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxISSu6GVHI/AAAAAAAAAbs/xR3wq05rsIc/slideshow+8+small.jpg" alt="Game" /></a> </li>
<li> <h3>Enter Title 9 Here</h3>
<span>http://1.bp.blogspot.com/_4HKUHirY_2U/SxISVrBaCgI/AAAAAAAAAb0/7TyVFfKbqyc/slideshow+9+big.jpg</span>
<p>Enter Description 9 Here.</p> <a href="#"><img src="http://4.bp.blogspot.com/_4HKUHirY_2U/SxISYRyCfUI/AAAAAAAAAb8/930A4vUML_Q/slideshow+9+small.jpg" alt="Medal of honor" /></a> </li>
</ul>
<div id="wrapper">
<div id="fullsize">
<div id="imgprev" class="imgnav" title="Previous Image"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav" title="Next Image"></div>
<div id="image"></div>
<div id="information"> <h3></h3> <p></p> </div> </div>
<div id="thumbnails">
<div id="slideleft" title="Slide Left"></div>
<div id="slidearea">
<div id="slider"></div>
</div>
<div id="slideright" title="Slide Right"></div>
</div>
</div>
</div> Demo | |
|