I have found this code online which can create a slideshow perfectly fine
https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/
Can somebody tell me how to adjust the code so it can work for multiple slideshows?
I have tried many attempts and failed and was hoping someone can work it out.
Thanks
Daniel
Use class instead of id, then loop through the slideshow, ie like this:
$.each($(".slideshow > div:not(:first-child)"), function() {
$(this).hide();
});
setInterval(function() {
$.each($(".slideshow"), function() {
$(this).children().first()
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo(this);
});
}, 3000);
.slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow">
<div>
<img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
</div>
<div>
<img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
</div>
<div>
Pretty cool eh? This slide is proof the content can be anything.
</div>
</div>
<div class="slideshow">
<div>
<img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
</div>
<div>
<img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
</div>
<div>
Pretty cool eh? This slide is proof the content can be anything.
</div>
</div>
<div class="slideshow">
<div>
<img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
</div>
<div>
<img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
</div>
<div>
Pretty cool eh? This slide is proof the content can be anything.
</div>
</div>
Related
I'm currently trying to code a website for the first time, and have run into the problem that when I'm trying to caption an image in a gallery and add a pop up info slide that it isn't centered under the image, but instead it is to the right of the image. The image should always have a caption, and when you scroll over the image a text box should go up, so that a description could be read. I'm not very sure how to fix the problem since I thought I had already centered the text. If anyone can help me I'll be very grateful.
<div class="row1">
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<figcaption> John Smith</figcaption>
<div class="text">
<p>This is a cat</p>
<span class="arrow-link">ARROW IMG HERE</span>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
</div>
https://jsfiddle.net/b0gdpmjw/
image with caption
image with caption and pop up description
Position: Absolute; and flexbox structure, will do what you want.
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_positioning.asp
the solution is to specify the position from left for .text.
(tipp: i think it is a good idea to start with bootstrap. with bootstrap you can build up the basic framework of a website relatively easy, so that it also works on the smartphone. afterwards you can customize everything yourself as you like. to build up the basic framework of a website yourself and make it responsive for different devices is very difficult as a beginner. so you run from one big problem into the next. latest when you start with media-queries, you can hardly keep track of it all.)
figcaption {
color: white;
font-style: oblique;
position: relative;
text-align: center;
}
* {
box-sizing: border-box;
}
.column1 {
position: relative;
width: 200px;
height: 300px;
overflow: hidden;
}
p {
color: black; /* changed to black, so you can see the text */
font: 25px Sulphur Point, sans-serif;
}
.text {
position: absolute;
bottom: 0;
/* right: 0;*/
left: 0; /* here */
width: 200px;
height: 0;
text-align: center;
transition: height 0.7s ease-out;
}
.column1:hover>.text {
height: 150px;
}
.column1 {
float: left;
width: 33.33%;
padding: 5px;
margin-bottom: 50px;
}
/* Clearfix (clear floats) */
.row1::after {
content: "";
clear: both;
display: table;
margin-bottom: 50px;
}
<div class="row1">
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<figcaption> John Smith</figcaption>
<div class="text">
<p>This is a cat</p>
<span class="arrow-link">ARROW IMG HERE</span>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
<div class="column1">
<img src="img/hi_bild.jpg" height="200px" width="200px">
<div class="text">
<p>This is a cat</p>
</div>
</div>
</div>
NB
My Header:
<header>
<div style="float:left;margin-left:20px;">
<div style="float:left; margin-left:10px;margin-top:55px;background-color:#2BC3A7; height:3px; width:200px;"> </div>
<div style="clear:both;float:left;"></div>
<div style="float:left; margin-left:10px;margin-top:5px;font-family:DIN; font-size:12pt;color:#2BC3A7;">Services/Products</div>
</div>
</div>
</header>
I have 2 divs:
<div id="#content1">
<div id="divWelcome" style="margin-top:50px;">
<div id="headerimg" style="position: relative;">
<div style="position: absolute; bottom:255px; left: 20px; width: 550px; font-family:DIN; font-size:23pt; font-weight:600; color: white; letter-spacing:0.01em;">
We offer Cloud solutions for small businesses to help them manage their workflow requirements
</div>
<hr style="height:6px;position: absolute; bottom:210px; left: 20px; width: 490px;"/>
<div style="position: absolute; bottom:175px; left: 20px; width: 550px; font-family:DIN; font-size:14pt; font-weight:500; color: white; letter-spacing:0.01em;">
Our core sectors of expertise are professional services, data management and outsourcing.
</div>
</div>
<div id="divAboutContents" style="margin-top:50px; background-color:red;position: relative;display: none;">
</div>
</div>
</div>
So when the page loads the 1st div shows. The effect I want is when the user presses a button the divFirst gently fades away and the divSecond gently fades in. I have used this bit of jQuery but the affect does not look very pleasing.
<script type="text/javascript">
$(document).ready(function () {
$("#divAbout").click(function () {
$("#headerimg").fadeOut();
$("#divAboutContents").fadeIn();
});
});
</script>
What else can I try/read up on? Thanks
NB
This is part of my CSS
#content1 {
clear: both;
position: absolute;
}
Also I was fading the other one out. just forgot to put it in the question. The affect I get is 'clunky'
'Pleasing' is a very subjective term, however to improve it you could place both div elements within a parent container positioned absolutely so they overlap. You can then fadeToggle() between the two as needed. Something like this:
$('#container').click(function() {
$(this).find('div').fadeToggle();
})
#container > div {
position: absolute;
}
#divSecond {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="divFirst">some content with images</div>
<div id="divSecond">different content with images</div>
</div>
Click the text to see the fade transition in action.
I have created a Fadein/Fadeout slider. Left button and right button are working fine but I want to play slider by clicking on tab buttons.
JSfiddle
HTML
<p id="slide1_controls">
<div class="block-icon icon-s1">
<img class="block-img icon-s1" src="../_images/building_icon1.png" data-hover-image="../_images/building_icon1_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s2">
<img class="block-img icon-s2" src="../_images/building_icon2.png" data-hover-image="../_images/building_icon2_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s3">
<img class="block-img icon-s3" src="../_images/building_icon3.png" data-hover-image="../_images/building_icon3_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s4">
<img class="block-img icon-s4" src="../_images/building_icon4.png" data-hover-image="../_images/building_icon4_hover.png" data-selected="false" />
</div>
</p>
<div class="slider-text-context" id="target">
<div class="slide-01 fade-texts active">tab1</div>
<div class="slide-02 fade-texts">tab2</div>
<div class="slide-03 fade-texts">tab3</div>
<div class="slide-04 fade-texts">tab4</div>
</div>
CSS
.fade-texts {
width: 100%;
height: 259px;
left: 0px;
position: absolute;
}
.slider-btn-area {
position: absolute;
z-index: 8;
margin-left: auto;
margin-right: auto;
left: 25%;
top: 54%;
width: 50%;
}
#target > div {
display:none;
}
#target div:nth-child(1) {
display:block;
}
.tab-area {
position: absolute;
left: 25%;
top: 30%;
}
Javascript
$(".icon-s2").click(function() {
activeElem = $("#target .slide-02");
activeElem.removeClass('active').fadeOut(0);
if (!activeElem.is(':first-child')) {
activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
}
}
$(".icon-s3").click(function() {
activeElem = $("#target .slide-03");
activeElem.removeClass('active').fadeOut(0);
if (!activeElem.is(':first-child')) {
activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
}
}
When I press the tab it does not work to try to appear a DIV.
Your code made no sense. The way it looked was that the images had to be clicked in order to fadeIn/Out the tabs. I believe it should be the other way. I cleaned up the markup, and simplified the classes, ids, styles, etc...
Here's the DEMO
HTML
<div id="slides">
<div id="slide1" class="slide active">
<img class="img" src="http://placehold.it/150x50/000/Fff.png&text=FIRST" />
</div>
<div id="slide2" class="slide">
<img class="img" src="http://placehold.it/150X50/048/Fee.png&text=SECOND" />
</div>
<div id="slide3" class="slide">
<img class="img" src="http://placehold.it/150X50/fa8/375.png&text=THIRD" />
</div>
<div id="slide4" class="slide">
<img class="img" src="http://placehold.it/150X50/9a7/a10.png&text=FOURTH" />
</div>
</div>
<div class="tab-area" id="controls">
<div id="tab1" class="tab">1</div>
<div id="tab2" class="tab">2</div>
<div id="tab3" class="tab">3</div>
<div id="tab4" class="tab">4</div>
</div>
CSS
.slide {
display:none;
}
.active {
display: block;
}
.tab {
width: 16px;
height: 16px;
display: inline-block;
margin: 0 10px;
outline: 1px solid black;
text-align: center;
cursor: pointer;
}
jQuery/JavaScript
$(function () {
$('.tab').on('click', function (event) {
var tabID = event.target.id;
//console.log('tabID: '+tabID);
var order = tabID.split('b').pop();
//console.log('order: '+order);
var pos = parseInt(order, 10);
var slideID = 'slide'+pos;
//console.log('slideID: '+slideID);
var act = document.getElementById(slideID);
//console.log('act: '+act.id);
$('.slide').fadeOut(0).removeClass('active');
$(act).addClass('active').fadeIn(750);
});
});
I am using a responsive bootstrap design on my website and I want to add a section for the current image to automatically rotate. At full screen size, I have the image on the left and text on the right. This all looks fine until bootstrap adjusts the size. The position is absolute and the text element is right on top of the images. When I change the position to relative, it looks fine except the other images display beneath it while it is fading. How can I essentially make the other images load at the same place?
Javascript
<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(2000)
.next()
.fadeIn(2000)
.end()
.appendTo('#slideshow');
}, 6000);
</script>
CSS
#slideshow > div {
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
HTML
<div id="home-about">
<div class="container">
<div class="row">
<div id="slideshow" class="col-md-6">
<div>
<img src="img/events/sched1.jpg" class="img-responsive img-shadow">
</div>
<div>
<img src="img/events/sched2.jpg" class="img-responsive img-shadow">
</div>
<div>
<img src="img/events/sched3.jpg" class="img-responsive img-shadow">
</div>
</div>
<div class="col-md-6">
<div class="about-text">
<div class="section-title">
<h4>test</h4>
<h2>hello</h2>
<br>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Tries to set a a height to slideshow
#slideshow {
height: 300px;
}
#slideshow > div {
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
position: absolute;
}
I have tried many things to center this slider. This includes align="center" style="margin: 0 auto;" style="margin-right: 0 auto; margin-left: 0 auto;". All of these I have tried on the images and slider div too. I am not sure what what the problem is and any help would be very much appreciated. This is my first time posting so sorry if this is not the correct format. Below is the code I am having trouble with
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
#slideshow {
margin: 0px auto;
position: relative;
max-width: 1200px;
height: 720px;
<!-- padding: 10px;
--> box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.ppt img {
margin-left: -50%;
}
.ppt li {
left: 50%;
}
#slideshow > div {
position: absolute;
}
.clear {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
<div id="slideshow">
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
</div>
</div>
Your slideshow is centered. It's the images themselves that aren't centered. You can see evidence of this in this jsfiddle. Centering the images would have more to do with your absolute positioning. You can use left: 50%; transform: translate(-50%, 0); to center the images if that is the goal.
Firstly, bunch of bad practices:
Too many inline
Don't need divs inside the slider. Try a list. Better
code management.
Now to the problem. You can simply use
margin: auto;
for the #slideshow to horizontally centre it.