Пример Wagerfield выглядит иначе, чем источник

Question

Настраивая parallax.js, я столкнулся с этим:

Разметка исходного кода html (в официальном проекте GIThub):

    <ul id="scene" class="scene">
        <li class="layer" data-depth="1.00"><img src="images/layer1.png"></li>
        <li class="layer" data-depth="0.80"><img src="images/layer2.png"></li>
        <li class="layer" data-depth="0.60"><img src="images/layer3.png"></li>
        <li class="layer" data-depth="0.40"><img src="images/layer4.png"></li>
        <li class="layer" data-depth="0.20"><img src="images/layer5.png"></li>
        <li class="layer" data-depth="0.00"><img src="images/layer6.png"></li>
        </ul>

Но если мы посмотрим на (действительно потрясающий) пример Wagerfield, то похоже, что изображения вводятся как фоновое изображение блока div внутри каждого элемента класса.layer.

Объяснение, которое я могу дать себе, состоит в том, что таким образом изображение может управляться более гибко,

---

Я только начинаю с JS, так что я действительно не могу найти обходной путь: но сценарий не может преобразовать это

    <img src="images/layer1.png">

в нечто вроде:

    <div class="layer1" style="background:url(images/layer1.png) no-repeat 50% 100%"></div>

Это может быть легко достигнуто?

Расширяя вопрос, было бы здорово полностью стилизовать слой.layre со встроенными стилями, пропущенными через скрипт.

Сценарий до сих пор:

     jQuery("li.layer > img").replaceWith
    ("<div class=\"" + $((("li.layer > img").src).replace(/\.[^/.]+$/, "")) + "\"</div>" );

эта часть не работает (я ищу вывод URL изображений...):

    (("li.layer > img").src).replace(/\.[^/.]+$/, "")

Answer 1

Нечто подобное должно сработать.

$('#scene > .layer > img').replaceWith(function () { // select all images
    var s = this.src.substring(this.src.indexOf('images'), this.src.length);
    // get only the relative path of the url
    
  
    return $('<div/>', { // create a div
        class: s.replace(/\.[a-zA-Z]+/, '').split('/')[1], 
               // get the image name as class
        style: 'background:url(' + s + ') no-repeat 50% 100%' 
               // set style
    });
});

$('div').text(function(){
 return this.outerHTML;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul id="scene" class="scene">
    <li class="layer" data-depth="1.00">
        <img src="images/layer1.png">
    </li>
    <li class="layer" data-depth="0.80">
        <img src="images/layer2.png">
    </li>
    <li class="layer" data-depth="0.60">
        <img src="images/layer3.png">
    </li>
    <li class="layer" data-depth="0.40">
        <img src="images/layer4.png">
    </li>
    <li class="layer" data-depth="0.20">
        <img src="images/layer5.png">
    </li>
    <li class="layer" data-depth="0.00">
        <img src="images/layer6.png">
    </li>
</ul>