nivoslider and captions issue [Archive]

ianhaney

05-11-2016, 12:15 PM

Hi

I am having a nightmare with nivoslider and its captions, I moved the captions outside of the nivoslider so they appear next to the slideshow but for some reason, caption1 has duplicated and will not disppaear, never had this issue before and is giving me a right headache, I can't work out why, below is my coding

<div class="slideshow">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/slideshow/home-healthcare-1.jpg" alt="" title="#htmlcaption1"/>
<img src="images/slideshow/home-healthcare-2.jpg" alt="" title="#htmlcaption2" />
<img src="images/slideshow/home-healthcare-3.jpg" alt="" title="#htmlcaption3" />
<img src="images/slideshow/home-healthcare-4.jpg" alt="" title="#htmlcaption4"/>
</div>
</div>
</div>

<div id="htmlcaption1" class="nivo-caption">
<h3 class="slide-titles">Palliative Care</h3>
<div class="caption-text">
J & S Health care specialist team are trained in palliative care. We ensure the best possible support is given to both clients and their loved ones throughout this delicate time.
</div>
<div class="button">
<a class="button" href="services.php">FIND OUT MORE</a>
</div>
</div>

<div id="htmlcaption2" class="nivo-caption">
<h3 class="slide-titles">Paediatric Health Care</h3>
<div class="caption-text">
It can be a worrying time when your child is ill. Our specialist carers will provide support and care to make your child feel as comfortable as possible. We can liase with your child's hospital team or case worker to ensure the best possible care.
</div>
<div class="button">
<a class="button" href="services.php">FIND OUT MORE</a>
</div>
</div>

<div id="htmlcaption3" class="nivo-caption">
<h3 class="slide-titles">Home Care</h3>
<div class="caption-text">
Our friendly experienced home care nurses can attend once a day to administer medication, change dressings and check blood pressure. A friendly face and a chat can really help to brighten someones day.
</div>
<div class="button">
<a class="button" href="services.php">FIND OUT MORE</a>
</div>
</div>

<div id="htmlcaption4" class="nivo-caption">
<h3 class="last-slide-title">Life Comes First</h3>
<div class="caption-text">
We pride ourselves on offering the highest level of home health care to clients of all ages and all needs. Our clients well being and care is our absolute top priority. Contact us for informal chat to find out how we can help.

In my header.php file, I have the following

<link rel="stylesheet" href="./css/nivo-slider.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="./js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 8000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
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>


<link rel="stylesheet" href="./css/default.css" type="text/css" />

here is the link to the site to see the issue - www.jslifecomesfirst.com

jscheuer1

05-11-2016, 02:47 PM

I guess you fixed it because it's not happening now for me (Opera, and IE under Windows 7). If not:

You may just have to clear the cache and refresh the page.

If after that you still see the problem, which browser are you using, or do I have to do something special to see the problem?

ianhaney

05-12-2016, 09:09 AM

Update:

Sorry I did fix it but the client did not like it and wants the captions next to the slideshow, so the captions will be on the right

I am out of ideas, below is my up to date coding

The website www.jslifecomesfirst.com

below is my HTML and CSS for it

<div class="slideshow">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider" >
<img src="images/slideshow/home-healthcare-1.jpg" title="#htmlcaption1" alt="Magnifique canapé blanc vue d'ensemble" data-transition="fade" >
<img src="images/slideshow/home-healthcare-2.jpg" title="#htmlcaption2" alt="Magnifique canapé blanc vue gauche" >
<img src="images/slideshow/home-healthcare-3.jpg" title="#htmlcaption3" alt="Magnifique canapé blanc vue droite" >
<img src="images/slideshow/home-healthcare-4.jpg" title="#htmlcaption3" alt="Magnifique canapé blanc vue droite" >
</div>
</div>
</div>

<div id="htmlcaption1" style="display:none">
<div class="nivo-caption1" >How to choose the Right Sofa for Your Room
</div>
<div class="nivo-caption1a" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <a href="./index.html" >tempor incididunt</a>
ut labore et dolore magna aliqua.
</div>
</div>

<div id="htmlcaption2" style="display:none">
<div class="nivo-caption2" >Design...
</div>
</div>

<div id="htmlcaption3" style="display:none">
<div class="nivo-caption3" >Comfort...
</div>
</div>

/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height: 327px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}

/* 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;
background:white;
filter:alpha(opacity=0);
opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }

.nivo-html-caption-box {
display: none;
}

.nivo-caption {
position:absolute;
left:0px; /* x offset position */
top:0px; /* y offset position */
overflow:hidden;
background:none;
font-family:Helvetica, Arial, Sans-Serif;
color:#FFF;
font-weight:bold;
font-size:40px;
line-height:44px;
text-align:left;
text-transform:uppercase; /* converts text to UPPERCASE */
z-index:8;
}
.nivo-caption a {
display:inline !important;
}

.nivo-caption1 {
margin-left:500px;
margin-top:5px;
width:500px;
font-size:38px;
line-height:40px;
text-transform:none;
color: #000000;
z-index: 9999;
float: right;
}
.nivo-caption1a {
margin-left:10px;
margin-top:10px;
width:190px;
font-size:12px;
line-height:14px;
text-transform:none;
}
.nivo-caption2 {
margin-left:230px;
margin-top:10px;
width:350px;
}
.nivo-caption3 {
margin-left:10px;
margin-top:100px;
width:350px;
}

.caption-text {
clear: both;
font-family: Verdana;
font-size: 14px;
color: #000000;
font-weight: bold;
}

.nivo-caption p {
padding:5px;
margin:0;
}

.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}

I can't work it out, each time I move the 1st caption, it starts to hide behind the slideshow so put in z-index: 9999 but does not do anything

Hope someone can help as am out of ideas

Thank you in advance

Ian

ianhaney

05-12-2016, 11:06 AM

Sorry have finally sorted the issue out

styxlawyer

05-12-2016, 03:29 PM

Just an observation, but you might improve it by stopping the "Find Out More" box jumping up and down. The simplest way is to ensure that the text in the three captions is the same length, otherwise you need to define the box as a separate entity and fix the position within the caption area.

ianhaney

05-12-2016, 03:48 PM

Just an observation, but you might improve it by stopping the "Find Out More" box jumping up and down. The simplest way is to ensure that the text in the three captions is the same length, otherwise you need to define the box as a separate entity and fix the position within the caption area.

Thank you will keep that in mind and take the feedback on board and look into doing that