I am new to responsive design. I am trying to use Foundation orbit slider for my project.
I am not able get the captions displayed for the pictures. I have following code...
<div class="row">
<div class="twelve columns">
<div id="slider">
<img src="images/pic1.jpg" />
<img src="images/pic2.jpg" />
<img src="images/pic3.jpg" />
</div>
</div>
<span class="orbit-caption" id="captionOne">Here is a caption1...</span>
<span class="orbit-caption" id="captionTwo">Here is a caption2...</span>
<span class="orbit-caption" id="captionThree">Here is a caption3...</span>
</div>
When I tried this for first time it didn't work. I tried looking in Stackoverflow and tried
the fix given by commanderdemon. Still it didn't work. I dont even get the dark strip for caption on the pics.
In foundation.css I see that display is set to none for the class orbit-caption
/* Captions ---------------------- */
.orbit-caption { display:none; font-family: inherit; }
.orbit-wrapper .orbit-caption { background: black; background: rgba(0, 0, 0, 0.6);
z-index: 30; color: white; text-align: center; padding: 7px 0; font-size: 13px;
position: absolute; right: 0; bottom: 0; width: 100%; }
By removing it I was able to see a tiny black strip (around 10px high) on the pic and the 3 captions are all appended and fallen out of the pictures.
Should the pictures be less than 400px in height? Is there a css fix required for this?
What am I doing wrong?
I have tried using just image tag instead of anchor tag. Both have same result.
P.S. I am using the foundation.css as it comes with download. I am not allowed to post a screen shot either...
Sorry found the mistake... I was supposed to put data-caption="#captionOne"
-Jody
In your js are 'captions' set to 'true' ?
<script type="text/javascript">
$(window).load(function() {
$("#featured").orbit({
captions : true
});
});
</script>
Provide same ID in image tag as in SPAN caption tag
Related
I am working with bxslider and I'd like to have a different animation for the slide's text.
While the slide slides to the left, I'd like the text box to be fixed in the middle and the text to fade in/out.
Any ideas? I've been trying all day
Here is a pen: Codepen
HTML:
<div class="bxslider" id="banner">
<div>
<img src="img" />
<h3 class="msl-title">Test Article</h3>
</div>
<div>
<img src="img" />
<h3 class="msl-title">Test Article</h3>
</div>
<div>
<img src="img" />
<h3 class="msl-title">Test Article</h3>
</div>
</div>
JS:
$(document).ready(function(){
$('.bxslider').bxSlider();
});
CSS:
#banner .msl-title {
width: 80%;
max-width: 350px;
top: 50%;
background: white;
padding: 40px;
position: relative;
margin: auto;
overflow: auto;
display: table;
height: 160px;
text-align: center;
transform: translateY(-65%);
border: 5px solid #61beb1;}
in order to achieving this you need a different aproach, because the box its inside the slider, it is hard to make fixed, but if you put the textbox outside the slider wrapper you can simply control the behaviour with the custom bxslider
$(document).ready(function(){
$('.msl-title').find('a').text(
$('#banner').children().first('div').data('text') );
$('.bxslider').bxSlider({'onSlideBefore':function(el,oldIndex,newIndex){
$('.msl-title').fadeOut(200,function(){
$('.msl-title').find('a').text($(el).data('text'));
$(this).stop().fadeIn(200);
});
}});
});
And using data properties from jQuery you can set the Text for every slide in the div
<div data-text="Slide 1">
Working Demo
https://codepen.io/Teobis/pen/zLpWKM
Hope this helps
Managed to find the solution. Simply take the info from the slider title and print it in an external div
var slideActive = $('.msl-item.active-slide .msl-title.active-text a').attr( "title" );
$( ".slider-title-box h3" ).text( slideActive );
The first line is looking for the slide title and the second line is printing it in the new div.
I gave absolute position to .slider-title-box so it'd fit over the slider.
Hope this helps another trying to achieve this
Im trying to create a slider that has the main image about 60% of the screen and then 20% of the previous and next image next to it. Here is an example http://www.qantumthemes.xyz/onair2/wpdemo/
Im trying to use slick slider and the example here https://kenwheeler.github.io/slick/ under Slider Syncing where it has the option centerMode. The problem is that I can't seem to find a way to set the width of the previous and next images.
Here is the code I have so far with slick slider
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
<section class="center slider">
<div>
<img src="1.jpg">
</div>
<div>
<img src="2.jpg">
</div>
<div>
<img src="3.jpg">
</div>
<div>
<img src="4.jpg">
</div>
</section>
I created this fiddle, which works they way you're asking https://jsfiddle.net/uqy8L69g/.
Main fix was to initialize variableWidth to true and set width for the slides:
.slick-slide {
width: 2em;
}
.slick-active {
width: 5.5em;
border: .1em solid black;
}
The problem is the weird move it does while changing slides. This happens because of centerMode. It implements padding only after the sliding was done. To fix that, I would play with transitions using onAfterChange (you can read about it here: https://github.com/kenwheeler/slick/issues/1005).
I am designing a webpage and want multiple images coming from one image using Javascript, CSS or Jquery whatever is required.
<img src="main.png" >
<img src="submain1.png" >
<img src="submain2.png" >
<img src="submain3.png" >
I am new to javascript and so it's getting difficult to solve it.
main.png is the main image and I want submain1.png, submain2.png, submain3.png images to come from the main.png one after the other as soon as the page loads.
As others have suggested, we think you are asking about sprite sheets. Now that you know a more common term for what you might be after you could try some searches. There are lots of CSS sprite issues on this site:
CSS Sprite Issues On StackOverflow
This is a quick demo:
#full { width: 389px; height: 186px; }
#window1 { background-position: 369px -11px; }
#window2 { background-position: 194px -91px; }
.iconback {
border: solid 1px;
background-image: url(http://www.icons-land.com/images/products/VistaPlayStopPauseIcons.jpg);
}
.window { width: 80px; height: 80px; margin: 1em; }
<div id="full" class="iconback"></div>
<div id="window1" class="iconback window"></div>
<div id="window2" class="iconback window"></div>
Trying to get a DIV to "float" to the bottom of the div its in. I've got the position set to relative on the parent div and kid, and bottom to 0 on the kid; but it still just sits at the top in the middle.
Parent DIV:
.detailsContainer
{
width: 100%;
height: 30%;
overflow: hidden;
position: relative;
background-color: blue;
}
Kid DIV
.obutton
{
text-align: center;
font-weight: bold;
width: 80%;
height: 29px;
background:rgba(204,204,204,0);
position:relative;
bottom: 0;
display: inline-block;
color: #666;
}
Current actual setup:
<div class="detailsContainer">
<a href="javascript:unhide(\'BookDetails'.$row->BookID.'\');">
<div class="detailview"><b>Book Details<br></a></div>
<div id="BookDetails'.$row->BookID.'" class="hidden">
<table>
<tr><td>Total Stock </td><td>'.$row->TotalStock.'</td>
<td>Current Stock</td><td>'.$row->CurrentStock.'</td></tr>
<tr><td>Awards </td><td>'.$row->Awards.'</td>
<td>Film</td><td>'.$row->Film.'</td></tr>
</table>
</div>
';?>
<br><center><a href = "javascript:void(0)"
onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<div class= "obutton feature2">Reserve Book</div></a></center>
<div id="light2" class="white_content"></div>
<div id="fade" class="black_overlay"></div>
</div>
Its kind of a lot to post for this, but want to make sure nothing is interfering that you guys might spot. It jumps out of php near the bottom, I'll post the entire article if you think the issue might be else where.
I tried to make a jsfiddle of it, but there is so much php and variables that by time I gutted it, it'd just be 2 normal divs, having lost its uniqueness and the issue will probably have been deleted.
Thanks -Tom
.obutton position needs to be absolute... for bottom to work the way you're intending.
I have installed the JQuery Cycle Plugin on my site and it works fine but for the first image which appears floating off to the right when the page loads. This just happens to the first image - all others are ok.
I am not sure why this is occurring as all my code is very simple:
$(function() {
$('#banner').cycle('fade');
});
<div id="banner">
<img src="images/banner01.jpg" />
<img src="images/banner02.jpg" />
<img src="images/banner03.jpg" />
<img src="images/banner04.jpg" />
<img src="images/banner05.jpg" />
</div>
#banner
{
width: 750px;
text-align: center;
height: 370px;
margin: auto;
margin-top: 20px;
}
#banner IMG
{
width: 750px;
height: 320px;
}
I am not sure what I have done wrong or what I can do to fix it. Would anyone know?
The site is here if you want to look: http://austin7.org.au/
EDIT: I have tried moving the JQuery script to the bottom of the page too, to no affect. Also, I have tried using different images - they all have the same result.
Set the left to 0.
#banner img{
left: 0;
}