Reputation: 83
Please help, JavaScript and Jquery experts, How to make automatic image gallery slider with thumbnails, where target images' source paths are stored in Java Script array?
I have a JQuery image gallery automatic slider code with thumbnails, that works fine. But, as you can see target images are all placed in an unordered list in html. What I need is target images (i.e. img src) to be in JS array, so I need to modify my JS script, but I don't know how. So, I don't want images in html list, I just want a div with image which source is in JS array. I already have my JS array that I made from PHP array.
<script type="text/javascript">
var imgs = <?php echo json_encode($images); ?>;
</script>
Thanks in advance!!
//IMAGE GALLERY
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var target;
triggers.first().addClass('active');
images.hide().first().show();
function sliderResponse(target) {
images.fadeOut(800).eq(target).fadeIn(800);
triggers.removeClass('active').eq(target).addClass('active');
}
triggers.click(function() {
if ( !$(this).hasClass('active') ) {
target = $(this).index();
sliderResponse(target);
resetTiming();
}
});
$('.next').click(function() {
target = $('ul.triggers li.active').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
resetTiming();
});
$('.prev').click(function() {
target = $('ul.triggers li.active').index();
lastElem = triggers.length-1;
target === 0 ? target = lastElem : target = target-1;
sliderResponse(target);
resetTiming();
});
Upvotes: 2
Views: 1060
Reputation: 33943
You have to loop trougth the array to create the images elements.
Then append it to a li
.
Then append all li
to a ul
with class triggers
.
Then append this ul
to your page.
The rest of your script stays the same.
//var imgs = <?php echo json_encode($images); ?>;
var imgs = [
"http://www.branfere.com/upload/Image/univers/univers08.jpg",
"http://www.branfere.com/upload/Image/animaux/capucin01.jpg",
"http://www.branfere.com/upload/Image/animaux/girafe01.jpg",
"http://www.branfere.com/upload/Image/animaux/lemurien05.jpg",
];
var container = $("#ulContainer");
var list = $("<ul>").attr("class","triggers");
for(i=0;i<imgs.length;i++){
var item = $("<li>");
var img = $("<img>").attr("src",imgs[i]);
item.append(img);
list.append(item);
}
container.append(list);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ulContainer"></div>
Upvotes: 0
Reputation: 1818
You can try with something like this, without change your script:
var imgs = <?php echo json_encode($images); ?>;
//create a list of img for each src in your array wrapped inside a li element
var _tmpl = "";
for(var k=0; k < imgs.length; k++){
_tmpl+="<li><img src='"+imgs[k]+"' /></li>";
}
//then append the string inside wrapper the ul.images
var images = $(_tmpl);
var wrapper = $('ul.images');
images.appendTo(wrapper);
//then your script to create the slider
var triggers = $('ul.triggers li');
var lastElem = triggers.length-1;
var target;
triggers.first().addClass('active');
images.hide().first().show();
function sliderResponse(target) {
images.fadeOut(800).eq(target).fadeIn(800);
triggers.removeClass('active').eq(target).addClass('active');
}
triggers.click(function() {
if ( !$(this).hasClass('active') ) {
target = $(this).index();
sliderResponse(target);
resetTiming();
}
});
$('.next').click(function() {
target = $('ul.triggers li.active').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
resetTiming();
});
$('.prev').click(function() {
target = $('ul.triggers li.active').index();
lastElem = triggers.length-1;
target === 0 ? target = lastElem : target = target-1;
sliderResponse(target);
resetTiming();
});
Upvotes: 1