Форум

zylios · #1 (**permalink**) 02.08.2016, 09:52

Доброе утро!
Столкнулся с проблемой вставки значения массива в 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);

});

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

рони · #2 (**permalink**) 02.08.2016, 09:57

Сообщение от zylios

Вот код:

маловато будет ... что такое

Сообщение от zylios

$(".test" + j)

например?

zylios · #3 (**permalink**) 02.08.2016, 10:23

Сообщение от рони

маловато будет ... что такое например?

Вот эта часть кода не моя, взято с другого ресурса

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

рони · #4 (**permalink**) 02.08.2016, 10:37

zylios,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .overlay, .modal {
    width: 100%;
    height: 100%;
    position: fixed;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background-color: #DCDCDC;
  }
  .modal{
    margin: auto;
    width: 50%;
    height:  auto;
  }
 .modal img{
    margin:  auto;
    width: 100%;
    height:  auto;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    var $body = $("body");
    var $link = $(".list-item");
    var $modal;
    var $overlay;
    $modal = $('<div class="modal"></div>').hide();
    $overlay = $('<div class="overlay"></div>').hide();
    $body.append($overlay);
    $body.append($modal);
    $overlay.on("click", hideModal);

    function hideModal() {
        $modal.hide();
        $overlay.hide()
    }
    $link.each(function(i, el) {
        var src = $(".big", el).attr("href");
        var img = $("<img>", {
            "src": src
        });
        $(el).on("click", function(e) {
            e.preventDefault();
            $modal.html(img);
            $modal.show();
            $overlay.show()
        })
    })
});
  </script>
</head>

<body>
<div class="wrapper">
        <ul>
            <li class="list-item"><a href="http://s00.yaplakal.com/pics/pics_original/6/8/7/651786.jpg" class="big">
                    <img src="http://i.io.ua/img_su/small/0062/40/00624089_n1.jpg" alt="" class="im">
                </a>
            </li>
            <li class="list-item"><a href="http://www.photoclub.com.ua/_/106741.jpeg?0" class="big">
                    <img src="http://i.io.ua/img_su/small/0062/40/00624089_n1.jpg" alt="" class="im">
                </a>
            </li>
        </ul>
    </div>


</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript