I’m trying to load a CSS slider on my forum’s homepage with PHP. As you can see on ModJolt.com I got the same slider in the corner on the right and it’s working. Now I’m trying to put it on the homepage of another forum. I put all the css in, I’m using this for CSS:
[php]/* Make it work!! */
#slider{
height: 160px;
width: 496px;
float: right;
position: relative;
background: url({style_images_url}/sliderbg.png) no-repeat;
}
#example{
height: 160px;
width: 460px;
position: absolute;
right: 0;
}
#slides{
position: absolute;
z-index: 100;
width: 345px;
height: 157px;
top: 4px;
right: 30px;
}
/*
Slideshow
*/
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
.slides_container {
width:370px;
overflow:hidden;
position:relative;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
.slides_container div.slide {
width:370px;
height:157px;
display:block;
}
/*
Next/prev buttons
*/
#slides .next,#slides .prev {
position:absolute;
top:56px;
left:0px;
width:24px;
height:43px;
display:block;
z-index:101;
}
#slides .next {
left:346px;
}
/*
/*
Pagination
*/
/*.pagination {
margin:26px auto 0;
width:100px;
}
.pagination li {
float:left;
margin:0 1px;
list-style:none;
}
.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background-image:url(…/img/pagination.png);
background-position:0 0;
float:left;
overflow:hidden;
}
.pagination li.current a {
background-position:0 -12px;
}*/
/*
Caption
*/
.caption {
z-index:500;
position:absolute;
bottom:-35px;
left:0;
height:20px;
padding:3px 20px 0 20px;
background:#000;
background:rgba(0,0,0,.5);
width:370px;
font-size:1.0em;
line-height:1.33;
color:#fff;
border-top:1px solid #000;
text-shadow:none;
}[/php]
I’m then using both of these code sets in a file called slider.php which I’m loading from the homepage.
[php]
<script type='text/javascript'>
jQuery.noConflict();
jQuery(document).ready(function($){
$('#slides').slides({
preload: true,
preloadImage: '{style_images_url}/loading.gif',
play: 5000,
pause: 2500,
pagination: false,
generatePagination: false,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>
title=“MW3 confirmed and unconfirmed weapons” target="_blank"><img src="http://thecoddaily.files.wordpress.com/2011/07/mw3-inverted.png?
w=300&h=126" width=“300” height=“150” alt=“Slide 1”>
All MW3 weapons, confirmed and unconfirmed
<div class="slide">
<a href="http://modjolt.com/subscriptions/" title="Purchase Jolt." target="_blank"><img
src=“http://modjolt.com/joltsub.png” width=“300” height=“150” alt=“Slide 1”>
Purchase a Jolt subscription for only $4.95
<a href=“http://modjolt.com/forum/44-jolt-market/” title=“Shop in our Mod Jolt Market!”
target="_blank">
Shop in our Mod Jolt Market!
<a href=“http://modjolt.com/forum/45-introduce-yourself/” title="introduce
yourself!"_blank"><img src=“http://fc04.deviantart.net/fs9/i/2006/062/a/6/Hello_My_Name_Is_Sticker_by_trexweb.jpg” width=“370” height=“157”
alt=“Slide 3”>
New to the site? Introduce yourself
<a href=“http://modjolt.com/topic/16-new-game-from-bungie/” title=“new game from bungie?”
target="_blank">
Bungie Drops Hints at New Game Codenamed Tiger
<a href="/topic/47-no-%E2%80%9Ccommando%E2%80%9D-perk-in-modern-warfare-3-says-bowling/"
title=“No “Commando” Perk in Modern Warfare 3, Says Bowling” target="_blank"><img
src=“http://gyazo.com/287db4ff9519d919131981955e578a15.png” width=“370” height=“157” alt=“Slide 7”>
No “Commando” Perk in Modern Warfare 3, Says Bowling
<img src="{style_images_url}/arrow-prev.png" width=“24” height=“43” alt="Arrow
Prev">
<img src="{style_images_url}/arrow-next.png" width=“24” height=“43” alt="Arrow
Next">
[/php]
All I get on the homepage (workboard.ca) is the arrows. Any idea what I have wrong?