1

Есть миниатюра изображения и полное изображение одной и той же картинки. Нужно раскрывать полное изображение через миниатюру. Нажал на миниатюру - развернулось полное изображение, нажал на полное - появилась миниатюра. Как GIF-изображения во ВКонтакте.

Код:

function expand(num, src, t_src)
{
    var el = document.getElementById('doc_' + num);
    el.innerHTML =
            '<a href="' + src + '" name="expandfunc"  onclick="expand(' + num + ',' + src + ',' + t_src + '); return false;"><img src="' +
            (src : t_src) + '" /></a>';
}

Но консоль ругается на скобку в 9 строке.

3
  • "на 9 строке" то есть 7 строке.
    – gm-111
    21 июн 2015 в 18:12
  • а вы уверены, что ваш код будет работать? функция какая-то странная. может лучше использовать велосипед, который придумали другие: fancyapps.com/fancybox/demo
    – MasterAlex
    21 июн 2015 в 19:51
  • Должен работать, видел пример работоспособности, но сейчас сайт умер. А этот велосипед мне не нужен, ведь мне нужно открывать картинку в теле объекта.
    – gm-111
    21 июн 2015 в 20:01

1 ответ 1

1

консоль ругается - конечно, ругается, потому что конструкция (src : t_src) синтаксически неверна. Объект создаётся так: {src : t_src}, но в вопросе достаточно использовать просто t_src.

Второй проблемой является то, что в expand(' + num + ',' + src + ',' + t_src + ') отсутствуют кавычки (для обозначения при вызове функции expand того, что это строки) вокруг src и t_src.

Третьей проблемой является то, что в будущем вызове expand нужно src и t_src поменять местами.

В итоге, строка кода должна выглядеть так:

el.innerHTML = '<a href="' + src + '" name="expandfunc" onclick="expand(' +
        num + ',\'' + t_src + '\',\'' + src + '\'); return false;"><img src="' +
        t_src + '" /></a>';

Полный пример:

function expand(num, src, t_src)
{
    var el = document.getElementById('doc_' + num);
    el.innerHTML =
        '<a href="' + src + '" name="expandfunc" onclick="expand(' + num + ',\'' + t_src + '\',\'' + src + '\'); return false;"><img src="' + t_src + '" /></a>';
}
<div id="doc_1">
    <a href="http://waytoeast.ru/units/unit1.png" onclick="expand(1, 'http://waytoeast.ru/units/unit1.png', 'http://waytoeast.ru/images/page_bg.jpg'); return false;">
        <img src="http://waytoeast.ru/units/unit1.png"/>
    </a>
</div>

Однако выглядит код очень криво, не говоря уж о том, что использование onclick считается устаревшим.

Можно использовать .addEventListener(). Да, кода получается больше и это не будет работать в старых IE, но зато всё читабельно, раздельно и готово к будущим расширениям/доработкам:

document.addEventListener('DOMContentLoaded', onDomReady, false);

function onDomReady()
{
    var links = document.getElementsByClassName('toggle_img');
    for (var i = 0; i < links.length; i++)
    {
        var thisLink = links[i];
        thisLink.addEventListener("click", function()
        {
            handleLinkClick(event, thisLink);
        });
    }
}
    
function handleLinkClick(event, link)                                                               
{
    var currentSrc = link.href;
    var toggleSrc = link.getAttribute("data-img");
    var img = link.getElementsByTagName('img')[0];
    img.src = toggleSrc;
    link.href = toggleSrc;
    link.setAttribute("data-img", currentSrc);
    event.preventDefault();
}
<div id="doc_1">
    <a href="http://waytoeast.ru/units/unit1.png" class="toggle_img" data-img="http://waytoeast.ru/images/page_bg.jpg">
        <img src="http://waytoeast.ru/units/unit1.png"/>
    </a>
</div>

Если использовать jQuery, то код будет короче:

$(document).ready(function()
{
    $('.toggle_img').on('click', function()
    {
        var $this = $(this);
        var currentSrc = this.href;
        var toggleSrc = $this.data("img");
        var img = $this.find('img')[0];
        img.src = toggleSrc;
        this.href = toggleSrc;
        $this.data("img", currentSrc);
        return false;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="doc_1">
    <a href="http://waytoeast.ru/units/unit1.png" class="toggle_img" data-img="http://waytoeast.ru/images/page_bg.jpg">
        <img src="http://waytoeast.ru/units/unit1.png"/>
    </a>
</div>

Какой из трёх способов использовать - дело ваше, но я рекомендую 2 и 3 способы.

12
  • Спасибо огромное за разъяснения, все понял. Хотел использовать третий метод, но TypeError: $(...).on is not a function. Заменил на $('.toggle_img').click(function() - ошибок нет, но клик по картинке заменяет миниатюру на /undefined. Повторный клик работает.
    – gm-111
    22 июн 2015 в 8:53
  • @gm-111 скорее всего вы используете очень старую версию jQuery (старее 1.7). Если это так, то вам нужна версия 1.7+. В ответе используется версия 2.1.1
    – Regent
    22 июн 2015 в 9:25
  • да, проскакивала мысль на счет версий. Заменил на 1.7.2, все работает. Боялся, что остальные функции отвалятся, но нет, все хорошо. Еще один вопрос, можно ли сделать, что бы клик по одной картинке открывал певую картинку, и закрывал вторую, если она открыта?
    – gm-111
    22 июн 2015 в 9:51
  • Любая. Вот смотрите jsfiddle.net/zLmw2frb открываем первую картинку - она раскрывается, после нажимаем на третью картинку - третья раскрывается, а первая должна закрываться. То есть в раскрытом виде может быть только одна картинка.
    – gm-111
    22 июн 2015 в 10:08
  • @gm-111 если переделать исходный HTML, то всё упрощается. В том числе и эта задача становится не сложной. Пример в fiddle.
    – Regent
    22 июн 2015 в 10:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.