Highlighted

trouble with slider in dreamweaver

New Here ,
Jul 16, 2020

Copy link to clipboard

Copied

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>

Views

30

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

trouble with slider in dreamweaver

New Here ,
Jul 16, 2020

Copy link to clipboard

Copied

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>

Views

31

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 16, 2020 0
Adobe Community Professional ,
Jul 16, 2020

Copy link to clipboard

Copied

Maybe this is a blessing in disguise. 

 

Sliders are routinely used for 3-4 attention grabbing, same-sized images.  Sliders are frequently overlayed with teaser captions and links to points of interest on your site.  OTOH, photo galleries are more appropriate for larger collections.  To reduce bandwidth, low-res thumbnails appear on page load while full sized images are deferred until requested. 

https://css-tricks.com/tips-for-rolling-your-own-lazy-loading/

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 16, 2020 0