[zylios]

Доброе утро!
Столкнулся с проблемой вставки значения массива в src

Вот код:

<div class="wrapper">
        <ul>
            <li class="list-item"><a href="img/1.jpg" class="big">
                    <img src="img/1-small.jpg" alt="" class="im">
                </a>
            </li>
            <li class="list-item"><a href="img/2.jpg" class="big">
                    <img src="img/2-small.jpg" alt="" class="im">
                </a>
            </li>
        </ul>
    </div>

$(function(){

    var $body = $('body');
    var $link = $('.list-item')
    var $modal;
    var $overlay;
    var clsArray = new Array();
    var clsHref;

    $('.big').each(function(){
        clsArray.push($(this).attr('href'))
    });

    for(j = 0; j < clsArray.length; j++){
        clsHref = $(".test" + j).attr('src', clsArray[j]);
    }

    function showModal(e){

        e.preventDefault();

        $modal = $('<div class="modal"><img class="test" src="' + clsHref + '"></div>');
        $overlay = $('<div class="overlay"></div>');

        $overlay.one('click', hideModal);

        $body.append($overlay);
        $body.append($modal);
    }

    function hideModal(){
        $modal.hide();
        $overlay.hide();
    }

    $link.on('click', showModal);

});

Все возможные варианты были перепробованы.