how to change an image by clicking on a link

Navigation
1

Hello, how do I change the src of an image when I click on a link to move forward? I have a long list of images and I would like to go forward according to the amount of images in that folder, instead of one by one that would be more than 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 js variable to a "page" and based on it access an xml list with the links.

    
asked by anonymous 20.11.2016 / 15:12

1 answer

2

You can start by saving the images in an array, and loading the images of n into 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><divid="imgs_wrapper">

</div>
<div>
  <button id="next_imgs">proximas</button>
</div>

JSFIDDLE

    
20.11.2016 / 15:57
Session is destroyed after redirect in Codeigniter 3 Retrieve callback return