I want to make a simple slide show that automatically plays when the page is loaded. Here is my code so far:
HTML:
<div id="slideshow">
<div>
<img src="slide_1.png">
</div>
<div>
<img src="slide_2.png">
</div>
<div>
<img src="slide_3.png">
</div>
</div>
CSS:
#slideshow {
position: relative;
width: 900px;
height: 450px;
}
#slideshow > div {
position: absolute;
}
If possible, can someone please provide me with a JavaScript code that will automatically play the slide show, as well as change the slides by using a slide transition, and also have it replay infinite amount of times while the user is still of the page? Also, maybe a navigation that has numbers in the bottom right corner. Here is an example of what I am looking for: (http://www.http://www.suprafootwear.com/). The large slideshow up top is what I want, the only difference is that I want the transition to be a linear slide motion instead of the fade transition. Please maintain the 900px x 450px size. Any help is appreciated. Thank you in advance!
Try this simple javascript code to make image slider.
(function() {
var imgLen = document.getElementById('imgGallary');
var images = imgLen.getElementsByTagName('img');
var counter = 1;
if (counter <= images.length) {
setInterval(function() {
images[0].src = images[counter].src;
console.log(images[counter].src);
counter++;
if (counter === images.length) {
counter = 1;
}
}, 4000);
}
})();
.container {
position: relative;
width: 100%;
height: 300px;
border-radius: 5px;
border: 1px solid red;
overflow: hidden;
}
<div id="imgGallary" class="container">
<img src="http://www.examiningcalvinism.com/kingdavid.jpg" alt="" width="100%" height="300" />
<img src="http://www.kingjamesbibleonline.org/1611-Bible/1611-King-James-Bible-Introduction.jpg" alt="" width="100%" height="300" />
<img src="http://biblestudyoutlines.org/wp-content/uploads/2012/07/the-triump-of-david-over-king-hadadezer-of-zobah-1024x729.jpg" alt="" width="100%" height="300" />
<img src="http://www.cgu.edu/Images/news/Flame%20Winter12/KJV-BibleBW.jpg" alt="" width="100%" height="300" />
</div>
$("#slideshow > div:gt(0)").hide();
setInterval(function() { $('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow'); }, 3000);
Related
The slideshow on the Homepage is too fast when coming back from another tab. I tried a few other solutions from the site but it did not work in my case. Hope someone can really help. Thanks much.
Here's the Javascript:
Blockquote
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 5000);
Blockquote
HTML Code:
Blockquote
<div id="slideshow">
<div>
<img src="abc.png">
</div>
<div>
<img src="def.png">
</div>
<div>
<img src="ghi.png">
</div>
<div>
<img src="jkl.png">
</div>
</div>
Blockquote
Blockquote
/*Slideshow */
#slideshow > div {
width: 970px;
height: 500px;
display: block;
float: left;
position: absolute;
top: 200px;
right: auto;
background-repeat: no-repeat;
margin-left: 15px;
line-height: 180px;
}
Blockquote
If it's too fast, just increase the time to fadeOut() and fadeIn(). Use $(window).focus() and $(window).blur() to check when a user left the tab and clear the slideshow interval. When the user comes back, set the interval again.
$("#slideshow > div:gt(0)").hide();
var slideshow = setInterval(function() {
beginSlideshow();
}, 5000);
function beginSlideshow(){
$('#slideshow > div:first')
.fadeOut(2000)//time doubled from 1000 to 2000 milliseconds
.next()
.fadeIn(2000)//time doubled from 1000 to 2000 milliseconds
.end()
.appendTo('#slideshow');
}
$(window).focus(function() {
if (slideshow==null){
//Use came back to the tab
slideshow = setInterval(function(){
beginSlideshow();
}, 5000);
}
});
$(window).blur(function() {
//User left tab
clearInterval(slideshow);
slideshow = null;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
<div>
<img src="test9/SitePage_9dArip.png">
</div>
<div>
<img src="test9/SitePage_9dCand.png">
</div>
<div>
<img src="test9/SitePage_9dfinalOK.png">
</div>
<div>
<img src="test9/SitePage_9dPrav.png">
</div>
</div>
JSFiddle：http://jsfiddle.net/1vk3fqr8/3/
guys. Trying to create my own gallery slider. But I have no idea how I can prevent the scrollbars. I know I have overflow: visible on both the wrapper and the images, but if I make it hiddenthen I won't see the images and they will get cropped off. What would be the best option here? Thanks.
<div id="wrapper" class="slider">
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-barcelona"></img>
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-apple-elephant"></img>
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-animal-protect"></img>
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-barcelona"></img>
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-barcelona"></img>
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-barcelona"></img>
</div>
#wrapper {
text-align: left;
display: inline-block;
/*background-color: */;
white-space: nowrap;
position: relative;
left: -1150px;
overflow: visible;
}
#wrapper img {
margin-left: 20px;
white-space: nowrap;
overflow: visible;
}
var currentSlide = 2;
var slider = $(".slide");
setInterval(function() {
$(".slider").animate({position: "relative", left: "+=400px"}, 2000, function () {
currentSlide++;
/*$("#wrapper").css("overflow", "hidden");*/
if (currentSlide === (slider.length - 1)) {
currentSlide = 1;
$(".slider").css("left", "-1150px");
}
});
}, 5000);
My codepen: http://codepen.io/Limpuls/pen/pRbZKe
Simplest solution (and actually often (always?) used when you have this type of slider) is to add one more div as container, set 100% (desired) width, and add overflow hidden to it:
#container {
width:100%; //if 100%, you can even remove this line, 100% is default width
overflow:hidden;
}
Demo: http://codepen.io/anon/pen/YNWjOM
Your wrapper is pushed left too far, and can be even more, depending on number of images, and you have to hide overflow somehow.
I would like to develop a scrolling function (on images) like on this site bethellery.com. At the moment, my code is kind of working, but I have a major problem: the size of the scrolling bar is nearly as big as my div size, so I can't scroll that much.
Here is the html:
<div id="container">
<div class="img-inner" id="img-1" style="display: block" >
<img class="img" src="src-1" alt="alt-1" />
</div>
<div class="img-inner" id="img-2" style="display: none" >
<img class="img" src="src-2" alt="alt-2" />
</div>
<div class="img-inner" id="img-3" style="display: none" >
<img class="img" src="src-3" alt="alt-3" />
</div>
<div class="img-inner" id="img-4" style="display: none" >
<img class="img" src="src-4" alt="alt-4" />
</div>
</div>
Here is the css:
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
#container {
height: 100%;
width: 50%;
overflow-y: auto;
}
.img-inner{
height: 100%;
width: 100%;
}
.img {
height: 100%;
width: 100%;
}
Here is the js:
var lastScrollTop = 0;
var x = 1;
$('#container').scroll(function(event){
var st = $(this).scrollTop();
if(st > lastScrollTop){
//downscroll code
document.getElementById('img-'+x).style.display = "none";
//if next image isn't the last image
if((x+1) !== 4){
x=x+1;
}
document.getElementById('img-'+x).style.display = "block";
}
else{
document.getElementById('img-'+x).style.display = "none";
if((x-1) !== 0){
x=x-1;
}
document.getElementById('img-'+x).style.display = "block";
}
lastScrollTop = st;
});
I don't really know what is happening but I think due to the fact the display styles of the div are none, the scroll doesn't detect the flow under the first image.
On the site above, scroll bar size is clearly adapting itself to the numbers of images the div contains.
Thank you very much and have a great day.
The problem here is that display: none; turns off the display of an element, so it has no effect on layout (MDN's words), meaning any calculations that involve it simply won't.
This is demonstrated by the following JSFiddle (your code) - now two images are set to display: block; and the scroll bar shows this.
Try using visibility: hidden; instead, as demonstrated here. Visibility leaves an elements space occupied while not showing it. It's effect is like opacity.
I am looking to take a set of screenshots and make them into a walk through tutorial.
The end product I am aiming for is a slide show where on each screen shot the image makes it clear where on the screen shot to advance to the next shot. When the user clicks that area the show will advance.
I found this jsfiddle from another post on slide shows:
http://jsfiddle.net/rCd26/2/
var interval = undefined;
$(document).ready(function () {
interval = setInterval(getNext, 2000); // milliseconds
$('#next').on('click', getNext);
$('#prev').on('click', getPrev);
});
function getNext() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
transition($curr, $next);
}
function getPrev() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
transition($curr, $next);
}
function transition($curr, $next) {
clearInterval(interval);
$next.css('z-index', 2).fadeIn('slow', function () {
$curr.hide().css('z-index', 0);
$next.css('z-index', 1);
});
}
.slideshow {
position: relative;
/* necessary to absolutely position the images inside */
width: 500px;
/* same as the images inside */
height: 100px;
}
.slideshow img {
position: absolute;
display: none;
}
.slideshow img:first-child {
display: block;
/* overrides the previous style */
}
<div class="slideshow">
<img src="http://placehold.it/500x100/0000CD&text=1" width="500" height="100" alt="first image">
<img src="http://placehold.it/500x100/008000&text=2" width="500" height="100" alt="second image">
<img src="http://placehold.it/500x100/B22222&text=3" width="500" height="100" alt="third image">
<img src="http://placehold.it/500x100/F4A460&text=4" width="500" height="100" alt="fourth image">
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>
I think there are 3 things I need to do to make it work for me:
Be able to position the next button within the image.
Be able to change the size of the next button (creating different size hotspots).
Be able to change the location of the hotspot by image.
Thanks for your input!
You have a .slideview element which is relatively positioned in the document, so images can be absolutely positioned inside of it. We'll be using the same technique for positioning your buttons. Let's create a new "global" container:
<div class="global_container">
<div class="slideshow">
<img src="http://placehold.it/500x100/0000CD&text=1" width="500" height="100" alt="first image">
<img src="http://placehold.it/500x100/008000&text=2" width="500" height="100" alt="second image">
<img src="http://placehold.it/500x100/B22222&text=3" width="500" height="100" alt="third image">
<img src="http://placehold.it/500x100/F4A460&text=4" width="500" height="100" alt="fourth image">
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
Now in your CSS add this class:
.global_container { /* selector for a class called global_container */
position: relative;
width: 500px; /* same width as your slider, probably use a couple pixels more */
height: 100px; /* whatever height you want, usually more than your slider height or equal */
}
Now, as your global container has position: relative;, you can position elements inside (adding a position: absolute; to their CSSes). So add to your CSS:
#prev { /* selector for the element with id="prev" */
position: absolute;
top: 45px; /* button will be positioned 45px from the top of the global container */
left: 10px; /* and 10px from the left of the global container */
}
#next {
position: absolute;
top: 45px; /* same as before */
right: 10px; /* same as before, but from the right of the global container */
/* you could even set the size of the buttons */
width: 40px;
height: 10px;
}
Hope this helps.
I've made a simple image slider that fades-in an image, fades it out and than another one fades-in, an infinite loop. But, this doesn't work right away. It only works after it made a full circle. Which means: all the 6 images have been seen. Then the loop starts again at image one and the fade-in effect works. Why?
This is the HTML:
<body onload="Slider();">
<div id="container">
<div id="slider">
<img id="img1" src="photos/everything/slide1.jpg" border="0"/>
<img id="img2" src="photos/everything/slide2.jpg" border="0"/>
<img id="img3" src="photos/everything/slide3.jpg" border="0"/>
<img id="img4" src="photos/everything/slide4.jpg" border="0"/>
<img id="img5" src="photos/everything/slide5.jpg" border="0"/>
<img id="img6" src="photos/everything/slide6.jpg" border="0"/>
</div>
</div>
</body>
And this is the javascript:
function Slider() {
$("#slider #img1").show("fade", 500);
$("#slider #img1").delay(5500).hide("fade", 500);
var sc=$("#slider img").size();
var count=2;
setInterval(function(){
$("#slider #img"+count).show("fade",500);
$("#slider #img"+count).delay(5500).hide("fade", 500);
if(count==sc){
count=1;
}else{
count = count + 1;
}
},6500);
}
And the CSS used for this page:
#slider{
height: 600px;
overflow: hidden;
margin: 0 auto;
padding-top: 10px;
}
#slider img{
height: 100%;
max-width: none;
display: block;
border-radius: 10px;
margin: 0 auto;
}
The fading effect is not working at first because all of your images are visible, and then you fade them out.
To avoid that, use display:none; in your css.
Then you can create a function nextSlide() that will call itself every XX milliseconds.
For example:
var sc=$("#slider img").size();
// Set count to 0 so that it goes to 1 on first call
var count=0;
// Call it for the first time
nextSlide();
function nextSlide(){
// Go forward or back to the beginning?
count=count==sc?1:++count;
// FadeIn, wait, fadeOut
$("#slider #img"+count).fadeIn(500).delay(1500).fadeOut(500);
// Do the same thing in 2500 milliseconds
setTimeout(nextSlide,2500);
}
JS Fiddle Demo