Boxeo en una presentación de diapositivas en html
I'm trying to create a slideshow for on my website. I have this so far: JSFiddle: http://jsfiddle.net/StyloMonnik/8C8kD/16/ Sitio oficial: http://vanlunenadvies.nl/66-a9b0/chat
I am trying to make it 50% of its size. in like a box where i can locate it between and aside text where i want. The problem is when i decrease evrything to 50 percent the bar on the bottom won't go in half. I'm also trying to keep the bar on the bottom the same height.
If anyone has suggestions please tell them. I'm new with coding do please awnser with code. I'm having a little bit of a struggle with converting text to code. But if there is no other way, Rather text than nothing.
Also if anyone has suggestions to make it slide automatic. please give them, i cant use jquery and i cant place files on the site. Only text and code. (i know it sucks :P )
As they say in The Netherlands, "Bedankt"
aquí está el código:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by StyloMonnik</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/es/css/result-light.css">
<style type='text/css'>
body {
margin: 0;
padding: 0;
height: 100%;
}
.diy-slideshow{
position: relative;
display: block;
overflow: hidden;
}
figure{
position: absolute;
opacity: 0;
transition: 1s opacity;
}
figcaption{
position: absolute;
font-family: sans-serif;
font-size: .8em;
bottom: .75em;
right: .35em;
padding: .25em;
color: #FF0000;
background: rgba(0,0,0, .25);
border-radius: 2px;
}
figcaption a{
color: #FF0000;
}
figure.show{
opacity: 1;
position: static;
transition: 1s opacity;
}
.next, .prev{
color: #fff;
position: absolute;
background: rgba(0,0,0, .6);
top: 50%;
z-index: 1;
font-size: 2em;
margin-top: -.75em;
opacity: .3;
user-select: none;
}
.next:hover, .prev:hover{
cursor: pointer;
opacity: 1;
}
.next{
right: 0;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev{
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
p{
margin: 10px 20px;
color: #fff;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
(function () {
var counter = 0,
$items = document.querySelectorAll('.diy-slideshow figure'),
numItems = $items.length;
var showCurrent = function () {
var itemToShow = Math.abs(counter % numItems);
[].forEach.call($items, function (el) {
el.classList.remove('show');
});
$items[itemToShow].classList.add('show');
};
document.querySelector('.next').addEventListener('click', function () {
counter++;
showCurrent();
}, false);
document.querySelector('.prev').addEventListener('click', function () {
counter--;
showCurrent();
}, false);
})();
}//]]>
</script>
</head>
<body>
<div class="diy-slideshow">
<figure class=Supposed to be a linnk but can only place 2 due to 2 low reputation " width="100%" />
<figcaption>"Molenstraat 28, 5451 BC Mill" by <a href="Supposed to be a linnk but can only place 2 due to 2 low reputation ">Van Lunen Advies</a>.</figcaption>
</figure>
<figure>
<img src="http://Supposed to be a linnk but can only place 2 due to 2 low reputation " width="100%" />
<figcaption>"Etnalaan 9, 5801 KA Venray" by <a href="hSupposed to be a linnk but can only place 2 due to 2 low reputation ">Van Lunen Adviesgroep</a>.</figcaption>
</figure>
<figure>
<img src="Supposed to be a linnk but can only place 2 due to 2 low reputation " width="100%" />
<figcaption>"Beeksenhof 3, 5841 BA Oploo" by <a href="Supposed to be a linnk but can only place 2 due to 2 low reputation ">Van Lunen Adviesgroep</a>.</figcaption>
</figure>
<figure>
<img src="Supposed to be a linnk but can only place 2 due to 2 low reputation g" width="100%" />
<figcaption>"Korenbloemstraat 6, 5447 AE Rijkevoort" by <a href="Supposed to be a linnk but can only place 2 due to 2 low reputation ">Van Lunen Adviesgroep</a>.</figcaption>
</figure>
<figure>
<img src="Supposed to be a linnk but can only place 2 due to 2 low reputation " width="100%" />
<figcaption>"Emmastraat 1, 5451 ZE Mill" by <a href="Supposed to be a linnk but can only place 2 due to 2 low reputation ">Van Lunen Advies</a>.</figcaption>
</figure>
<figure>
<img src="Supposed to be a linnk but can only place 2 due to 2 low reputation width="100%" />
<figcaption>"Van Gelrestraat 35, 6591 HX Gennep" by <a href="Supposed to be a linnk but can only place 2 due to 2 low reputation ">Van Lunen Advies</a>.</figcaption>
</figure> <span class="prev">«</span>
<span class="next">»</span>
</div>
</body>
</html>
preguntado el 28 de mayo de 14 a las 12:05
Stylo Monnik
2 Respuestas
Please replace your css with provided css bellow, I made few changes according you requirement this may gives you what you want. I added width to the diy-slideshow class and made changes into figcaption class for the position of image name at bottom right corner.
body {
margin: 0;
padding: 0;
height: 100%;
}
.diy-slideshow{
position: relative;
display: block;
overflow: hidden;
width: 50%;
}
figure{
position: absolute;
opacity: 0;
transition: 1s opacity;
}
figcaption{
position: absolute;
font-family: sans-serif;
font-size: .8em;
color: #FF0000;
background: rgba(0,0,0, .25);
border-radius: 2px;
bottom: 1.8em;
right: 3.5em;
}
figcaption a{
color: #FF0000;
}
figure.show{
opacity: 1;
position: static;
transition: 1s opacity;
}
.next, .prev{
color: #fff;
position: absolute;
background: rgba(0,0,0, .6);
top: 50%;
z-index: 1;
font-size: 2em;
margin-top: -.75em;
opacity: .3;
user-select: none;
}
.next:hover, .prev:hover{
cursor: pointer;
opacity: 1;
}
.next{
right: 0;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev{
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
p{
margin: 10px 20px;
color: #fff;
}
contestado el 28 de mayo de 14 a las 13:05
explain what you changed please, this isn't learning anybody anything. - Sten Pelzer
Oke, this works perfect. The only problem is that it turns all the text on the page into white. And i have a white background so that is a little bit yeah... you get it. Do you know how i solve this? - Stylo Monnik
Just go and change the text colour property if it is not override colour then used important to the colour property. - Abhroo
You where right. i had to change one #FFF to #000000. THank you - Stylo Monnik
replace your style to
.diy-slideshow{
position: relative;
display: block;
overflow: hidden;
width:50%;
}
contestado el 28 de mayo de 14 a las 13:05
Oke, its almost right. The size is perfect. But when i paste it on my page and i try to slide it to a different position (my webpage comes with a ms word like page editor) it will only move the image and the arrows and lower bar stay at the original place under all the text. I was thinking about a box or something but i cant figure it quite out. - Stylo Monnik
I am updating jsfiddle. Evrything works great now exept all the text on my homepage turns white when i place it there - Stylo Monnik
Actualizar When i go to the page editor there is no text animore so i cant change its color. But when i go to the homepage i can still select the text - Stylo Monnik
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas javascript jquery html css slideshow or haz tu propia pregunta.
50% of height or width - Ezhil
just to make the images 50% smaller each side and the bottom bar as long as the image. while its in like a box so i can controll it better. I can only move the image on the webpage and not the buttons and the bottom bar. - Stylo Monnik
so the bar on the bottom has to float on the bottom of the slider and be width 100% ? or what do you mean? explanation can also be in dutch ;) - Sten Pelzer
Yes, 100% of the lenght of the image and not of the whole page. It is to short now or its the whole length of the page. - Stylo Monnik
width: 100%; in the css style of 'figcaption' actually works, the only problem is the padding-left of the image, if you remove this it's fixed. - Sten Pelzer