Az s3Slider jQuery plugin segítségével időzített képváltót alakíthatsz ki, diszkrét, de látványos megoldás. A képeken megjegyzéseket lehet megjeleníteni, áttetsző háttérrel, és a kép bármely oldalán, akár váltakozva.
Image may be NSFW.
Clik here to view.
Alkalmazása rendkívül egyszerű, az oldalad header részébe illeszd be a jQuery-t, és az s3Slider plugint:
<script src="js/jquery.js" type="text/javascript"></script> <script src="js/s3Slider.js" type="text/javascript"></script>
Magyarázat
A html kód felépítése: egy "slider" div-en belül az elemeket listában helyezd el, a lista elem tartalmazza a képet, illetve egy "span" tag-ben a kísérőszöveget.
Ha beállítasz egy fő div id-t (pl. s3slider) mint itt, akkor a galéria (slide show) többi osztályánál és id-jénél annak a névnek kell szerepelnie. Például, ha a fő div-ednek adsz egy id-t #te_neved néven, akkor a belső id-nek #te_nevedContent -nek kell lennie és az osztálynévnek .te_nevedImage-nek, mint ahogy azt a példa is mutatja.
A másik fontos dolog, hogy minden .te_nevedImage elemben kell lennie span-nek, valamint a lista elem végén szükség van egy .te_nevedImage osztályú div-re, különben az utolsó kép nem jelenik meg.
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id="s3slider"> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="#" /> <span>Your text comes here</span> </li> <li class="s3sliderImage"> <img src="#" /> <span>Your text comes here</span> </li> <div class="clear s3sliderImage"></div> </ul> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | #s3slider { width: 400px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } #s3sliderContent { width: 400px; /* important to be same as image width or wider */ position: absolute; /* important */ top: 0; /* important */ margin-left: 0; /* important */ } .s3sliderImage { float: left; /* important */ position: relative; /* important */ display: none; /* important */ } .s3sliderImage span { position: absolute; /* important */ left: 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 374px; background-color: #000; filter: alpha(opacity=70); /* here you can set the opacity of box with text */ -moz-opacity: 0.7; /* here you can set the opacity of box with text */ -khtml-opacity: 0.7; /* here you can set the opacity of box with text */ opacity: 0.7; /* here you can set the opacity of box with text */ color: #fff; display: none; /* important */ top: 0; /* if you put top: 0; -> the box with text will be shown at the top of the image if you put bottom: 0; -> the box with text will be shown at the bottom of the image */ } .clear { clear: both; } |
A script aktiválása során két paramétert kell beállítani, a div nevét, amelyen belül az effekt működjön, illetve a képváltás idejét:
Javascript
1 2 3 4 5 | $(document).ready(function() { $('#s3slider').s3Slider({ timeOut: 4000 }); }); |
Böngésző kompatibilitás
A plugin tesztelve az alábbi, elterjedtebb böngésző verziókon:
- Firefox 2.x (Win)
- Firefox 3.0.3 (Win/Linux/Mac)
- Opera 9.6 (Win/Linux)
- Safari 3.0.3 (Win/Mac)
- Internet Explorer 6 (Win)
- Internet Explorer 7 (Win)
- Google Chrome (Win)
A plugin szerzője: Boban Karišik
Mire vársz? Töltsd le vagy nézd meg a demót !