Mirjana Katalina
Mirjana Katalina

Reputation: 83

Jquery or JavaScript image slider from JS array with thumbnails

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

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

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

Frogmouth
Frogmouth

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

Related Questions