1
Hello, how do I change the src of an image when I click on a link next? I have a long list of images and I would like to advance according to the amount of images in this folder, rather than by one that would be beyond exhaustive a limited process, seen to add and remove would need to edit the html. If it is not possible, at least link the value of a variable js to a "page" and based on this access an xml list with links.
2
You can start by storing the images in an array, and loading the images of n in n, which in this case n is num_imgs:
var imgs = [
'http://www.acuitytraining.co.uk/wp-content/uploads/2015/05/SQL-logo-transparent.png',
'http://wlpapers.com/images/java-logo-1.jpg',
'https://www.python.org/static/community_logos/python-logo-master-v3-TM.png',
'https://4.bp.blogspot.com/-DDh4SMSu11Y/V2KCoeDpmxI/AAAAAAAAAjI/Mz5H8C3GwAM7yK13YLxMj63-BgvVpQNgACLcB/s1600/C2BProgramming2Blanguages.png',
'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSvk-hgB0ZbEFOIMYVX2-9DXaaucobhwd0aRWmB6t29Bcs3DvdQXAdZf3s',
'http://www.brandsoftheworld.com/sites/default/files/styles/logo-thumbnail/public/0015/1781/brand.gif?itok=23onNH3m',
'http://3.bp.blogspot.com/-PTty3CfTGnA/TpZOEjTQ_WI/AAAAAAAAAeo/KeKt_D5X2xo/s1600/js.jpg',
'http://www.qualitycompass.com/css/images/haskell-logo-with-name.png'
];
var num_imgs = 3;
var next_three = num_imgs;
var next_imgs;
for(var i = 0; i < num_imgs; i++) {
$('#imgs_wrapper').append('<img class="img_change" src="' +imgs[i]+ '">');
}
$('#next_imgs').on('click', function() {
next_imgs = imgs.slice(next_three, next_three + num_imgs);
if(next_imgs.length === 0) {
next_three = 0;
next_imgs = imgs.slice(next_three, next_three + num_imgs);
}
$('.img_change').each(function() {
if(typeof next_imgs[$(this).index()] === 'undefined') {
$(this).hide();
return true; // continue
}
$(this).show();
$(this).prop('src', next_imgs[$(this).index()]);
});
next_three += num_imgs;
});.img_change {
width: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgs_wrapper">
</div>
<div>
<button id="next_imgs">proximas</button>
</div>Perfect! It helped me a lot! Just one more question, to make a button come back, just replace the + by - ?
@Guilhermes.Santos, see if you can help https://jsfiddle.net/bwoep3wL/2/
thank you very much @Miguel ! man, thank you very much msm!
@Guilhermes.Santos, I’m glad you solved it
Just one more thing, the Prev button, it’s skipping a few pages, the forward goes one by one, but to go back, it skips a few images, randomly. well I am using only one img_change and changed the value of num_img to 1. want me to create another question, to compute your answer?
@Guilhermes.Santos is better, just put the functionality of walking backwards (as it is), so it doesn’t get too extensive... And so there may be more people to help him. Now I’m not in a lot of time
@Guilhermes.Santos , put the html too and if you can put in snipet, as I did on top, in order to be executed right here and to simplify (help in debug) the life to those who want to help you. HTML is essential to put there
Browser other questions tagged javascript jquery html css
You are not signed in. Login or sign up in order to post.
William didn’t quite understand, is it something like this https://jsfiddle.net/bwoep3wL/? If you are tell me here, write "@Miguel yes/no that..." so I can be notified and publish it or not as a response
– Miguel
@Miguel is more or less that, but what happens is that I don’t want to leave the images already loaded, because I already have a parallel search system that changes the src. Anyway, my idea is to have a list, a switch "case var =2" src exchange of id "imagemTroca" and the swap button activates a function var +1. I just don’t know how to put it together. 'Cause I don’t know where to put it. pq if I set with var = 0 at the beginning, it will reset td once I press the button next. :(
– Guilherme S. Santos
I noticed, I put down a possible answer
– Miguel