Сложности с установкой FancyBox.

Sylon

Постоялец
Регистрация
1 Мар 2015
Сообщения
322
Реакции
153
Прошу помочь понять как грамотно подключить скрипт открытия полно-размерного фото jquery.fancybox.pack? Для просмотра ссылки Войди или Зарегистрируйся Сложность в том, что на примере установленного зума (jquery.elevateZoom-3.0.8.min), сценарий для запуска пишется в дополнительном скрипте app.js (код ниже) Для начала нужно отключить зум, и каким то образом вставить сценарий нового скрипта FancyBox. Буду признателен любым подсказкам, как подключить новый скрипт так, чтобы работала галерея и листание.
Сайт на Magento Для просмотра ссылки Войди или Зарегистрируйся Зум отключил, закомментировав image.elevateZoom();.

Код:
// PDP - image zoom - needs to be available outside document.ready scope
// ==============================================

var ProductMediaManager = {
    IMAGE_ZOOM_THRESHOLD: 20,
    imageWrapper: null,

    destroyZoom: function() {
        $j('.zoomContainer').remove();
        $j('.product-image-gallery .gallery-image').removeData('elevateZoom');
    },

    createZoom: function(image) {
        // Destroy since zoom shouldn't be enabled under certain conditions
        ProductMediaManager.destroyZoom();

        if(
            // Don't use zoom on devices where touch has been used
            PointerManager.getPointer() == PointerManager.TOUCH_POINTER_TYPE
            // Don't use zoom when screen is small, or else zoom window shows outside body
            || Modernizr.mq("screen and (max-width:" + bp.medium + "px)")
        ) {
            return; // zoom not enabled
        }

        if(image.length <= 0) { //no image found
            return;
        }

        if(image[0].naturalWidth && image[0].naturalHeight) {
            var widthDiff = image[0].naturalWidth - image.width() - ProductMediaManager.IMAGE_ZOOM_THRESHOLD;
            var heightDiff = image[0].naturalHeight - image.height() - ProductMediaManager.IMAGE_ZOOM_THRESHOLD;

            if(widthDiff < 0 && heightDiff < 0) {
                //image not big enough

                image.parents('.product-image').removeClass('zoom-available');

                return;
            } else {
                image.parents('.product-image').addClass('zoom-available');
            }
        }

        image.elevateZoom();
    },

    swapImage: function(targetImage) {
        targetImage = $j(targetImage);
        targetImage.addClass('gallery-image');

        ProductMediaManager.destroyZoom();

        var imageGallery = $j('.product-image-gallery');

        if(targetImage[0].complete) { //image already loaded -- swap immediately

            imageGallery.find('.gallery-image').removeClass('visible');

            //move target image to correct place, in case it's necessary
            imageGallery.append(targetImage);

            //reveal new image
            targetImage.addClass('visible');

            //wire zoom on new image
            ProductMediaManager.createZoom(targetImage);

        } else { //need to wait for image to load

            //add spinner
            imageGallery.addClass('loading');

            //move target image to correct place, in case it's necessary
            imageGallery.append(targetImage);

            //wait until image is loaded
            imagesLoaded(targetImage, function() {
                //remove spinner
                imageGallery.removeClass('loading');

                //hide old image
                imageGallery.find('.gallery-image').removeClass('visible');

                //reveal new image
                targetImage.addClass('visible');

                //wire zoom on new image
                ProductMediaManager.createZoom(targetImage);
            });

        }
    },

    wireThumbnails: function() {
        //trigger image change event on thumbnail click
        $j('.product-image-thumbs .thumb-link').click(function(e) {
            e.preventDefault();
            var jlink = $j(this);
            var target = $j('#image-' + jlink.data('image-index'));

            ProductMediaManager.swapImage(target);
        });
    },

    initZoom: function() {
        ProductMediaManager.createZoom($j(".gallery-image.visible")); //set zoom on first image
    },

    init: function() {
        ProductMediaManager.imageWrapper = $j('.product-img-box');

        // Re-initialize zoom on viewport size change since resizing causes problems with zoom and since smaller
        // viewport sizes shouldn't have zoom
        $j(window).on('delayed-resize', function(e, resizeEvent) {
            ProductMediaManager.initZoom();
        });

        ProductMediaManager.initZoom();

        ProductMediaManager.wireThumbnails();

        $j(document).trigger('product-media-loaded', ProductMediaManager);
    }
};

