noobSlide - mootools

Sample 5

Photo Photo Photo Photo Photo Photo Photo Photo

<< Previous Play > Stop Next >>

 

le script ne fonctionne pas HELP

j'ai cree une repertoir noobSlide

j'ai importe (ftp) tout les fichiers , dro

ci joint l'erreur (fichier error_log): [13-May-2009 19:31:03] PHP Parse error: syntax error, unexpected T_STRING in /home/xxxx/public_html/noobSlide/index.html on line 1it 777

------------------------------------

code page sample5.html

en vert les modifications

-----------------------------------------------------------------------------------------

<head>

<link rel="stylesheet" href="http://www.location-nimes-maison.com/noobSlide/_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.location-nimes-maison.com/noobSlide/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.location-nimes-maison.com/noobSlide/_mootools.js"></script>
<script type="text/javascript" src="http://www.location-nimes-maison.com/noobSlide/_class.noobSlide.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
//SAMPLE 5 (mode: vertical, using "onWalk" )
var info5 = $('info5').setOpacity(0.5);
var sampleObjectItems =[
{title:'Morbi elementum', autor:'Lorem', date:'5 Jun 2007', link:'http://www.link1.com'},
{title:'Mollis leo', autor:'Ipsum', date:'6 Dic 2007', link:'http://www.link2.com'},
{title:'Nunc adipiscing', autor:'Dolor', date:'9 Feb 2007', link:'http://www.link3.com'},
{title:'Phasellus volutpat pharetra', autor:'Sit', date:'22 Jul 2007', link:'http://www.link4.com'},
{title:'Sed sollicitudin diam', autor:'Amet', date:'30 Set 2007', link:'http://www.link5.com'},
{title:'Ut quis magna vel', autor:'Consecteur', date:'5 Nov 2007', link:'http://www.link6.com'},
{title:'Curabitur et ante in', autor:'Adipsim', date:'12 Mar 2007', link:'http://www.link7.com'},
{title:'Aliquam commodo', autor:'Colom', date:'10 Abr 2007', link:'http://www.link8.com'}
];
var hs5 = new noobSlide({
mode: 'vertical',
box: $('box5'),
size: 180,
items: sampleObjectItems,
buttons: {
previous: $('prev5'),
play: $('play5'),
stop: $('stop5'),
next: $('next5')
},
onWalk: function(currentItem){
info5.empty();
new Element('h4').setHTML('<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info5);
new Element('p').setHTML('<b>Autor</b>: '+currentItem.autor+' &nbsp; &nbsp; <b>Date</b>: '+currentItem.date).inject(info5);
}
});



//more "previous" and "next" buttons
hs8.addActionButtons('previous',$ES('.prev','box8'));
hs8.addActionButtons('next',$ES('.next','box8'));
//more handle buttons
var handles8_more = $ES('span','handles8_more');
hs8.addHandleButtons(handles8_more);
//
hs8.walk(0)

});
</script>
</head>
<body>
<div id="cont">

<h1>noobSlide - mootools</h1>

<!-- SAMPLE 5 -->
<h2>Sample 5</h2>
<div class="sample">
<div class="mask2">
<div id="box5">
<span><img src="http://www.location-nimes-maison.com/noobSlide/img1.jpg" alt="Photo" /></span>
<span><img src="http://www.location-nimes-maison.com/noobSlide/img2.jpg" alt="Photo" /></span>
<span><img src="http://www.location-nimes-maison.com/noobSlide/img3.jpg" alt="Photo" /></span>
<span><img src="http://www.location-nimes-maison.com/noobSlide/img4.jpg" alt="Photo" /></span>
<span><img src="http://www.location-nimes-maison.com/noobSlide/img5.jpg" alt="Photo" /></span>
<span><img src="http://www.location-nimes-maison.com/noobSlide/img6.jpg" alt="Photo" /></span>
<span><img src="http://www.location-nimes-maison.com/noobSlide/img7.jpg" alt="Photo" /></span>
<span><img src="http://www.location-nimes-maison.com/noobSlide/img8.jpg" alt="Photo" /></span>
</div>
<div id="info5" class="info"></div>
</div>
<p class="buttons">
<span id="prev5">&lt;&lt; Previous</span>
<span id="play5">Play &gt;</span>
<span id="stop5">Stop</span>
<span id="next5">Next &gt;&gt;</span>
</p>
</div>

 

</div>
</body>
</html>

------------------------------------------------------------

page style.css

aucune modification

----------------------------------------------------------------

/* Sample 1*/
#box1{
position:absolute;
}
#box1 span{
display:block;
float:left;
}

/* Sample 2*/
#box2{
position:absolute;
}
#box2 span{
display:block;
float:left;
}

/* Sample 3*/
#box3{
position:absolute;
}
#box3 span{
display:block;
float:left;
}

/* Sample 4*/
#box4{
position:absolute;
}
#box4 div{
width:480px;
height:240px;
float:left;
background:#eee;
}

#box4 h3, #box4 p, #box4 ul{
padding:5px 10px;
}
#box4 p{
text-indent:16px;
}
#box4 img{
width:200px;
width:150px;
float:left;
margin:0 10px 10px 15px;
}
#info4{
background:#fff !important;
color:red !important;
cursor:default
}

/* 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;
}