I've downloaded and implemented the Nivo Slider on my website. Since implementing it, I've found a few bugs, but I'm looking for help with getting my caption centered on the screen.
Margin:auto usually works for this to ensure a div is always centered (I think..) - but I can't get it to work with my site..
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Max Klimmek - Portfolio, Clothing, Travel</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<script src="script/jquery.nivo.slider.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="script/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider()
});
</script>
</head>
<body>
<header id="site-header">
<div class="row">
<nav class="nav">
<ul>
<li><i class="fa fa-shield"></i></li>
<li>Home</li>
<li>Portfolio</li>
<li>Clothing</li>
<li>Gallery</li>
<li>Resume</li>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
<div id="slider" class="nivoSlider">
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
</div>
<div id="htmlcaption1" style="display:none">
<div class="nivo-caption1" >Simple. <br> Clean.</div>
</div>
</div>
</body>
</html>
My CSS for the caption:
.nivo-caption1 {
position: absolute;
margin:auto;
top: 5%;
overflow:hidden;
background:none;
font-family: 'Gotham';
color:#FFF;
font-weight:bold;
font-size:50px;
line-height:44px;
text-align:center;
text-transform:uppercase; /* converts text to UPPERCASE */
}
If I remove the Margin-Top the caption doesn't even appear.. I've added margin:auto to all the other divs that contain this caption/slider.
Anyone got any ideas of how I could ensure the nivo-caption is always centered even when I resize the browser window?
Attached is a photo of how it looks now..
Any help would be great!
Thanks,
Maxenter image description here
The reason margin:auto isn't working for this particular case is two-fold.
You need to have a width set.
The caption is being positioned absolutely and this will override it. Even if you do set a width, it won't matter in this case.
It's ok to position it absolutely for the slider. I don't think it would work out too well if you didn't. All that needs to be done here is to set the left attribute on the caption so that it pushes the caption over to the center of the screen.
In order to do this you would need to calculate the difference between the width of the slider and the width of the caption and divide the result in half. This will give you the correct amount. It looks like the slider spans the full width of the page, so we would need to calculate this difference dynamically because when the window size changes, so does the width of the slider. We'll need a little help from javascript to accomplish this.
Something like this might help:
function centerCaption(){
var caption = $('.nivo-caption');
caption.css('left', ($('#slider').width() - caption.width()) / 2);
}
Here is a slimmed down working example:
https://jsfiddle.net/sm1215/ma645ao8/2/
When you fix your class name, I believe that if you set a width to your div and then use margin-left:auto and margin-right:auto, the element should center.
.nivo-caption {
width:300px;
margin-left:auto;
margin-right:auto;
}
This assumes you don't have other elements that force that element to not be able to move.
So I found a solution to my problem. I'm not sure if it's the correct way things should be coded, but it works.. If anyone can see how my code might cause issues in the future, please let me know.
I added some bits of code to the css and it solved everything.
My HTML is exactly the same as above:
<!DOCTYPE html>
<html>
<head>
<title>Max Klimmek - Portfolio, Clothing, Travel</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<script src="script/jquery.nivo.slider.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="script/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider()
});
</script>
</head>
<body>
<header id="site-header">
<div class="row">
<nav class="nav">
<ul>
<li><i class="fa fa-shield"></i></li>
<li>Home</li>
<li>Portfolio</li>
<li>Clothing</li>
<li>Gallery</li>
<li>Resume</li>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
<div id="slider" class="nivoSlider">
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
</div>
<div id="htmlcaption1" style="display:none">
<div class="nivo-caption1" >Simple. <br> Clean.</div>
</div>
</div>
</body>
</html>
The New CSS for the NivoCaption container:
/* Caption styles */
.nivo-caption {
position: absolute;
justify-content: center;
margin-left: -150px;
margin-top: -200px;
width: 100%;
font-family: 'Gotham', sans-serif;
color:#FFF;
font-weight:bold;
font-size:45px;
line-height:44px;
text-align:center;
text-transform:uppercase; /* converts text to UPPERCASE */
}
.nivo-caption1 {
position: absolute;
margin: auto;
margin-top:5px;
}
The pieces I added to ensure center alignment were:
justify-content: center;
margin-left: -85px;
margin-top: -200px;
width: 100%;
Now I just have to figure out solutions to the other bugs with this slider:
pauseTime not being applied to all slides.
Delay on caption load.
Cheers for your helps guys!
Max
Related
I want to create a gallery of multiple images, from a single "preview". I'll explain better. Let's say I have 3 different images which are 3 different products. By clicking on each of these, I would like to open a gallery (different for each preview) of x images for each single product.
I tried to create it using LIGHTBOX by Lokesh Dhakar, but I can only have one image for each single preview and the gallery is only one.
I have tried several attempts, but I can't get any better
Here is my code, hope someone has some ideas
<html>
<head>
<title>IMAGE GALLERY</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
<script type="text/javascript" src="js/lightbox-plus-jquery.min.js">
</script>
</head>
<body>
<h1> Image Gallery Design</h1>
<div class="gallery">
<img src="PREVIEW1.png">
<img src="PREVIEW2.png">
<img src="PREVIEW3.png">
</div>
</body>
</html>
body{
font-family: sans-serif;
}
h1{
text-align: ceter;
color: forestgreen;
margin: 30px 0 50px;
}
.gallery img{
filter: grayscale(100%);
transition: 1s;
}
.gallery img:hover{
filter: grayscale(0);
transform: scale(1.1);
}
Hide the other <a> elements of the same set using a CSS Utility class like u-none that does display: none;
Use <img> only for the first set thumbnail
lightbox.option({
resizeDuration: 200,
wrapAround: true
});
.u-none {display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css" rel="stylesheet" type="text/css" />
<a href="https://placehold.it/500x500/f0b&text=A1" data-lightbox="set_1">
<img src="https://placehold.it/100x100/f0b&text=A1">
</a>
<a href="https://placehold.it/500x500/f0b&text=B1" data-lightbox="set_2">
<img src="https://placehold.it/100x100/0bf&text=B1">
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
or wrap all the hidden set images inside a common parent <div> with that u-none class .
So this could be a possibly very simple problem but I'm having a mind block at the moment. I'm trying to integrate this code with my website, but due to the image being a background layer I can't have it appear above other elements on the page.
So is there a way to code the background-image within the HTML instead of CSS so it can be given a z-index property so it stacks on-top of other elements?
The code is as follows below in it's simplest form
(Left out something, should work now).
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="home%20css.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/jvojroo/DIamwjvp3/jquery.caroufredsel-6.2.0-packed.js" type="text/javascript"></script>
<script src="https://raw.github.com/jasonenglish/jquery-flex/master/jquery.flex.js"></script>
<script type="text/javascript">
$(function() {
$(".button0").flex();
});
</script>
<style type="text/css">
.button0 {
position:relative;
width:850px;
min-height:300px;
}
.button0 a {
width:100px;
height:100px;
position:absolute;
background-repeat:no-repeat;
background-position:center;
}
[bb=a] {background-image: url(http://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg);
position: absolute;
z-index: 100;
}
/* [bg=b] {background-image:url(http://farm9.staticflickr.com/8156/7362866426_bf285ebd45.jpg);background-size:300px auto;}
[bg=c] {background-image:url(http://farm6.staticflickr.com/5117/7410370290_0935419fc3.jpg);}
[bg=d] {background-image:url(http://farm8.staticflickr.com/7262/7419245080_bb752ed1d6.jpg);}
[bg=e] {background-image:url(http://farm8.staticflickr.com/7003/6468321069_3375be3073_z.jpg);background-size:auto 280px;}
[bg=f] {background-image:url(http://farm8.staticflickr.com/7220/7342556872_46cddaf9b0.jpg);background-size:auto 280px;}
[bg=g] {background-image:url(http://farm9.staticflickr.com/8021/7322604950_348c535903.jpg);background-size:auto 200px;}
[bg=h] {background-image:url(http://farm8.staticflickr.com/7076/7286717012_6e6b450243.jpg);}
[bg=i] {background-image:url(http://farm8.staticflickr.com/7129/7452167788_a3f6aa3104.jpg);background-size:auto 200px;}
[bg=j] {background-image:url(http://farm8.staticflickr.com/7153/6480022425_a8d419e663_z.jpg);background-size:auto 280px;}
[bg=k] {background-image:url(http://farm8.staticflickr.com/7225/7269592732_c4b7918626.jpg);background-size:auto 280px;} */
</style>
<body>
<div class="button0">
<a bb="a" style="left:0px;top:0px;width:10%;height:140px;" width="145%" height="140"></a>
<!--<a bg="b" style="left:260px;height:100px;top:0px;width:125px;" width="250" height="175">B</a>
<a bg="c" style="left:395px;height:250px;top:0px;width:75px;" width="125" height="350">C</a>
<a bg="d" style="left:480px;height:75px;top:0px;width:75px;" width="175" height="150">D</a>
<a bg="e" style="left:565px;height:125px;top:0px;width:200px;" width="200" height="250">E</a>
<a bg="f" style="left:480px;height:200px;top:85px;width:75px;" width="150" height="225">F</a>
<a bg="g" style="left:0px;height:100px;top:135px;width:75px;" width="305" height="150">G</a>
<a bg="h" style="left:260px;height:75px;top:110px;width:125px;" width="200" height="200">H</a>
<a bg="i" style="left:85px;height:140px;top:135px;width:165px;" width="200" height="140">I</a>
<a bg="j" style="left:565px;height:150px;top:135px;width:75px;" width="125" height="275">J</a>
<a bg="k" style="left:650px;height:75px;top:135px;width:75px;" width="75" height="200">K</a> -->
</div>
</body>
First, set your background using the body background tag:
<body background="http://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg" id=bkgrnd>
Then, use a script to set the z-index:
<script>
function changeStackOrder()
{
document.getElementById("bkgrnd").style.zIndex="1";
}
</script>
I am new to html, I am simply trying to add a caption on top or below each image in the code below; inputs welcome. It seems that an additional option is needed on the line where pictures are included; i have tried alt="my image description", it adds and info link "i" on the page, but I would need to place it above or below the image.
<head>
<title> identity </title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<link href = "../includes/important.css" rel= "stylesheet" type ="text/css" />
<link href="../includes/slide-out-menu-new.css" rel="Stylesheet" type="text/css"/>
<script src="../includes/js/slide-out-menu-new.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.8.min.js"></script>
<script src="../assignments/galleria/themes/classic/galleria.classic.css"></script>
<style>
#galleria{ width: 700px; height: 400px; background: #000 }
</style>
</head>
<body>
<div class= "name">
<center> <img src= "../images/main_menu_me.jpg"><center>
</div>
<STYLE TYPE="text/css">
#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }
A:link {color:white; text-decoration:none}
A:hover {color:yellow; text-decoration:none}
</STYLE>
<div class="body3">
<div id="galleria">
<img src="../images/lafete1.jpg" image title="My image title" alt="My image description">
<img src="../images/lafete2.jpg">
<img src="../images/lafete3.jpg">
</div>
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');
</script>
<div class= "navigation2">
</br>
<p align="right"> about</p>
<p align="right"> contact</p>
</body>
</head>
From galleria's doc's:
Captions & meta data
If you want to extract meta data from the HTML source such as title & description, you can provide this as attributes:
<img src="image.jpg"
data-title="My title"
data-description="My <strong>description</strong>"
data-link="http://my.destination.com"
>
Side-note: In HTML5 one can now (by specification) add custom attributes to elements (in the HTML markup) but they must be prefixed with data-. That is what later versions of galleria now use.
Hope this helps!
I am trying a google.maps iframe to use all height and all width;
tried with CSS
iframe{min-width:100%;height: 100%;min-height: 2000px;overflow:auto;}
even with jquery
$(document).ready(function() {
alert($('#contenido').height()+'altura contendio');
alert($('#contenedor').height()+'altura contenedor');
alert($('iframe').height()+'altura iframe');
$('iframe').css('height',$('#contenido').height()+'px');
alert($('iframe').height()+'altura iframe');
});
or
$(document).ready(function() {
alert($('#contenido').height()+'altura contendio');
alert($('#contenedor').height()+'altura contenedor');
alert($('iframe').height()+'altura iframe');
$('iframe').css('height','200%');
alert($('iframe').height()+'altura iframe');
});
the alerts are like 4254 or so...
just in case #contenido CSS is
#contenido
{
width: 100%;
height:100%;
display:block;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
Any idea? this is driving me crazy... :(
almost forgot, HTML (i will paste it all, just in case)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>lich-t // KONTAKT</title>
<meta name="viewport" content="width=device-width" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" media="all and (max-device-width: 320px)" href="iphone3.css" />
<link rel="stylesheet" media="all and (max-device-width: 640px)" href="iphone4.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/dropDown.js"></script>
</head>
<body class="kontakt_map">
<div id="head" class="section"><img src="img/logo_small.png" alt="lich-t" id="logo_small" /><h3>KONTAKT</a></h3></div>
<div id="contenedor"><div id="contenido">
<iframe frameborder="0" scrolling="no" height="750" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Calle+de+Blanquerna,+Palma,+Espa%C3%B1a&aq=0&sll=39.470059,2.72006&sspn=0.010121,0.022724&vpsrc=6&ie=UTF8&hq=&hnear=Carrer+de+Blanquerna,+Palma,+Illes+Balears,+Spain&ll=39.580489,2.649422&spn=0.023153,0.036478&z=14&iwloc=A&output=embed"></iframe>
<div id="panel" class="floating_right">
<ul class="right floating">
<li><img src="img/location_azul.png" alt="Westlich-t" /></li>
<li><img src="img/location_rosa.png" alt="Sudlich-t" /></a></li>
<li><img src="img/location_naranja.png" alt="Sudlich-t" /></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Please see this article, where author writes:
The html and body tags must be set to height:100%; this allows us to
set a percentage height on our container div later. I have also
removed the margins and padding on the body tag so there are no spaces
around the parameter of the page.
As mentioned above, you must set height of the html and body tags specifically (I know, it is far from obvious):
html, body {
height: 100%;
}
Please tell me if it worked for you.
Iframes are obsolete for page layout. Never use them instead of good CSS layout, even table-based layout is better.
Also, it will be discontinued in future, I highly recommend you to use something else like ajax in Google maps API.
I'm working on a webpage that has a javascript image rotator, but it needs to be able to handle images of different sizes.
The code that I'm using as a base has a DIV outside floating LIs which contain the images, but no matter what I try I can't seem to get the images to all be centered. The only one that's centered is the one that's the full 800px wide.
I have a feeling it's something to do with float, position, or display, but I've been messing around for hours with no luck.
Here's my site:
Here's where I borrowed the image rotator code from:
http://www.serie3.info/s3slider/ (code) http://www.serie3.info/s3slider/demonstration.html (demo)
Thanks for any help you can provide!
This works as well (In Firefox and Safari, haven't tried IE). Save as a .html for an example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="A picture and caption that you can change for everyone in the world to see.">
<meta name="keywords" content="pic and words, pic words, caption">
<title>Pic and Words</title>
<link href="http://picandwords.be-better.net/styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://picandwords.be-better.net/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 4000
});
});
</script>
<style>
body, html
{
margin:0px;
width:100%;
height:100%;
padding:0px;
}
#slider1
{
text-align:center;
vertical-align:middle;
margin:0px;
padding:0px;
width:auto;
height:auto;
}
#slider1Content
{
text-align:center;
display:table; /* this is KEY to centering the UL */
position:static;
margin:0px auto 0px auto;
padding:0px;
width:auto;
top:auto;
}
#pageWrapper
{
width:810px;
height:700px;
margin:0px auto 0px auto;
text-align:center;
}
</style>
</head>
<body>
<div id="pageWrapper">
<h1>Pic and Words</h1>
<!--Upload -->
<br /><br />
<div id="slider1">
<ul id="slider1Content">
<li class="slider1Image">
<div>
<img src="http://picandwords.be-better.net/uploaded_pics/1282179782-2zdr66e.jpg"
alt="Somewhere down Baja on the way to Cabo."
title="Somewhere down Baja on the way to Cabo." align="center" />
<span class="bottom">"Somewhere down Baja on the way to Cabo."</span>
</div>
</li>
<li class="slider1Image">
<div>
<img src="http://picandwords.be-better.net/uploaded_pics/1282180309-bicycle.jpg"
alt="Drunk dude on a bike"
title="Drunk dude on a bike" align="center" />
<span class="bottom">"Drunk dude on a bike"</span>
</div>
</li>
<li class="slider1Image">
<div>
<img src="http://picandwords.be-better.net/uploaded_pics/1282180338-captions03211.jpg"
alt="Do not want!"
title="Do not want!" align="center" />
<span class="bottom">"Do not want!"</span>
</div>
</li>
<div class="clear slider1Image"></div>
</ul>
</div>
</div>
</body>
</html>
Add:
left: 0;
padding: 0;
to the #slider1Content style.
Then delete the float: left; from the .slider1Image style.
Note that the source CSS contains this warning: "important to be same as image width" on several dimensions. Since this CSS isn't sized for each image, you'll have that white margin around each picture.
If you desire to reset those key dimensions dynamically (I think the site looks OK without this), then that is a separate question that has been answered here on SO before.