Pliki z theme (5) trzeba gdzieś wrzucić. W sumie obojętne gdzie, można stworzyć jakiś folder np
slider i wrzucić tam. Do tego folderu też plik generic.css
Potem otwierasz demo5.html w notepad++ i tam masz cały kod.
Do headerinclude trzeba dodać:
<link href="slider/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="slider/js-image-slider.js" type="text/javascript"></script>
<link href="slider/generic.css" rel="stylesheet" type="text/css" />
Jak widać pliki będą pobierane z katalogu slider.
I dalej już masz sam kod:
<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">
<img src="images/image-slider-1.jpg" alt="Welcome to Menucool.com" />
<a class="lazyImage" href="images/image-slider-2.jpg" title="Customizable Transition Effects">Customizable Transition Effects</a>
<b data-src="images/image-slider-3.jpg" data-alt="#htmlcaption3">Image Slider</b>
</a>
<a class="lazyImage" href="images/image-slider-4.jpg" title="Pure Javascript. No jQuery. No flash.">Plain Javascript Slider</a>
<a class="lazyImage" href="images/image-slider-5.jpg" title="#htmlcaption5">Lazy Loading Image</a>
<a class="lazyImage" href="images/image-slider-1.jpg" title="Light weight Image Slider">Light weight Image Slider</a>
<a class="lazyImage" href="images/image-slider-2.jpg" title="Fine tuned. Sleek & Smooth">Fine tuned. Sleek & Smooth</a>
<a class="lazyImage" href="images/image-slider-3.jpg" title="Easy-to-Use Slider">Easy-to-Use Slider</a>
</div>
<div style="display: none;">
<div id="htmlcaption3">
<em>HTML</em> caption. Back to <a href="http://www.menucool.com/">Menucool</a>.
</div>
<div id="htmlcaption5">
Smart Lazy Loading Image
</div>
</div>
<!--thumbnails-->
<div id="thumbs">
<div class="thumb"><img src="images/thumb1.jpg" /></div>
<div class="thumb"><img src="images/thumb2.jpg" /></div>
<div class="thumb"><img src="images/thumb3.jpg" /></div>
<div class="thumb"><img src="images/thumb4.jpg" /></div>
<div class="thumb"><img src="images/thumb5.jpg" /></div>
<div class="thumb"><img src="images/thumb1.jpg" /></div>
<div class="thumb"><img src="images/thumb2.jpg" /></div>
<div class="thumb"><img src="images/thumb3.jpg" /></div>
</div>
</div>
który wrzucasz gdzie chcesz aby ukazywał się na stronie.
DZIAŁA, bo sprawdziłem.