$j(document).ready(function() {
    ProductMediaManager.init();
});

А вот так выглядит файл с разметкой, отвечающий за вывод медиа на странице продукта:
Код:
<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
?>
<div class="product-image product-image-zoom">
    <div class="product-image-gallery">
        <img id="image-main"
             class="gallery-image visible"
             src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>"
             alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>"
             title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" />

        <?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
            <?php if ($this->isGalleryImageVisible($_image)): ?>
            <img id="image-<?php echo $i; ?>"
                 class="gallery-image"
                 src="<?php echo $this->getGalleryImageUrl($_image); ?>"
                 data-zoom-image="<?php echo  $this->getGalleryImageUrl($_image); ?>" />
            <?php endif; ?>
        <?php $i++; endforeach; ?>
        </script>
    </div>
</div>

<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <h2><?php /* echo $this->__('More Views') */ ?></h2>
    <ul class="product-image-thumbs">
    <?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
        <?php if ($this->isGalleryImageVisible($_image)): ?>
        <li>
            <a class="thumb-link" href="#" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>" data-image-index="<?php echo $i; ?>">
                <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>"
                     width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
            </a>
        </li>
        <?php endif; ?>
    <?php $i++; endforeach; ?>
    </ul>
</div>
<?php endif; ?>

<?php echo $this->getChildHtml('after'); ?>
 
Последнее редактирование:
Подключи скрипт fancybox для страницы как jquery.elevateZoom-3.0.8.min.

Дальше можешь в js файле или прямо в шаблоне в тэге script:

Немного не так, на примере цикла вывода картинок:

Код:
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
        <?php if ($this->isGalleryImageVisible($_image)): ?>
        <a class="fancybox" href="<?php echo  $this->getGalleryImageUrl($_image); ?>">
            <img id="image-<?php echo $i; ?>"
                 class="gallery-image"
                 src="<?php echo $this->getGalleryImageUrl($_image); ?>" />
            <?php endif; ?>
        </a>
<?php $i++; endforeach; ?>

<script type="text/javascript">
$(document).ready(function(){
    $(".fancybox").fancybox();
});
</script>
 
Последнее редактирование:
Подключи скрипт fancybox для страницы как jquery.elevateZoom-3.0.8.min.

Дальше можешь в js файле или прямо в шаблоне в тэге script:

Код:
$(document).ready(function(){
    $(".gallery-image").fancybox();
});
Так сразу и пробовал делать, он уже подключен, там происходят конфликты и ошибки, получается не так всё просто. Прописано поведение галереи для jquery.elevateZoom-3.0.8.min. а теперь нужно, чтобы она работала только уже в рамках скрипта fancybox
 
Так сразу и пробовал делать, он уже подключен, там происходят конфликты и ошибки, получается не так всё просто. Прописано поведение галереи для jquery.elevateZoom-3.0.8.min. а теперь нужно, чтобы она работала только уже в рамках скрипта fancybox

Если zoom не нужен, то лучше вообще его удалить и подключить fancybox отдельно.
 
Если zoom не нужен, то лучше вообще его удалить и подключить fancybox отдельно.
Зум отключил, но как в коде выше видно, что для этого скрипта прописана галерея. По идее можно вообще тогда весь этот блок удалить в скрипте app.js Но в Фансибокс нет галереи. Мне бы хотя бы оставить всё как есть и добавить только функцию клика по картинке и чтобы в открытой картинке можно было листать галерею. Но не знаю, как это внедрить.
 
