Hello all,
Again it's time for another slider issue from me. I am more concerned with the HTML rather than the CSS. Here is the website with the two images one above the other (slider is not loading):
http://ldthf.lounh.servertrust.com/
I fear it has something to do with this tidbit:
Code:
<script type= "text/javascript">
$(window).load(function(){
$('#slider').nivoSlider(){
</script>
But I am not sure at all and completely lost. Please help! All images, css, .js files are loaded on the website.
HTML:
Code:
<html>
<head>
<link rel="stylesheet" href="/v/vspfiles/assets/images/style.css">
<script type= "text/javascript" src="/v/vspfiles/assets/images/jquery.nivo.slider.js"></script>
<script type= "text/javascript" src="/v/vspfiles/assets/images/jquery-1.6.4.js"></script>
<script type= "text/javascript">
$(window).load(function(){
$('#slider').nivoSlider({
effect: 'fold', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 10, // For box animations
boxRows: 4, // For box animations
animSpeed: 400, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: true, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
</head>
<body>
<div id="wrapper"
<div id="slider_wrapper">
<div id="slider">
<img src="/v/vspfiles/assets/images/banner1.gif" title="Welcome To Our New Website!">
<img src="/v/vspfiles/assets/images/banner2.gif" title="#htmlcaption">
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>image</strong> <a href="#">tag</a>
</div>
</div>
</div>
</body>
</html>
CSS:
Code:
#slider_wrapper {
height: 246px;
}
#slider {
position: relative;
width: 618px;
height: 246px;
background: url(/v/vspfiles/assets/images/loading.gif) no-repeat 50% 50%;
}
#slider_img {
position: absolute;
top: 0;
left: 0;
display: none;
}
#slider a{
border: 0;
display: block;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
font-family: arial, helvetica, sans-serif;
text-transform: uppercase;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
color: #ff0000;
text-decoration: none;
}
.nivo-caption a:hover {
color: #0066CC;
text-decoration: underline;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:40%;
z-index:9;
cursor:pointer;
background: url(/v/vspfiles/assets/images/arrows.png) no-repeat;
text-indent: -9999px;
width: 45px;
height: 50px;
display: block;
}
a.nivo-prevNav {
left:15px;
}
a.nivo-nextNav {
right:15px;
background-position: -45px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
margin-left: 450px;
}
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
float: left;
background: url(/v/vspfiles/assets/images/bullets.png) no-repeat;
width: 22px;
height: 22px;
text-indent: -9999px;
margin-top: 260px;
}
.nivo-controlNav a.active {
background-position: 0 -22px;
}
Before you post, read our: 
Another Nivo Slider Issue - Slider Not Loading
