Hello I am trying to add more slides to a page. Currently it had 9 slides. I am able to add slides (so far just added 1 for testing). I updated the IF statement from 9 to 10 and updated the circles to reflet 10 pages now instead of 9. However when i get to the last page, nothing shows up. IF i inspect the elememet it shows the proper linkage to the image i want to show.
anyways here is the code in its intirety.
<style>
header{
/*453px*/
background: #152945 url(images_int/header_BG.png) no-repeat 453px 0px;
}
.panel{
background-image: url(images/hullBG.png);
background-repeat: no-repeat;
background-position: 0px 50px;
height: 1083px;
padding: 75px 0px 0px 50px;
line-height: 3em;
}
#navButtons{
background: #D4CEAC;
}
.slides{
position:relative;
width:9000px;
height: 563px;
}
.slide{
display:inline-block;
width:904px;
}
.slide img{
display:block;
margin: 0px auto;
}
.addShadow{
box-shadow: 7px 6px 5px #000000;
}
p{
color:#fff;
text-align:center;
font-family:"Times New Roman", Times, serif;
line-height:32px; }
#l_arrow{
float:left;
position:relative;
left:-50px;
top:-380px;
}
#r_arrow{
float:right;
position:relative;
top:-380px;
}
.circles{
margin:12px 300px;
}
.circle{
display:inline-block;
border:1px solid white;
border-radius:20px;
width:20px;
height:20px;
}
.nowShowing{
background-color:rgba(249,245,245,0.60);
}
</style>
<div class="panel">
<div class="slides">
<div class="slide slideShowing">
<img class="addShadow" src="images/USS_MAINE.jpg" alt="USS Maine" width="640" height="500">
<p>1898: USS Maine wreckage, Santiago Cuba</p>
</div>
<div class="slide">
<img class="addShadow" src="images/his02.png" alt="us fleet at GITMO" width="904" height="500">
<p>American fleet in route Guantanamo Bay</p>
</div>
<div class="slide">New slide
<p> just some random data for testing</p>
</div>
<div class="slide">
<img class="addShadow" src="images/his03.jpg" alt="Navy Department" width="843" height="500">
<p>1904: Navy Department</p>
</div>
<div class="slide">
<img class="addShadow" src="images/his04.jpg" alt="coaling at sea" width="462" height="500">
<p>1913: Collier Cyclops and the battleship South Carolina testing Spencer Miller's coaling-at-sea rig</p>
</div>
<div class="slide">
<img class="addShadow" src="images/his05.jpg" alt="German U Boat" width="864" height="500">
<p>1917: WWI German U-boat</p>
</div>
<div class="slide">
<img src="images/his06.png" alt="Chester Nimitz and the USS Maumee" width="795" height="500">
<p>Chester Nimitz and the USS Maumee</p>
</div>
<div class="slide">
<img src="images/his07.png" alt="USS Maumee refueling" width="863" height="500">
<p>USS Maumee refueling</p>
</div>
<div class="slide">
<img src="images/his08.png" alt="USS Chester and the USS Mungford" width="904" height="500">
<p>Winter 1938/39: Heavy cruiser USS Chester (left) and the destroyer USS Mungford (right)</p>
</div>
<div class="slide">
<img class="addShadow" src="images/his09.jpg" alt="CO Arliegh Burke, USS Mungford" width="399" height="500">
<p>CO Arliegh Burke aboard the USS Mungford</p>
</div>
</div>
<div class="circles">
<div class="circle nowShowing"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div id="l_arrow">
<img src="images_int/left_arrow.png" width="50" height="100">
</div>
<div id="r_arrow">
<img src="images_int/right_arrow.png" width="50" height="100">
</div>
<script>
$(document).ready(function(e){
$("#l_arrow").css("visibility","hidden");
var $x = 0;
var $slideCount = 1;
$('.slide').css('opacity', 0);
$('.slideShowing').css('opacity', 1);
function controls(){
$("#r_arrow").css("visibility","visible");
$("#l_arrow").css("visibility","visible");
if($slideCount == 10){
$("#r_arrow").css("visibility","hidden");
}
if($slideCount == 1){
$("#l_arrow").css("visibility","hidden");
}
$(".nowShowing").removeClass("nowShowing");
$(".circles div:nth-child("+$slideCount+")").addClass("nowShowing");
}
$("#r_arrow").click(function(){
$("#r_arrow").css("visibility","hidden");
$("#l_arrow").css("visibility","hidden");
$x = $x + 904;
$slideCount += 1;
$(".slideShowing").animate({
opacity:'0',
});
$(".slideShowing").removeClass("slideShowing");
$(".slides div:nth-child("+$slideCount+")").addClass("slideShowing");
$(".slideShowing").animate({
opacity:'1',
});
$(".slides").animate({right:$x},{duration:500, complete:function(){
controls();
}
});
});
$("#l_arrow").click(function(){
$("#r_arrow").css("visibility","hidden");
$("#l_arrow").css("visibility","hidden");
$x = $x - 904;
$slideCount -= 1;
$(".slideShowing").animate({
opacity:'0',
});
$(".slideShowing").removeClass("slideShowing");
$(".slides div:nth-child("+$slideCount+")").addClass("slideShowing");
$(".slideShowing").animate({
opacity:'1',
});
$(".slides").animate({right:$x},{duration:600, complete:function(){
controls();
}
});
});
});
</script>
<!-- Above from Utopia content, below from template. Change $title to $au_title if you want the SCO title instead of the page -->
<script>
$(document).ready(function(e){
$("h6").html("3 of 4");
$("h1").html("UNREP Legacy");
$("h5").html("Overview");
document.getElementById("leftButton").onclick = function() {changer("stream/over/over0020.html")};
document.getElementById("rightButton").onclick = function() {changer("stream/over/over0040.html")};
});
</script>
</div>
<!-- end hero content -->
<div id="cr_container">
</div>
</body>
</html>
1
Reply
AdChoices