Доброго времени суток. Есть задача вывести все изображения из каталога на страницу. В основу был взят
directorySlider. Я его упростил и слегка переделал, вот что полулось:
(function($){
var imagesFromDir = function(element, options)
{
var elem = $(element),
obj = this,
elemId = elem[0].id;
var config = $.extend({
base: 'image_',
extension: 'jpg',
directory: null,
numimages: null,
}, options || {});
var images = [],
numImages = 1;
while(numImages <= config.numimages){
images.push('<img src="' + config.directory + config.base + numImages + '.' + config.extension + '" />');
numImages++;
}
var imageWrap = $('<div class="' + elemId + '-image-wrap" ></div>');
imageWrap.appendTo(elem);
$.each(images, function(index, val) {
$(val).css({
margin: '15px auto',
display: 'block',
}).appendTo(imageWrap);
});
};
$.fn.imagesFromDir = function(options)
{
return this.each(function()
{
var element = $(this);
var imagesfromfir = new imagesFromDir(this, options);
element.data('imagesfromdir', imagesfromdir);
});
};
})(jQuery);
на данный момент всё работает, но вопрос в том, что картинок может быть больше 100 и для браузера отобразить всё в одной куче — не лучшая идея. Потому есть мысль сделать либо пагинацию по 10 картинок, либо проходить массив images по одному элементу с помощью onClick.
Т.к. я совсем новичок в javascript и jQuery, у меня возникло 2 вопроса — а зачем вторая функция в этом коде, разве нельзя в теле основной функции обработать массив images так, как надо? и второй — а как мне обработать этот массив? Идея со сменой картинок по клику мне нравится больше.
Заранее спасибо за помощь!