Slider za fotografije - jQuery

Ovo je jedan u nizu vrlo prostih slajdera i odmah da vam dam kod.
Vrlo je prosto, samo ubacite u HTML/JavaScript box i to je sve.
Nakon toga možete, ustvari morate da promenite slike osim ako nećete ove po difoltu jer ničemu ne vrede.
Vaše slike tj. URL zamenite sa url koji je u slajderu i dodate opis. To je sve.

DEMO

<script src="http://dl.dropboxusercontent.com/s/hz434tv9jv8yjgh/excellent-slideshow-compressed.js" type="text/javascript"></script><a href="http://24work.blogspot.com/" rel="nofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="nofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="nofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTgOqhc28b9ihYOU-X3KL7jKiVe4UOKrBSwKrk4AkNp4tiergOFShOCpNv0WoZ9ys67NPc-dniPv3H_kcpdTzHCsi9-AK_XkWl69hjHV-8na2X1MrbXR11J7HbWC_bGbcu34t_yAVZwhyE/) left center no-repeat} #imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4E1y7xN16IHVkVww99C8PmdmBWS8FjTSoLbzDKsT6N8s6IR4NawbbN1dUcvhgVUkTiaPiiPUs-fZcx3txmQK3lloUWpW-ARleinSFrt_KvdSMkTJGp2tNf4kJ2Lc7z_d_ThGRtxpe1MB0/) right center no-repeat} #imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)} .linkhover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbfYkm6jDTGYTxZPv3HIoVWBn4zAziRhSTA6uHIcoavLYDyzRQYMZbRBfo2mp2ZmlKNnTB0X82y4dbrgpK1zmqT8L-xEfSHFDZnuompz3dgK2ZQNze9Fskqos44RNELGpNk6XeX8T6SuOl/) center center no-repeat} #thumbnails {margin-top:15px} #slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNgWDvJfsmYhC2YAi-TBBYEQsmhAS3sRKIOSztmupblDN6ea3Thr0xcmEdT0xS63gUrSjxCAy6gLHqCNnSDlWwVtjtA5hPLfGarlDwYpZSOMR_DqIt-KEo0Y2T6I-vOqtwW_3a0qJ8jV_Y/) center center no-repeat; background-color:#222} #slideleft:hover {background-color:#333} #slideright {float:right; width:20px; height:81px; background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSQ_PtygmjPVJ_Vy6RAjDp3g3jciAchAoVKXuSVPvVUMorSMsRHz6s9c94WqPQ3juZywZ40My-z0q0spQs409vtmEtihnWvnZvn34FNnQ16enYjslSuB-ffO9JTpecLSKcJeJzjpLUQiMm/) 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> <div style="float:left;"> <ul id="slideshow"><li><h3>Enter Title 1 Here</h3><span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiso6nHLDek3zc5K27pyBaEeF4ujP4yxXIOwfnOiIMt9rO6v8l-oAT8ubQ6yvXT_keeRm5TENU4VEd7zQxWWiIM-WWRwMII0ggA2pVFEeo7yWV_AWeJd6bx993_4ZkRgcZBuKCAZdjDZVPb/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png</span> <p>Enter Description 1 Here.</p><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJHbaetM1q1_C3GdSbKnHtsa4oFaUPavtZWRfOB-EIztPDjhNLxm11VatnbcQsJnxkXeQD66V9eZX23802MU2LkEiId216AG4rLDYqI_lDzf9NZaysJA9e1DGy6FIcajjA9Viy3GCF0M0Y/s1600/Change+Mouse+Cursor+Generator.png" alt="" /></a></li><li><h3>Enter Title 2 Here</h3><span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU0sY8jdqx24VpcGEOeujjB9cCtbPmrIFqM6iQSGL2A242M8FD3qqUYy1fdli1XiFnFuW4LZCh-JiByAfNKGXQFJ5DLPRWTs-5KHGiIyaBx1W-HwaVkN9DVhIzremS3QG2kGuMe7vXKwx0/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png</span> <p>Enter Description 2 Here.</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbX_zEfWtEZ_hJBXoCe9mQzW_jitYlGhg7aILsBnoYrO6-ACsayVDSnQy0cATy3mlo5r2FGb2YktsFsUuBf5_BPhB_u3DIBaIhd6pK5lMnMsEBN_1Nd9KzU4Rulu14Q54AL_9m5bMn62iC/s1600/Numbered+Page+Navigation.png" alt="" /></li><li><h3>Enter Title 3 Here</h3><span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheQ6lGYre9U4VdCaF61JH6JKAuknQpDy__hFshnlku1zfGOGlu0P4j21ZGFS2GMgUlkv2clqbpWSA5G_arLzyVbxgQjHtZ7BPWTOgCu5EuY_xvD7H4X7PjY1o8XzBal5-ngem3krC7TBG4/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png</span> <p>Enter Description 3 Here.</p><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5pC-GW6lPWxa1GO9GGFwqCYuZygrKPxU782aFA9aaG6RL56uxSn2RPWih_fcFTsuwSFjY9MWoOo7UPocpb5tZMN-q5G_SBr0pUrRet92mhm1z63yAIp8YK9roW4_ly7owDNzuYBQJ7Q0V/s1600/Snow+Cursor+Code+Generatort.png" alt="" /></a></li><li><h3>Enter Title 4 Here</h3><span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVRl01h90wgT2AOcQD-I2ltjEbEY1NrPoiXURUxMuBA3WRX9MPiAnCjJbbrVbrmtn-jwZJG-IyaVFm5Ee-2IGTnoXYoz-sqIfz3YMA_xN_Z209JUqu4q8Qbh8yTmxEYY3AhiFRmGKaFWeU/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png</span> <p>Enter Description 4 Here.</p><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqy8WvRBTMDntOG2J8yGtb_XjwzaE_GOuO_kpkeBtpP5yB3AWxRRnFKRgJ63tGlOP_q7q7YbCQNCnulG8cMfDAYMsgdcy3jN4ZdRRxHoDtZ8ME3gkA2_8aSW8RKU6yyY5hi_XPoaaD2-nk/s1600/Blogger+Falling+Object+Generator.png" alt="" /></a></li><li><h3>Enter Title 5 Here</h3><span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeNq67p93PlkLZBCRpCGt3eoe3iy_8-KnDWDoSSwU9oC-9l3u9o5htZmjhpnl22_NlgYOP2gKYebql2Lln_kgfwmhykjzlKze7ClD-sjnMhLJfj5EsbbnBQsG08HMEfUbl7h0s5-Lf2C8h/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png</span> <p>Enter Description 5 Here.</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZpHgdIXB8jcyfj9OlhMI1gulO6PrbXajg1ziV-_zMsrnX99hIxp4UnLcp55sw2CC4YyW6xng4_YuhCEbB8jrXTlXZRjog_XgJAphWAD8ailzn0kE5MhlhKSflreG24iKytUtmGjtUpHVD/s1600/Animated+Flash+Clock.png" alt="" /></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></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><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>