nivoslider and captions issue

[ianhaney]

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>

<!-- Include the theme stylesheet in the <head> section -->
<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]

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]

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]

Sorry have finally sorted the issue out

[styxlawyer]

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]

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