elevateZoom также как и fancybox работают за счет JS обработчика и вложенного CSS.
У вас сейчас подгружаются два скрипта сразу
HTML:
<script type="text/javascript" src="http://ca99378.tmweb.ru/skin/frontend/rwd/default/js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js"></script>
<script type="text/javascript" src="http://ca99378.tmweb.ru/skin/frontend/rwd/default/js/lib/elevatezoom/jquery.fancybox.pack.js"></script>
Для начала вам бы стоило понять что за скрипты у вас подгружаются. Их там целая тьма.
Если грязно и быстро делать, то комментируете два скрипта выше и подгружаете скрипты отсюда:
Скрытое содержимое доступно для зарегистрированных пользователей!

Потом ручками убираете в коде Мадженто стили (какие, примерно, указано Для просмотра ссылки Войди или Зарегистрируйся) от elevateZoom и ставите стили для fancybox (как, указано Для просмотра ссылки Войди или Зарегистрируйся). В принципе должно заработать, если все правильно сделаете.
А по хорошему нужно разбираться, чистить код и приводить к нормальной работоспособности... чтобы лишнее не грузить.
 
Зум отключил, но как в коде выше видно, что для этого скрипта прописана галерея. По идее можно вообще тогда весь этот блок удалить в скрипте app.js Но в Фансибокс нет галереи. Мне бы хотя бы оставить всё как есть и добавить только функцию клика по картинке и чтобы в открытой картинке можно было листать галерею. Но не знаю, как это внедрить.

Тогда image.elevateZoom(); убирать не стоит, он инициализирует и галерею, и зум с fancybox. Можно посмотреть настройки у плагина отключения зума или спрятать элементы зума с помощью css.
 
elevateZoom также как и fancybox работают за счет JS обработчика и вложенного CSS.
У вас сейчас подгружаются два скрипта сразу
HTML:
<script type="text/javascript" src="http://ca99378.tmweb.ru/skin/frontend/rwd/default/js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js"></script>
<script type="text/javascript" src="http://ca99378.tmweb.ru/skin/frontend/rwd/default/js/lib/elevatezoom/jquery.fancybox.pack.js"></script>
Для начала вам бы стоило понять что за скрипты у вас подгружаются. Их там целая тьма.
Если грязно и быстро делать, то комментируете два скрипта выше и подгружаете скрипты отсюда:

Потом ручками убираете в коде Мадженто стили (какие, примерно, указано Для просмотра ссылки Войди или Зарегистрируйся) от elevateZoom и ставите стили для fancybox (как, указано Для просмотра ссылки Войди или Зарегистрируйся). В принципе должно заработать, если все правильно сделаете.
А по хорошему нужно разбираться, чистить код и приводить к нормальной работоспособности... чтобы лишнее не грузить.
В том-то и дело, что я грязно не хочу. Я пробовал удалить jquery.elevateZoom-3.0.8.min.js, но тогда перестаёт работать галерея снизу. Поэтому пришёл к выводу, что нужно оставить ее и уже вставить функцию для jquery.fancybox.pack.js По всем этим мануалам испробовал всё. Это не работает. Тут в том-то и дело переплетение jquery.elevateZoom-3.0.8.min.js с app.js, что не могу понять как грамотно воткнуть действие jquery.fancybox.pack.js в обработчик app.js А так стили и всё для него добавлено. Ну и в плане скриптов там как раз таки ясность полная, добавляется лишь Фансибокс для открытия полно-размерной картинки. Вся сложность как это его добавить в обработчик. Подскажите, пожалуйста.
 
Последнее редактирование:
Тогда image.elevateZoom(); убирать не стоит, он инициализирует и галерею, и зум с fancybox. Можно посмотреть настройки у плагина отключения зума или спрятать элементы зума с помощью css.
Тут проясню, как раз таки строчка image.elevateZoom(); отключает только зум и всё остальное работает и галерея в том числе. Не могу понять только как в этот код, что в app.js выше написан вставить поведение Фансибокса...:-(
 
Тут проясню, как раз таки строчка image.elevateZoom(); отключает только зум и всё остальное работает и галерея в том числе. Не могу понять только как в этот код, что в app.js выше написан вставить поведение Фансибокса...:-(

Странно, что она работает. Потому что на Для просмотра ссылки Войди или Зарегистрируйся она вроде как не работает. Ты же галерею отдельно не подключал?
 
Назад
Сверху