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

Sylon написал(а):
А это значит, что библиотека не подходит jquery 1.12? Для просмотра ссылки Войди или Зарегистрируйся
Нажмите для раскрытия...
Пишет, что не может прочитать свойство. Не хватает функции. Надо брать все библиотеки для фэнсибокс с офф.сайта и к себе на хост грузить. Прописать к ним пути и подгружать. Как, в посте выше по ссылке, там все написано.
 
Последнее редактирование:
t0wer написал(а):
Эта ссылка в мой мозг)))) Прикинул хрен к носу и сделал правку. Вот и весь мануал)
Нажмите для раскрытия...
:) Скажите, пожалуйста, мне тогда здесь нужно дописать классы?
Код: 
<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; ?>
 
Sylon написал(а):
:) Скажите, пожалуйста, мне тогда здесь нужно дописать классы?
Код: 
<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; ?>
Нажмите для раскрытия...
Я Вам все правки уже сделал и для этого файла. В моем посте на странице 2 (Для просмотра ссылки Войди или Зарегистрируйся) под спойлером PHP. Вам только скопировать и заменить код. Не забудьте только бэкап сделать на всякий пожарный.
 
Sylon написал(а):
А это значит, что библиотека не подходит jquery 1.12? Для просмотра ссылки Войди или Зарегистрируйся
Нажмите для раскрытия...

У тебя fancybox не совместим с этой версией jquery, поэтому и не работал код выше. Надо обновить fancybox или использовать jquery 1.8.3, в которой не удалили свойство browser. Или отдельно подключить Для просмотра ссылки Войди или Зарегистрируйся
 
frei написал(а):
У тебя fancybox не совместим с этой версией jquery, поэтому и не работал код выше. Надо обновить fancybox или использовать jquery 1.8.3, в которой не удалили свойство browser. Или отдельно подключить Для просмотра ссылки Войди или Зарегистрируйся
Нажмите для раскрытия...
Чтобы не вешать лишних скриптов и не притормаживать сайт получается нужно найти более современный fancybox? Насколько я знаю это была последняя версия.
 
Sylon написал(а):
Чтобы не вешать лишних скриптов и не притормаживать сайт получается нужно найти более современный fancybox? Насколько я знаю это была последняя версия.
Нажмите для раскрытия...

У тебя 2.1.3 и она не последняя. В последней они поправили эту проблему. Для просмотра ссылки Войди или Зарегистрируйся

jquery-browser-plugin - небольшой скрипт, можешь и его подключить, но это больше костыль.
 
t0wer написал(а):
Вроде бы нашел решение. Чтобы все работало: и то, и другое. Уже правленный код.
HTML: 
// 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 .fancybox').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('fancybox');

        ProductMediaManager.destroyZoom();

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

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

            imageGallery.find('.fancybox').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('.fancybox').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(".fancybox.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: 
<?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="fancybox 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="fancybox"
                 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'); ?>
Не забываем дописать в код загрузку скриптов фэнсибокс, стилей и в тело JS загрузчик. Как написано Для просмотра ссылки Войди или Зарегистрируйся. Если уже есть, то смотрим, чтобы это было правильно сделано.
Нажмите для раскрытия...
Сегодня проверил, подставил все записи, но к сожалению что-то спуталось и работает не корректно Для просмотра ссылки Войди или Зарегистрируйся Единственно убрал ошибки которые сыпались, но в целом неправильное взаимодействие скриптов и обработчика. Что-то там с галереей не то и странный нюанс, что экран дергается, когда картинка открывается, а потом при закрытии. И по логике в принципе этот вариант тоже самое если добавить $(".image-gallery").fancybox();
 
Последнее редактирование:
Sylon написал(а):
Сегодня проверил, подставил все записи, но к сожалению что-то спуталось и работает не корректно Для просмотра ссылки Войди или Зарегистрируйся Единственно убрал ошибки которые сыпались, но в целом неправильное взаимодействие скриптов и обработчика. Что-то там с галереей не то и странный нюанс, что экран дергается, когда картинка открывается, а потом при закрытии.
Нажмите для раскрытия...
У вас физически не должно работать не так. Поменены мной только стили. По факту при клике на картинку должен срабатывать фэнсибокс и открывать свою галерею. Вот и все.
Смотрите свои правки, которые делали до этого или чего-то недоделали. Откатитесь на начало (без правок) и поправьте как я писал под спойлер. Если на что-то ругается, то нужно углубленно смотреть.
 
t0wer написал(а):
У вас физически не должно работать не так. Поменены мной только стили. По факту при клике на картинку должен срабатывать фэнсибокс и открывать свою галерею. Вот и все.
Смотрите свои правки, которые делали до этого или чего-то недоделали. Откатитесь на начало (без правок) и поправьте как я писал под спойлер. Если на что-то ругается, то нужно углубленно смотреть.
Нажмите для раскрытия...
Дело в том, что я взял чистые файлы и копипастом вставил код. Та видать проблема в переплете скрипта elevatezoom и прописанной галереи в обработчике. Получается от того, что поменялись классы, суть не изменилась. Это тоже самое если оставить $(".image-gallery").fancybox();
 
Последнее редактирование:
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху