rexen
Threadersteller
Dabei seit: 18.04.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 10.05.2012 13:13
Titel noobSlide - mootools einfügen |
  |
|
Hat jemand schon mal den Mootool eingefügt...ich weiß nicht mehr weiter
Ich will Beispiel 7 verwenden!!!
wie broß z.b. die bilder seinen sollen usw...kann mir jemand kurz erklä[/code]ren was man machen muss??
| Code: |
<title>noobSlide - mootools</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="mootools-1.2-core.js"></script>
<script type="text/javascript" src="_class.noobSlide.packed.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
//SAMPLE 7
var startItem = 3; //or 0 or any
var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*60-568)+'px').set('opacity',0.8);
var fxOptions7 = {property:'left',duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
var thumbsFx = new Fx.Tween(thumbs_mask7,fxOptions7);
var nS7 = new noobSlide({
box: $('box7'),
items: [0,1,2,3,4,5,6,7],
handles: $$('#thumbs_handles7 span'),
fxOptions: fxOptions7,
onWalk: function(currentItem){
thumbsFx.start(currentItem*60-568);
},
startItem: startItem
});
//walk to first with fx
nS7.walk(0);
//SAMPLE 8
var handles8_more = $$('#handles8_more span');
var nS8 = new noobSlide({
box: $('box8'),
items: $$('#box8 h3'),
size: 480,
handles: $$('#handles8 span'),
addButtons: {previous: $('prev8'), play: $('play8'), stop: $('stop8'), playback: $('playback8'), next: $('next8') },
onWalk: function(currentItem,currentHandle){
//style for handles
$$(this.handles,handles8_more).removeClass('active');
$$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
//text for "previous" and "next" default buttons
$('prev8').set('html','<< '+this.items[this.previousIndex].innerHTML);
$('next8').set('html',this.items[this.nextIndex].innerHTML+' >>');
}
});
//more "previous" and "next" buttons
nS8.addActionButtons('previous',$$('#box8 .prev'));
nS8.addActionButtons('next',$$('#box8 .next'));
//more handle buttons
nS8.addHandleButtons(handles8_more);
//walk to item 3 witouth fx
nS8.walk(3,false,true);
});
</script>
<style type="text/css">
<!--
/* Sample 5*/
#box5{
position:absolute;
width:240px;
}
#box5 span{
display:block;
}
#info5{
bottom:0;
}
/* Sample 6*/
#box6{
position:absolute;
width:240px;
}
#box6 span{
display:block;
}
#handles6_1{
float:left
}
#handles6_2{
float:right
}
.mask6{
position:absolute;
left:50%;
margin-left:-120px;
width:240px;
height:180px;
overflow:hidden;
}
.sample6 .buttons{
clear:both;
text-align:center;
}
/* Sample 7*/
#box7{
position:absolute;
}
#box7 span{
display:block;
float:left;
}
#thumbs7{
position:relative;
width:486px;
clear:both;
height:41px;
overflow:hidden;
margin-top:200px;
}
#thumbs7 .thumbs, #thumbs_handles7, #thumbs_mask7{
position:absolute;
top:0;
width:100%;
height:41px;
}
#thumbs7 .thumbs div, #thumbs_handles7 span{
display:block;
width:60px;
height:41px;
margin:0;
float:left;
cursor:pointer;
}
#thumbs7 .thumbs div img{
width:54px;
float:right;
}
#thumbs_handles7 span{
background:url(thumb_invisible.gif) no-repeat;
}
#thumbs_mask7{
width:1200px;
background:url(thumbs_mask.gif) no-repeat center top;
}
/* Sample 8*/
#box8{
position:absolute;
}
#box8 div{
width:480px;
float:left;
}
#box8 .buttons{
text-align:left
}
#box8 .next{
float:right
}
.sample8 .buttons{
text-align:center;
clear:both;
}
.sample8 .mask1{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
/* ********************************** */
.thumbs{
width:54px;
}
.thumbs div{
display:block;
width:54px;
height:41px;
margin:3px 0;
cursor:pointer;
}
.thumbs div img{
display:block;
width:100%;
height:100%;
border:none
}
.info{
width:240px;
height:50px;
background:#000;
position:absolute;
}
.info p, .info h4{
color:#fff;
padding:3px 8px;
font-family:Arial;
}
.info h4{
font-size:14px;
}
.info h4 a{
float:right;
background:#fff;
color:#000;
font-size:10px;
padding:0 3px;
text-decoration:none
}
.mask1{
position:relative;
width:480px;
height:180px;
overflow:hidden;
}
.mask2{
position:relative;
width:240px;
height:180px;
overflow:hidden;
}
.mask3{
position:relative;
width:480px;
height:240px;
overflow:hidden;
}
span img{
display:block;
border:none;
}
-->
</style>
</head>
<body>
<div id="cont">
<h1>noobSlide - mootools</h1>
<!-- SAMPLE 7 -->
<h2>Sample 7</h2>
<div class="sample">
<div class="mask6">
<div id="box7">
<span><img src="img1.jpg" alt="Photo" /></span>
<span><img src="img2.jpg" alt="Photo" /></span>
<span><img src="img3.jpg" alt="Photo" /></span>
<span><img src="img4.jpg" alt="Photo" /></span>
<span><img src="img5.jpg" alt="Photo" /></span>
<span><img src="img6.jpg" alt="Photo" /></span>
<span><img src="img7.jpg" alt="Photo" /></span>
<span><img src="img8.jpg" alt="Photo" /></span>
</div>
</div>
<div id="thumbs7">
<div class="thumbs">
<div><img src="img1.jpg" alt="Photo Thumb" /></div>
<div><img src="img2.jpg" alt="Photo Thumb" /></div>
<div><img src="img3.jpg" alt="Photo Thumb" /></div>
<div><img src="img4.jpg" alt="Photo Thumb" /></div>
<div><img src="img5.jpg" alt="Photo Thumb" /></div>
<div><img src="img6.jpg" alt="Photo Thumb" /></div>
<div><img src="img7.jpg" alt="Photo Thumb" /></div>
<div><img src="img8.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
<p id="thumbs_handles7">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
</div>
</div>
</div>
</body>
</html>
|
|
|
Willkommen auf dem Portal für Mediengestalter
