Мой скрипт увеличения миниатюр изображений на сайте (Html, jQuery)

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

Это сделать очень просто, разместив на странице небольшой html код и JavaScript. Для второго я буду пользоваться библиотекой jQuery.

Пример (Кликните по картинке):

Html код:

Этот код следует разместить перед закрывающим тегом </body>, чтобы наша картинка всегда показывалась на переднем плане поверх всех остальных элементов, не очень я люблю использовать z-index.

<table id="FixedBlack" style="position: fixed; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.50); display: none; opacity: 0;">
    <tr>
        <td style="text-align: center;">
            <img src="" id="im" style="position: relative; background: #fff; box-shadow: 0 0 10px white; border: 5px solid #fff; border-radius: 6px;" />
        </td>
    </tr>
</table>

JavaScript

Я часто использую "$(document).on('click'..." по амяти прошлых костылей, когда при подгрузке ява скриптом в статичную html JS скрипта из файла вместе с куском html кода, не срабатывали констркуции вида "$("#FixedBlack").click(function () {...". Просто по старой памяти, ибо при формировании страницы php эта проблема не актуальна.

$(document).ready(function () {

    $(document).on("click", ".im", function () {
        if ($(this).attr("src") != "") {
            $("#im").attr("src", $(this).attr("src"));
            $("#FixedBlack").show().fadeTo(200, 1);
            $("#im").show().fadeTo(0.5, 1);
        }
    });

    $(document).on("click", "#FixedBlack", function () {
        $("#im").hide();
        $("#FixedBlack").stop(true).fadeTo(200, 0, function () {
            $("#FixedBlack").hide();
        });
    });

});

Как оно работает:

Теперь данный скрипт при клике по любому изображению на странице с классом .im будет брать у него путь к картинке и устанавливать в картинку на скрытой панели, после чего отобразит панель с картинкой в оригинальном размере.

При клике на любом месте показанной панели с изображением, скрипт скроет данную панель и вы снова попадете на страницу.

Вместе с этой статьей читают: