1

Стоит fancybox сейчас. Необходим плагин для формы подписки. При клике на ссылку - всплывающее окно с формой. Но не устраивает 2 фактора: скорость загрузки (грузит где-то секунд 6) и местоположение (всегда по центру (сильно не ковырялся, вроде перемещать нельзя)). Вопрос следующий: будет ли эффективнее запихнуть форму подписки в display:none и при клике по ссылке с помощью position: absolute выводить ее?

2 ответа 2

2

У fancybox есть есть параметры topRatio и leftRatio от 0 до 1 ( по умолчанию 0.5 ), отвечающие за положение. Если у вас на сайте есть необходимость использовать fancybox только для нескольких всплывающих окон, то в таком случае можно написать небольшой скрипт, который будет это делать вместо плагина. P.s. Сколько работал с fancybox, но чтоб 6 секунд грузился - никогда. Медленный интернет?

6
  • topRatio и leftRatio от 0 до 1 ( по умолчанию 0.5 )- это относительно окна браузера? Можно относительно кликаемого объекта? И можно ли поменять прямоугольную форму выдачи на свой рисунок? 19 сен 2013 в 8:32
  • Относительно viewport'а. Относительно объекта не знаю как. Форму можно поменять через стили. Также есть возможность задать свой шаблон вывода fancybox через параметр tpl ( почитать можно тут fancyapps.com/fancybox ). 19 сен 2013 в 8:59
  • Может долго грузит из-за того, что smart-responder сам по себе долгий? Fancybox открывает другую html страницу. Как ее можно заранее подгрузить? 19 сен 2013 в 9:16
  • 1
    По аяксу закгрузить html в невидимый блок, а потом при вызове fancybox указать этот блок. 19 сен 2013 в 9:19
  • Но тогда нагрузка упадет на главную? Что тоже не оч хорошо 20 сен 2013 в 7:20
1

Да. Так будет эффективнее. Вот пример кода (я заменил файл slimbox.js на mootools на самописный lightbox на jQuery):

html:

<div class="custom-lightbox" style="display: none;">
    <a href="#" class="lightbox-close">X</a>
    <div class="lightbox-img-container"></div>
    <a href="#" class="lightbox-nav lightbox-nav-left"></a>
    <a href="#" class="lightbox-nav lightbox-nav-right"></a>
</div>

<div class="custom-lightbox-overlay" style="display: none;"></div>

js:

;
(function ($) {
    $(document).ready(function () {

        var context = $('.gallery'),
            lightbox = $('.custom-lightbox'),
            overlay = $('.custom-lightbox-overlay'),
            container = $('.lightbox-img-container', lightbox),
            closeButton = $('.lightbox-close', lightbox),
            navLeft = $('.lightbox-nav-left', lightbox),
            navRight = $('.lightbox-nav-right', lightbox),
            currentLink = null,
            containerDimensions = {
                width: 0,
                height: 0
            };

        closeButton.click(function (e) {
            e.stopPropagation();
            hideLightbox();
            return false;
        });

        overlay.click(function () {
            hideLightbox();
        });

        function hideLightbox() {
            lightbox.fadeOut(1000, function () {
                overlay.hide();
            });         
        }

        $('.pagination-page a', context).click(function () {

            var href = $(this).attr('href'),                
                img = new Image();

            currentLink = $(this);
            img.src = href;

            img.onload = function () {
                lightbox.css({
                    'margin-left': parseInt(-(img.width / 2)),
                    'margin-top': parseInt(-(img.height / 2))
                });

                containerDimensions.width = parseInt(img.width);
                containerDimensions.height = parseInt(img.height);

                container.empty();
                container.append(img);

                overlay.show();
                lightbox.fadeIn(1000);
            }

            return false;
        });

        /* BUTTONS */
        navLeft.click(function () {

            var page = $('pagination-page:visible', context),
                current = currentLink,
                prev = current.prev(),
                href = prev.attr('href'),
                newImage = new Image();

            if (/jpg|jpeg|png|gif/.test(href)) {
                newImage.src = href;
                container.width(containerDimensions.width);
                container.height(containerDimensions.height);
                container.empty();              
            } else {
                return;
            }

            newImage.onload = function () {

                container.css({
                    'width': 'auto',
                    'height': 'auto'
                });

                lightbox.css({
                    'margin-left': parseInt(-(newImage.width / 2)),
                    'margin-top': parseInt(-(newImage.height / 2))
                });

                containerDimensions.width = parseInt(newImage.width);
                containerDimensions.height = parseInt(newImage.height);

                container.append(newImage);
                currentLink = prev;             
            }

        });

        navRight.click(function () {

            var current = currentLink,
                next = current.next(),
                href = next.attr('href'),
                newImage = new Image();

            if (/jpg|jpeg|png|gif/.test(href)) {
                newImage.src = href;
                container.width(containerDimensions.width);
                container.height(containerDimensions.height);
                container.empty();
            } else {
                return;
            }

            newImage.onload = function () {

                container.css({
                    'width': 'auto',
                    'height': 'auto'
                });

                lightbox.css({
                    'margin-left': parseInt(-(newImage.width / 2)),
                    'margin-top': parseInt(-(newImage.height / 2))
                });

                containerDimensions.width = parseInt(newImage.width);
                containerDimensions.height = parseInt(newImage.height);

                container.append(newImage);
                currentLink = next;
            }

        });

    });
})(jQuery);

В случае с формой все гораздо проще.

Ваш ответ

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

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