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
Related
I want to make a simple list of images (something like a slideshow) and in the beginning only first one shows up (put display: none; on whole class and display: block on the first of type)and I have added the buttons to switch between pictures. So I have my one image showing and arrows looking good but when I press the buttons on the side I cant get it to work. I used materialize to create this but changed it and wanted to do it myself.
My code:
<div class="slider">
<div class="left">
<img class="arrow" id="arrow_left" src="imgs/arrow_left.png" alt="">
</div>
<ul class="slike_lista">
<li class="slider_image"><img class="slide_photo" src="imgs/test.jpg" alt=""></li>
<li class="slider_image"><img class="slide_slike" src="imgs/test2.jpg" alt=""></li>
<li class="slider_image"><img class="slide_slike" src="imgs/test3.jpg" alt=""></li>
</ul>
<div class="right">
<img class="arrow" id="arrow_right" src="imgs/arrow_right.png" onclick="NextImage();" alt="">
</div>
</div>
jQuery part:
var bannerImages= $(".slider_image");
var position= 0;
var numberOfImages= bannerImages.length;
function NextImage(){
if(position+1 >= brojSlika){
bannerImages[position].css('display', "none");
position= 0;
bannerImages[position].css('display', "block");
}
else{
bannerImages[position].css('display', "none");
position+= 1;
bannerImages[position].css('display', "block");
}
}
I tried with regular .toggle to do it but it didn't work and the same thing happens with .css
The error when I press the button:
Uncaught TypeError: bannerImages[position].css is not a function
The same thing with toggle or anything else. I tried to fix it but I just don't know how, I suck at javaScript...
As Taplar commented above the problem was <ajQueryObject>[#] removes the option to access jQuery methods. The solution is to use .eq(position) instead.
Here is the edited code:
var bannerImages= $(".slider_image");
var position= 0;
var numberOfImages= bannerImages.length;
function NextImage(){
if(position+1 >= brojSlika){
bannerImages.eq(position).css('display', "none");
position= 0;
bannerImages.eq(position).css('display', "block");
}
else{
bannerImages.eq(position).css('display', "none");
position+= 1;
bannerImages.eq(position).css('display', "block");
}
}
I want to change an image onclick on another image, but don't only want to change a fixed image but use the advantages of srcset, so the browser picks the right image for the current main image size (responsive layout).
This is what I am using right now, vanilla:
<div id="item-detail-img-main">
<img src="/_img/items/400/img.jpg" srcset="/_img/items/400/img.jpg 400w, /_img/items/600/img.jpg 600w" alt="" width="100%" id="item-detail-img-main-img">
</div>
<script type="text/javascript">
function chimg (img) {
window.document.images["item-detail-img-main-img"].src = img;
}
</script>
<ul id="item-detail-img-thumbs">
<li><img src="/_img/items/200/img.jpg" onclick="chimg('/_img/items/400/img.jpg')"></li>
<li><img src="/_img/items/200/img2.jpg" onclick="chimg('/_img/items/400/img2.jpg')"></li>
</ul>
I'm open to jquery here.
Anyone know how to handle this?
I think you can probably set the srcset attribute, at least by using the setAttribute() method. You could also just replace the whole image tag:
function(img,img2,img3){
document.getElementById('item-detail-img-main').innerHTML='<img src="'+img+'" srcset="'+img2+' 400w, '+img3+' 600w" alt="" width="100%" id="item-detail-img-main-img">';
}
The jQuery option looks something like this:
https://jsfiddle.net/axcnotx7/
<div>
<img id="main" width="100%" id="item-detail-img-main-img">
</div>
<ul id="thumbs">
<li><img src="https://icons.iconarchive.com/icons/fi3ur/fruitsalad/256/banana-icon.png"></li>
<li><img src="https://icons.iconarchive.com/icons/bingxueling/fruit-vegetables/256/apple-red-icon.png"></li>
</ul>
<script type="text/javascript">
var main = $('img#main');
$('#thumbs img').click(function(e) {
var imageSrc = e.currentTarget.src;
// You need to determine your own srcset paths here
var srcSet = imageSrc + ' 400w, ' + imageSrc + ' 600w';
main.attr('src', imageSrc);
main.attr('srcset', srcSet);
});
</script>
i need some help to make this slider counter work, am currently using sudoslider but can't seem to make it work as i want, can anyone help tryed from slider docs but doesn't work as it should...needs to modify it's number as slides go on like 1/2..2/2 somethn' like that...?
html code:
<div id="slider">
<ul>
<li><img src="images/1.png" alt="img"></li>
<li><img src="images/2.png" alt="img"></li>
<li><img src="images/3.png" alt="img"></li>
</ul>
</div>
<div class="siteBtn">
<a href="#">
Visit Us
</a>
</div>
<div class="sliderBtn">
<img src="images/prevBtn.png" alt="img">
<img src="images/nextBtn.png" alt="img">
</div>
<div class="descrip-text"><p id="anistate" ></p>
<span>Slide:</span>
<span id="slidenumber"></span>
<span>/5</span>
</div>
JS code:
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider({
customLink:'a.customLink',
prevNext:false,
controlsFade:false
// customlink:true
});
});
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider({
numeric: true,
beforeAnimation: function(slide){
$('div.descrip-text #anistate').text(slide).show(600);
},
afterAnimation: function(slide){
$('div.descrip-text #anistate').hide(400);
$('div.descrip-text #slidenumber').text(slide);
var text = $(this).children().attr('src');
$('div.descrip-text #slidehtml').text(text);
},
initCallback: function() {
var slide = this.getValue("currentSlide");
$('div.descrip-text #slidenumber').text(slide);
var text = this.getSlide(slide).children().attr('src');
$('div.descrip-text #slidehtml').text(text);
}
});
});
I'm not sure if this is what you wanted to achieve but check this fiddle:
http://jsfiddle.net/3NVhR/1/
$(document).ready(function () {
var sudoSlider = $("#slider").sudoSlider({
customLink: 'a.customLink',
prevNext: false,
controlsFade: false,
auto: true,
afterAnimation: function (slide) {
var slide = sudoSlider.getValue("currentSlide");
$('div.descrip-text #slidenumber').text(slide);
},
initCallback: function() {
var slides = sudoSlider.getValue('totalSlides');
$('div.descrip-text #slidenumber').next('span').text("/ " + slides);
}
});
});
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.
I would like to replace thumbs to large in following example using js
FROM:
<ul id="slide">
<li><img src="pathtoimg/thumbs/imagename.jpg" /></li>
<li><img src="pathtoimg/thumbs/imagename2.jpg" /></li>
</ul>
To :
<ul id="slide">
<li><img src="pathtoimg/large/imagename.jpg" /></li>
<li><img src="pathtoimg/large/imagename2.jpg" /></li>
</ul>
To achieve it I used following js code
$(window).load(function(){
var images = $("#slide li img");
for(var i = 0; i < images.length; i++)
{
var img = images[i];
var src = img.src.replace("thumbs","large");
img.src = src;
}
});
The above code works fine in modern browsers but internet Explorer 7 & 8 returns stack overflow at line : 0 error. Is there any other way to replace the src of img in list without getting above error on ie?
Thanks in advance.
Try it like this
$(document).ready(function(){
$("#slide > li > img").each(function(){
var t = $(this);
var src = t.attr('src');
if(!src || typeof(src)!=='string') return;
t.attr('src',src.replace('/thumbs/','/large/'));
});
});
Try this
$(window).load(function(){
$("#slide li img").each(function(){
$(this).attr("src",$(this).attr("src").replace("thumbs","large"));
});
});