I made my slider but it's acting wierd when it reach the last slide and have to start again on the first. Until getting to the last slide it slides upwards, but when it has to go to the first it does it downwards. And it kind a misses the first one. I mean - it shows it (even downwards), but on my pagination dots it doestn't add class .selected to the first one. After that it acts normally again until the next cycle.
Why is that two things happening. I've tried to change the if(active_slide.index() == last_slide.index()) with if(active_slide.next().length == 0) /and < /; if(active_slide.is(last_slide)) ... it didn;t help.
Here is jsfiddle http://jsbin.com/iwiroq/4/edit.
Building on #yabol's answer, I've built a minimal example with a rolling image list
HTML:
<div class="image-slider">
<ul>
<li><img src="http://lorempixel.com/400/200/sports" alt="" /></li>
<li><img src="http://lorempixel.com/400/200/food" alt="" /></li>
<li><img src="http://lorempixel.com/400/200/city" alt="" /></li>
<li><img src="http://lorempixel.com/400/200/nature" alt="" /></li>
</ul>
</div>
JS:
var image_list = $('.image-slider li');
image_list.hide();
var first_child = '.image-slider li:first-child';
var last_slide = $('.image-slider li:last-child');
var last_index = last_slide.index();
var active_slide = $(first_child);
active_slide.show();
setInterval(next, 5000);
function next(){
active_slide.slideUp();
if (active_slide.index() >= last_index)
$(first_child).insertAfter(active_slide);
active_slide = active_slide.next();
active_slide.slideDown();
}
JSFiddle or Tinker for playing.
The reason it slides downwards instead of upwards is because first element of the list is higher in dom tree than the last one. You can work it around by adding first element also as the last one, and the last one element gets loaded you swap it with first.
Related
I know very little about JavaScript at all, but I'm looking for a solution to a simple code that I'd like to use. I'm not trying to execute any slides or fades, just a simple slideshow that switches from one image to the next. I want the slideshow to play through just once, and then stop on the last image in the sequence. Any help would be greatly appreciated!
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.next()
.end()
.appendTo('#slideshow');
}, 3000);
As I said, it's a very simple code. The first GIF runs only once, the second GIF loops. I would like the slideshow to stop on the looping GIF. I'm wondering if the '3000' (which I know corresponds to the length of each slide) can be changed to accomplish what I'm looking for. Or else adding a stop function... which I don't know how to write.
<div id="slideshow">
<div>
<img src="https://31.media.tumblr.com/e2c4bbaeb781a3b834cd09549595393f/
tumblr_noy3q3l1dy1uwyyx9o2_1280.gif">
</div>
<div>
<img src="https://33.media.tumblr.com/1d6495399687801067d62c83c4218644/
tumblr_noy3q3l1dy1uwyyx9o1_1280.gif">
</div>
</div>
Ok I have made this with the objective of being as clear and simple for you to understand as possible, (since you new to js...)
JS/Jquery:
$(function () {
setTimeout(playSlideShow, 3000);
function playSlideShow() {
var currImgContainer = $('.showImg');
if (!$(currImgContainer).hasClass('lastImg')) {
$('.showImg').removeClass('showImg').next().addClass('showImg');
setTimeout(playSlideShow, 3000);
}
}
});
So here we find the imgContainer(div) with the class "showImg", then using chaining, we remove the class and add it to the next imgContainer(div). Therefore toggling the CSS to show/hide the image until it finds the div that has the class "lastImg".
CSS:
.slideShow > div:not(.showImg) {
display: none;
}
.showImg {
display: block;
width: 400px;
height: 400px;
}
HTML:
<div class="slideShow" id="slideshow">
<div class="showImg">
<img src="Images/img1.png" alt="" />
</div>
<div>
<img src="Images/img2.png" alt="" />
</div>
<div>
<img src="Images/img3.png" alt="" />
</div>
<div class="lastImg">
<img src="Images/img4.png" alt="" />
</div>
</div>
This way you can have as many images as you want, just make sure the last div has class "lastImg" and the first one has the class "showImg".
Here is a fiddle
Hope it helps...
Try this:
var intervalID = null;
var iterator = 0;
var intervalDuration = 3000;
var slideshow = $('#slideshow');
var divs = slideshow.find('div');
//divs.filter(':gt(0)').hide();
divs.eq(iterator).show();
intervalID = setInterval(function(){
divs.eq(iterator).hide();
iterator += 1;
if (iterator === divs.length - 1) { clearInterval(intervalID); }
divs.eq(iterator).show();
}, intervalDuration);
#slideshow > div { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" />
</div>
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/PIXI.jpg" />
</div>
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" />
</div>
</div>
The HTML structure is same as yours but the only thing that I have changed are the image sources (tumbler images weren't loading for me). But JavaScript has been changed completely.
Add as many DIVs as you like in your HTML to test it out. Hope it helps.
Update #1:
Added CSS to hide the divs by default.
Increased the intervalDuration to 3000. Just to make sure there is ample time for the images to be loaded.
Commented the filter line of JS.
Added another JS line right below the previous filter line.
This update should also load your GIF only when it is needed to appear, hence will not be running in the background.
Let me if this works.
I have 4 thumbnails to the left, and when I click on one of them I waht to show a large picture to the right on the screen.
My problem is, that for some reason it shows 8 small thumbnails (first 4 and then 4 again). The first four ones are not clickable. The last four ones are clickable and correctly shows the larger image.
So, where does the first four thumbnails come from, and how do I get rid of them?
I have a transparant image (Picture.gif) that is the larger picture that is changed and shows the bigger versions of the thumbnails.
My html:
<body onLoad="init()">
<table class="planes">
<tr>
<td>
<ul>
<div id="thumb">
<li><img src="img/Plane1.jpg" alt="Plane1"></li>
<li><img src="img/Plane2.jpg" alt="Plane2"></li>
<li><img src="img/Plane3.jpg" alt="Plane3"></li>
<li><img src="img/Plane4.jpg" alt="Plane4"></li>
</div>
</ul>
</td>
<td>
<img class="pic" id="main" src="img/Picture.gif" alt="">
</td>
</tr>
</table>
My javascript:
var images= new Array('img/Plane1.jpg', 'img/Plane2.jpg', 'img/Plane3.jpg', 'img/Plane4.jpg');
var imgList = new Array();
function init()
{
for (var i=0; i<images.length; i++)
{
imgList[i] = new Image();
imgList[i].src = images[i];
document.getElementById('thumb').appendChild(imgList[i]);
imgList[i].addEventListener("click", swap, false)
}
}
function swap(evtObj)
{
var imgfile = evtObj.target.getAttribute('src');
var mainTag = document.getElementById('main');
mainTag.src = imgfile;
}
In this line:
document.getElementById('thumb').appendChild(imgList[i]);
You are appending the image to the 'thumb' list again. But these are the ones you want to keep, as they have the eventListener attached to them.
You need to remove the tags from your html code to achieve the desired result.
<li><img src="img/Plane1.jpg" alt="Plane1"></li>
<li><img src="img/Plane2.jpg" alt="Plane2"></li>
<li><img src="img/Plane3.jpg" alt="Plane3"></li>
<li><img src="img/Plane4.jpg" alt="Plane4"></li>
The first 4 images are the ones you have in your static html code. The next 4 are the dynamic generated from javascrip. Just remove the images inside thumb from your html code.
The images are both in your html, and also created in javascript.
The line document.getElementById('thumb').appendChild(imgList[i]); adds each image specified in the images array of your javascript to the page.
I suggest you will want to remove the ones in your html - simply remove the <li> tags and the images that are within them.
After taking out the unneeded tags, your HTML should look something like this:
<body onLoad="init()">
<table class="planes">
<tr>
<td>
<div id="thumb">
</div>
</td>
<td>
<img class="pic" id="main" src="img/Picture.gif" alt="">
</td>
</tr>
</table>
First, div cannot be a child of ul and second you shouldn't really use tables for layout (unless making an email template).
If you are just trying to change the src of the main image on the click of the thumbnails, you can use the following js:
var images = new Array('img/Plane1.jpg', 'img/Plane2.jpg', 'img/Plane3.jpg', 'img/Plane4.jpg'),
thumbnails = document.getElementById('thumb').getElementsByTagName('img'),
mainImage = document.getElementById('main');
for (i = 0; i < thumbnails.length; i++) {
setClickFunction(i);
}
function setClickFunction(currentIndex) {
thumbnails[currentIndex].onclick = function() {
mainImage.src = images[currentIndex];
};
}
Example
Using links for your large images instead of an array
So far this code will only slide the image by clicking the thumnail on it. When we click the thumnail image, the slideshow will slide the image. But now I ALSO want it to slide the image automatically in every 10 second.
Here is my fiddle:
The Html
<ul id="slide-wrapper">
<li><img src="http://placekitten.com/120/120"/>
<p class="caption-title">Linkin Park's 'The Hunting Party': Track-by-Track Review</p></li>
<li><img src="http://placekitten.com/120/120"/>
<p class="caption-title">Sarah Jaffe Video Premiere Watch The Haunting Lover Girl Clip</p></li>
</ul>
<ul class="thumnails">
<li class="img-thum">
<img src="http://placekitten.com/120/120"/>
<p class="thum-capt">Linkin Park's 'The Hunting Party': Track-by-Track Review</p></li>
<li class="img-thum">
<img src="http://placekitten.com/120/120"/>
<p class="thum-capt">Bottled Water Comes From the Most Drought-Ridden Places in the Country</p></li>
</ul>
</div>
The JS
//When we click on thumb img
$('.thumnails li').click(function() {
var
//SlideShow
sshow = $(this).closest('#slideshow'),
//Big
big = sshow.find('#slide-wrapper'),
//thumb
thumb = sshow.find('.thumnails'),
//Get index
indx = thumb.find('li').index(this),
//Current index
currentIndx = big.find('li').index(big.find('li:visible'));
//If currentIndx is same as clicked indx don't do anything
if(currentIndx == indx) {
return;
}
big
//Fadeout current image
.find('li:visible').fadeOut(0).end()
//Fadein new image
.find('li:eq(' + indx + ')').fadeIn(0);
});
Thanks in advance.
Just trigger a click on your "slide button" every 10 seconds in document.ready using setInterval function:
$(document).ready(function() {
setInterval(function(){
//Your code inside here will be executed every 10 seconds
$('.thumnails li').trigger("click");
}, 10000);
}
What you can do is:
setTimeout(function (){
autoSlide();
},10000);
Next, put the slide code in a function like autoSlide and than wil he run the code automaticly every 10 seconds.
Put that function also in you click event.
I have a 5 image slideshow that i'm trying to animate by fading between the images, rather than just switching between then.
My HTML is as follows,
<div id="slides">
<ul class="pics">
<li><img src="images1.jpg" /></li>
<li><img src="images2.jpg" /></li>
<li><img src="images3.jpg" /></li>
<li><img src="images4.jpg" /></li>
<li><img src="images5.jpg" /></li>
</ul>
</div>
And my jQuery is as follows, I can get each images to fade away as it should, but the next image just appears, and doesn't fade in, have i missed something blatantly obvious?
var list2 = $('#slides .pics li');
list2.filter(':first').addClass('active').find('img').fadeIn(500);
setInterval(function() {
if( list2.filter('.active').index() !== list2.length - 1 ) {
list2.filter('.active').find('img').fadeOut(500, function(){
list2.filter('.active').removeClass('active').next().addClass('active');
});
list2.filter('.active').find('img').fadeIn(500);
}
else {
list2.filter('.active').find('img').fadeOut(500, function(){
list2.removeClass('active').filter(':first').addClass('active');
});
}
}, 4000);
I'm not sure why you're using .filter() that way. I'd do it more like this:
$('.pics img:first').show()
function doFade() {
$('.pics li:first img').fadeOut(500, function () {
$(this).parent().insertAfter($('.pics li:last'));
$('.pics li:first img').fadeIn(500);
})
}
setInterval(doFade, 4000)
jsFiddle example
i want to make slideshow and I want to be its behavior every 2 minutes slide down 1 pictures and so on , until the end of the images , and start again from the first picture .
I tried to make it and i make part of it (every 2 minutes change picture) but not slide down 1 pictures but change picture without slide down .
And one help me to make entire slideshow
My code is below
HTML
<div id="slideshow">
<img src="images/slideshow.jpg" alt="" title="" />
<img src="images/slideshow2.jpg" alt="" title="" />
<img src="images/slideshow3.jpg" alt="" title="" />
<img src="images/slideshow4.jpg" alt="" title="" />
<img src="images/slideshow5.jpg" alt="" title="" />
</div>
<script type="text/javascript">
window.onload = slideShow;
</script>
Javascript
var counter = 0;
function slideShow(){
var fatherElem = document.getElementById('slideshow');
var fatherChildren = fatherElem.children;
var fatherElemScroll = fatherElem.scrollTop;
counter++;
if (fatherChildren.length > counter) {
fatherElem.scrollTop += 300;
}
else {
fatherElem.scrollTop = 0;
counter = 0;
}
setTimeout(slideShow, 1000);
document.getElementsByName('SearchBox')[0].value = counter;
}
I'm sorry for my big question but i'm really need help
You're manipulating scrollTop on the slideshow div by 300px every second. If your images are exactly 300px high and your div is exactly 300px high with no overflow and your div forces your images to be vertically in a row, then what your code would do is switch to the next image every second. So, in answer to your questions:
You have not written any code for the image to slide. Changing scrollTop by 300 is a sudden change, not a sliding change.
Your code changes the scrollTop value every second, not every two minutes. The second parameter to setTimeout is a value in milliseconds. If you want two minutes, you would have to set that value to (1000 * 60 * 2).
Here's your code in action on jsfiddle: http://jsfiddle.net/jfriend00/NyYpB/ with some real images.
If you want the images to actually slide, then you will have to write some animation code to slowly manipulate scrollTop from it's present value to the enxt higher value continuously over the period of time you want the animation to run.
Animation can be tricky to do well from scratch. Most people will choose to either use CSS3 animation or use an animation library (like the one in jQuery or YUI) that has already done the right kind of tweening work for you because it will be faster and probably generate a higher quality result.
Here's a working example you can see and play with using jQuery: http://jsfiddle.net/jfriend00/CyCDD/.
HTML:
<div id="slideshow">
<img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130938160417/1190079664_chLyW-Ti.jpg" alt="" title="" />
<img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941050422/1190083195_Az688-Ti.jpg" alt="" title="" />
<img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941050421/1190083481_C3nag-Ti.jpg" alt="" title="" />
<img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941070426/1190078330_umaLY-Ti.jpg" alt="" title="" />
<img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941070425/1190080772_RmZX2-Ti.jpg" alt="" title="" />
</div>
CSS:
#slideshow {width: 100px; height: 66px; font-size: 0; overflow: hidden;}
Javascript:
var counter = 0;
function gotoNextSlide() {
var $ss = $("#slideshow");
if (counter >= $ss.children().length - 1) {
counter = 0;
} else {
counter++;
}
$ss.animate({'scrollTop': (counter * 66) + 'px'}, 1000);
}
setInterval(gotoNextSlide, 3000);