Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   вывести изображения через js (https://javascript.ru/forum/misc/53331-vyvesti-izobrazheniya-cherez-js.html)

yomanswagVIP 29.01.2015 20:14

вывести изображения через js
 
Всем привет. начал только недавно в js разбираться и пока что все очень туго идет. Весь гугл перерыл, чтобы найти обычныый скрипт, который бы выводил изображение, но ничего не нашел(. В общем, помогите сделать такую штуку, добрые люди: есть скажем 100 изображений с названием 1,2,3 и так далее до 100. нужно вывести все эти изображения и обернуть их в ссылку, которая бы добавляла к их названию приставку "cards=". Заранее благодарен.

рони 29.01.2015 21:15

yomanswagVIP,
читайте документацию, ищите прелоад изображений.
http://learn.javascript.ru/modifying-document
для примера
var container = document.createDocumentFragment();
     for (var i = 1; i < 101; i++) {
         var a = document.createElement('a');
         container.appendChild(a);
         var img = a.appendChild(document.createElement('img'));
         img.src = i + 'jpg';
     }
     document.body.appendChild(container);

yomanswagVIP 29.01.2015 21:53

что-то изображения на странице появляться не хотят. Кстати, они находятся у меня по такому пути /wp-content/uploads/cards . куда его нужно вставить в код, чтобы он работал?

рони 29.01.2015 22:02

yomanswagVIP,
img.src ='/wp-content/uploads/cards/' + i + 'jpg';

DeV1doR 29.01.2015 22:03

yomanswagVIP,
как я понял, то здесь ( img.src = i + 'jpg'; ), перед i надо добавить твой путь.
Упс опоздал)

DeV1doR 29.01.2015 22:05

рони,
можете здесь помочь плз http://javascript.ru/forum/misc/5329...lnostyu-2.html.

рони 29.01.2015 22:27

DeV1doR,
тут вам надо читать http://learn.javascript.ru/vydelenie...ge-i-selection

yomanswagVIP 29.01.2015 23:33

картинки выводит, но почему-то ниже самого футера. Причем, если заглянуть в f12, то там они их код(картинок) расположен именно там где нужно, а сами картинки ниже футера.

yomanswagVIP 29.01.2015 23:36

хотя нет, извиняюсь, обманул. И код этих картинок тоже почему-то ниже футера распологается

рони 29.01.2015 23:39

yomanswagVIP,
про appendChild почитать не побовали ?
Цитата:

Новый узел добавляется в конец
ссылка на доку в посте 2

yomanswagVIP 30.01.2015 01:37

да что-то почитал, но не нашел как сделать, чтобы картинки появлялись именно в месте где вставлен скрипт

рони 30.01.2015 02:30

yomanswagVIP,
а вы забейте для них местечко а в скрипте его укажите.

yomanswagVIP 30.01.2015 10:19

<div id="list"></div>

<script>
var container = document.createDocumentFragment();
for (var i = 1; i < 4; i++) {
var list = document.getElementById('list');
var div = document.createElement('div');
div.innerHTML = ''
container.appendChild(div);
var img = div.appendChild(document.createElement('img'));
img.src ='http://topdeckmaster.ru/wp-content/uploads/cards/' + i + '.png';
}
list.appendChild(div);
</script>
вот так вроде бы получилось вывести в div'e с id = 'list'. Но теперь он просто выводит только одну картинку. В чем тут ошибка?

рони 30.01.2015 10:43

Цитата:

Сообщение от yomanswagVIP
list.appendChild(div);

list.appendChild(container);


Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

yomanswagVIP 30.01.2015 11:22

все также одну картинку выводит:
<script>
var container = document.createDocumentFragment(d);
     for (var i = 0; i < 4; i++) {
         var list = document.getElementById('list');
         var div = document.createElement('div');
         div.innerHTML = '';
         var img = div.appendChild(document.createElement('img'));
         img.src ='http://topdeckmaster.ru/wp-content/uploads/cards/' + i + '.png';
     }
   list.appendChild(container);
</script>

рони 30.01.2015 11:30

yomanswagVIP,
ой :-?
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
<div id="list"></div>

 <script>
 var container = document.createDocumentFragment(),
 list = document.getElementById('list');
 for (var i = 1; i < 4; i++) {
 var div = document.createElement('div');
 container.appendChild(div);
 var img = div.appendChild(document.createElement('img'));
 img.src ='http://topdeckmaster.ru/wp-content/uploads/cards/' + i + '.png';
 }
 list.appendChild(container);
 </script>
</body>

</html>

рони 30.01.2015 11:31

Цитата:

Сообщение от yomanswagVIP
createDocumentFragment(d);

зачем фигню то разную сувать

yomanswagVIP 30.01.2015 11:38

а все надо было просто строки местами поменять вот эти:
var list = document.getElementById('list');
var div = document.createElement('div');

Кстати ваш вариант тоже работает. Спасибо огромное за помощь!


Часовой пояс GMT +3, время: 00:43.