download the newest version of jQuery (jquery.com – or use the googlecode link)
and insert the following lines into your head-tag
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="jq_default.js"></script>
insert the slider-container into your body wherever you want
<div id="d01">
<img id="i01" src="">
<img id="i02" src="">
</div>
insert a button and assign the effect-id you like:
<button id="fadeItems">Fade</button>
for a fadeout-effect
<button id="slideLeft">Fade</button>
for a fadeout-slide-left-effect
<button id="slideRight">Fade</button>
for a fadeout-slide-right-effect
If you want to use the toggle-effect you have to insert an empty paragraph including the class .info
<p class="info"> </p>
in jq_default.css you can adjust following styles if you want
(don't touch the other ones – they're privat!)
adjust the width and height of the image-container (up to 1000px) in #d01:
#d01 {
width:800px;
height:458px;
margin: 0 auto;
}
adjust if the image inside your container should fit in height or in width
(the overflow gets cropped)-you can even drop the size-fitting
#i01 {
height:100%;
}
#i02 {
height:100%;
}
style the toggle-popup in .info:
.info{
width: 800px;
height: 30px;
padding:10px 0 0 0;
text-align: center;
background: rgba(255,255,255,0.1);
margin:0 auto;
}
create a folder named "img" and put some pics inside
open jq_default.js and swap the file-names of your pics
pic=["01.jpg","02.jpg","03.jpg","04.jpg","05.jpg"];
if you want to use the toggle-effect just add the description of your pic inside "vogelname"
vogelname =["Prachttaucher","Spielhahn","Eisvogel","Bienenfresser","Haubenlerche"];