Проблема со слайдером (готовым). Как вставить в него картинки?

Question

[Tom Nolane]

Взял готовый слайдер: этот.
Работает, всё хорошо.
Хочу сделать так, чтобы при добавлении картинки, она автоматически включалась внутрь.

Основа каждой картинки примерно такая (в слайдере):

<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:800px;height:356px;overflow:hidden;">
<div>
                <img data-u="image" src="img/02.jpg" />
                <img data-u="thumb" src="img/thumb-02.jpg" />
            </div>
<div>
                <img data-u="image" src="img/03.jpg" />
                <img data-u="thumb" src="img/thumb-03.jpg" />
            </div>
.... 
</div>

допустим .. я хочу сделать тоже самое, но через script:

var a = [ ["img/01.jpg", "img/thumb-01.jpg"] , ["img/02.jpg","img/thumb-02.jpg"]];
		for(var i = 0; i < 2; i++)
		{
			  var div = document.createElement('div');
			  div.innerHTML = '<img data-u="image" src='+a[i][0]+' /><img data-u="thumb" src='+a[i][1]+' />';
              document.body.appendChild(div);
		}

но в этом случае (хотя html получается такой же) картинки вставляются не в слайдер, а под ним.


из-за чего может быть такое?? и в какую сторону "копать"? Пробовал с этим...

$(document).ready(function(){
  код
});

результат тот же. Может вставлять(создавать теги) через php???

п.с. мой скрипт append тегов(div'ов) естественно внутри блока(дива) слайдера

(п.с.с. не ругайте за notepad++ , просто в brackets у меня открыт проект основной) и не хочу переключать)

Answer 1

[Tom Nolane]

с помощью JS не смог разобраться. Сделал через php:

<?
function getImgName($pathtoimg,$album) {
   
$pictures = array(); 
if ($dir = opendir($pathtoimg.$album."/"))  {     
     while (false !== ($file = readdir($dir))) {         
         if ($file == "." || $file == ".." || (is_dir($pathtoimg.$album."/".$file))) continue; 
          $pictures[] = $file; 
          $i++;  
     } 
     closedir($dir); 
} 
sort($pictures);
return $pictures;
}

$t = getImgName('img','/image');  
$t2 = getImgName('img','/thumb');  
?>

и потов там, куда вставляются теги с img:

<?
		 
		 for ($i = 0; $i < count($t); $i++) {  
		 
		 echo '<div><img data-u="image" src="img/image/'.$t[$i].'" /><img data-u="thumb" src="img/thumb/'.$t2[$i].'" /></div>'; 
}
		
		?>

благодарю всех за отклик! п.с. если предпологаете как сделать через js (классику либо/и jquery) - напишите, прикреплю к овтетам (и себе для развития)!

Answer 2

[k0nsu1]

Полагаю нужно делать запуск слайдера после вставки изображений

Comments

[Tom Nolane]

запуск слайдера в самом конце перед

[Tom Nolane]

< /body >

[k0nsu1]

Tom Nolane: Вызывайте запуск слайдера после цикла

[Tom Nolane]

k0nsu1: попробовал( не катит, тогда вообще пусто (ошибок в консоле нет). Пока делаю через php и вроде получается...

Answer 3

[Егор Живагин]

Так ты же добавляешь блоки с картинками просто в body, а не в блок-слайдер, не?

Comments

[Tom Nolane]

не, я добавляю там же, где и сами картинки... т.е. я даже не заменяю их (куда они сами добавляются) а рядом с ними пишу sccript где через js добавляю (дублирую) существующие картинки, чтобы на выходе было тоже самое