12
Vorschau
"fx: 'turnDown'," - kann verändert werden durch die unten stehenden Wörten. ( Slide wird dann ein anderer Effekt.
blindX
blindY
blindZ
cover
curtainX
curtainY
fade
fadeZoom
growX
growY
none
scrollUp
scrollDown
scrollLeft
scrollRight
scrollHorz
scrollVert
shuffle
slideX
slideY
toss
turnUp
turnDown
turnLeft
turnRight
uncover
wipe
zoom
Slideshow blindX
blindY
blindZ
cover
curtainX
curtainY
fade
fadeZoom
growX
growY
none
scrollUp
scrollDown
scrollLeft
scrollRight
scrollHorz
scrollVert
shuffle
slideX
slideY
toss
turnUp
turnDown
turnLeft
turnRight
uncover
wipe
zoom
CSS-Code
<style type="text/css">
.slideshow {
width: 540px;
height: 395px;
margin: 30px auto;
}
.slideshow img {
padding: 20px;
background: #transparent;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
</style>
.slideshow {
width: 540px;
height: 395px;
margin: 30px auto;
}
.slideshow img {
padding: 20px;
background: #transparent;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
</style>
Text Code
<div class="slideshow"><img width="500" height="375" alt="" src="http://www.loaditup.de/files/673972_pqn4hwrh44.png" /></a> <img width="500" height="375" alt="" src="http://www.loaditup.de/files/673973_44myfs9vh6.png" /> <img width="500" height="375" alt="" src="http://www.loaditup.de/files/673974_fayqcaug5k.png" /> <img width="500" height="375" alt="" src="http://www.loaditup.de/files/673975_wehqdsypkm.png" /></div>
<!--end slideshow-->
<!--end slideshow-->
Text über dem Design
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.1/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/
cycle/jquery.cycle.all.2.74.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow')
.after('<div id="nav">')
.cycle({
fx: 'turnDown', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
pager: '#nav'
});
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.1/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/
cycle/jquery.cycle.all.2.74.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow')
.after('<div id="nav">')
.cycle({
fx: 'turnDown', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
pager: '#nav'
});
});
</script>