Не нужно просить прощения, форум и существует для помощи. Вы не задаете никаких глупых вопросов.
Опубликовал пример в ответах, посмотрите пожалуйста.
$(document).ready(function() {
// код добавления изображений
var coordX = 0, // устанавливаем позицию для первого скрина (отступ слева)
coordY = 30300, // отступ сверху
image = '0000', // имя первого изображения
gamecorX = 0, // переменные для добавления к изображениям игровых координат (в атрибут title)
gamecorY = 1212,
map = $('<div/>'); // создаём div для добавления в него всех элементов
map.addClass('map'); // добавляем ему класс, чтобы он не был безымянным
// запускаем цикл для перебора всех изображений
for(var i = 0; i < 30400; i++){
// так как имена файлов у нас в формате Image_0000 придётся заморочиться с ними
image = parseInt(image.replace(/\D+/g,"")); // переводим строку в число, чтобы отбросить лишние нули
image = image.toString(); // переводим число в строку, чтобы посчитать количество оставшихся символов.
var len = image.length; // считаем количество символов
if (len == 1) {image = '000'+image;}
if (len == 2) {image = '00'+image;}
if (len == 3) {image = '0'+image;}
// реализуем переход на следующий ряд (в одном ряду должно быть 301 изображение)
if (i % 301 == 0){
coordX = 0+600*(i/301);
coordY = 30300-300*(i/301);
gamecorY = gamecorY-12;
gamecorX = 0;
}
// добавляем изображение в div.map
map.append('<img data-src="screens/Image_'+image+'.jpg" style="left: '+coordX+'px; top: '+coordY+'px;" alt="Please wait. I\'m will load soon. ;)" title="'+gamecorX+' : '+gamecorY+'">');
coordX = coordX+200; // задаём смещение по оси Х
coordY = coordY+100; // по оси Y
gamecorX = gamecorX+4; // изменяем игровые координаты для title
// снова заморачиваемся с именем файла
image = parseInt(image.replace(/\D+/g,"")); // переводим строку в число, чтобы можно было прибавить единицу
image = image+1; // +1
image = image.toString(); // переводим число в строку, чтобы подготовить к следующему циклу
}
$('body').append(map); // добавляем наш блок с картинками в body
});
// определяем область видимости
$(document).scroll(function() {
function inWindow(s){
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var currentEls = $(s);
var result = [];
currentEls.each(function(){
var el = $(this);
var offset = el.offset();
if (scrollTop-1000 <= offset.top && (el.height() + offset.top) < (scrollTop + windowHeight+1000) && scrollLeft-1000 <= offset.left && (el.width() + offset.left) < (scrollLeft + windowWidth+1000)) result.push(this);
});
return $(result);
}
var boxesInWindow = inWindow("img");
// меняем атрибут data-src у всех видимых изображений
var imgEl = boxesInWindow;
for (var i=0; i<imgEl.length; i++) {
if(imgEl[i].getAttribute('data-src')) {
imgEl[i].setAttribute('src',imgEl[i].getAttribute('data-src'));
imgEl[i].removeAttribute('data-src');
}
}
});var coordX = 0,
coordY = 30300,
image = '0000';
for(var i = 0; i < 30400; i++){
image = parseInt(image.replace(/\D+/g,"")); // переводим строку в число, чтобы отобросить лишние нули
image = image.toString(); // переводим число в строку, чтобы посчитать коёёличество оставшихся символов.
var len = image.length; // считаем количество символов
if (len == 1) {image = '000'+image;}
if (len == 2) {image = '00'+image;}
if (len == 3) {image = '0'+image;}
if (i % 301 == 0){
coordX = 0+600*(i/301);
coordY = 30300-300*(i/301);
}
$('body').append('<img src="screens/Image_'+image+'.jpg" style="left: '+coordX+'px; top: '+coordY+'px;">');
coordX = coordX+200;
coordY = coordY+100;
image = parseInt(image.replace(/\D+/g,"")); // переводим строку в число, чтобы можно было прибавить единицу
image = image+1; // +1
image = image.toString(); // переводим число в строку, чтобы подготовить к следующему циклу
}
