пропозиції роботи
Łukasz
Zając
Student, Uniwersytet
Rzeszowski
Temat: [JS] Problem ze zmieniającymi się zdjęciami -...
Witam. Chcę zrobić zmieniające się zdjęcia w js, wykorzystując bibliotekę jquery. Pobrałem odpowiednią galerię z jquery.com. Mam trzy pliki:basic.css
<html>
<head>
<link rel="Stylesheet" type="text/css" href="basic.css" />
<script type="text/javascript" src="basic.js"></script>
</head>
<body>
<div class="slideshow basic">
<div class='pad'>
<div class='scroller'>
<div class='slides'>
<div><p>HTML Content1</p><p>Center vertically</p></div>
<div><p>HTML Content2</p><p>Center vertically</p></div>
<div><p>HTML Content3</p><p>Center vertically</p></div>
<div><p>HTML Content4</p><p>Center vertically</p></div>
<div><p>HTML Content5</p><p>Center vertically</p></div>
<div><p>HTML Content6</p><p>Center vertically</p></div>
<div><p>HTML Content7</p><p>Center vertically</p></div>
<div><p>HTML Content8</p><p>Center vertically</p></div>
<div><p>HTML Content9</p><p>Center vertically</p></div>
<div><p>HTML Content10</p><p>Center vertically</p></div>
<div><p>HTML Content11</p><p>Center vertically</p></div>
<div><p>HTML Content12</p><p>Center vertically</p></div>
<div><p>HTML Content13</p><p>Center vertically</p></div>
</div>
</div>
</div>
</div>
</body>
</html>
basic.css
/* slideshow
******************************************/
.slideshow.basic{
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #ddd;
box-shadow: 10px 10px 30px #aaa;
}
.slideshow.basic a:active, .slideshow.basic a:focus {
border:none;
outline:none;
}
/* slides
******************************************/
.slideshow.basic > .pad{
width : 500px;
padding : 9px;
}
.slideshow.basic > .pad > .scroller{
overflow: hidden;
}
.slideshow.basic > .pad > .scroller > .slides{
display: table;
table-layout: fixed;
position: relative;
width : 0;
}
.slideshow.basic > .pad > .scroller > .slides > div{
display: table-cell;
vertical-align: middle;
text-align: center;
width : 500px;
height : 130px;
}
/* end slides
******************************************/
/* player
******************************************/
.slideshow.basic > .player{
position:relative;
width : 520px;
}
.slideshow.basic > .player > *{
display : inline-block;
height : 25px;
width : 25px;
position : absolute;
top : 55px;
margin : 5px;
z-index : 1000;
background-image: url(../image/player_horizontal.png);
background-repeat: no-repeat;
}
.slideshow.basic > .player > .previous{
left : 0;
background-position: -25px 0px;
}
.slideshow.basic > .player > .next{
right : 0;
background-position: -125px 0px;
}
/* end player
******************************************/
/* end slideshow
******************************************/
basic.js
JocodeSlideshowExemple.basic = function(){
return $.data(
$('.slideshow.basic').jocodeSlideshow({
$slides : '> .pad > .scroller > .slides > div',
$buttons : '> .player',
$pause_hover : '<',
$mask_buttons_hover : '<' ,
delay : 1000,
auto_play : true,
fx : new $.JocodeSlideshowFx.Scroll({
duration : 1000,
$scroller : '> .pad > .scroller'
})
})[0]
, 'jocodeSlideshow'
);
};
Niestety, galeria "powinna" działać a nie działa. Czy ktoś wie jaka jest tego przyczyna? Nie znam JS. Zastanawia mnie jedynie dlaczego nie chce działać... Sciągnąłem cały pakiet galerii, gdzie odpala się plik index.php i jest do wyboru kilka. Ja wybrałem tę najprostszą - basic- ale nie działa. Nie mam pojęcia dlaczego gdy otworze plik startowy- index.php to jeśli ją wybiore to działa a gdy ją wstawię w oddzielny plik to nie dziala. Prosze o pomoc bo już skończyły mi się pomysły jaka może byc tego przyczyna.
Pozdrawiam
