Опции - увеличение фотографий

Погодите, так он (скрипт) должен работать в паре с CSS или с чем? Ведь в стандартном варианте, без всяких измений в коде Опенкарта, картинка не увеличивается, а только открывается. А увеличивается пока что, только с помощью CSS, который я, к примеру, пока удалила. А ваш скрипт тоже не увеличивает картинку, а только меняет путь. Вот и непонятно, что будет увеливать картинку?

 

Его не сложно обязать выполнять команды - картинка оригинал - как есть прописывается в опциях (лучше по умолчанию как есть) после, для вывода картинки в опциях она уменьшается css(ом) и весь код опций оборачивается <div> и начинает работать на клик или на наведение - это решается в css файле что и как.... Нет сложности, есть не знание кодов. Вот и буду искать того кто поставит это решение что я написал (сценарий).

 

Я недавно это видел в темплейтмонстр в образце шаблонов, когда свой шаблон делал.
Мне это не нужно, у меня упор на тачскрины. Эра "мамонтов" уже уходит в деревни.
Сейчас даже пенсионеры с планшетами ездят в общественном транспорте!

 

Я к такому не был готов. Господи помоги!
Когда мы делали изменения в product.php мы добавили в массив дополнительное значение(ключ):

PHP:

$product_option_value_data[] = array(
    'image'                   => $this->model_tool_image->resize($option_value['image'], 50, 50),
    'scale_image'             => $this->model_tool_image->resize($option_value['image'], 200, 200),
);

А именно "scale_image".
Ниже перечисленная строка вызывает сценарий обработки изображения, это функция.
В ней сказано что возьми путь до изображения, которое храниться в свойстве(переменной) option_value['image'] и обрежь её на 200x200 в пикселях.

PHP:

$this->model_tool_image->resize($option_value['image'], 200, 200),

В ключ "scale_image" заноситься обработанное изображение, изображение создается когда вы посетили страницу продукта.

В файле product.tpl мы создали специальный атрибут "data-src". Нет, его не в спецификации HTML,CSS или других языках.
Простыми словами, в HTML чтобы текст сделать красным, нам достаточно приписать к тегу, специальный атрибут style="..."
В котором будет указано свойство color:red; , но data-src это атрибут который мы сами придумали. Раньше Валидатор разметки ругался что люди создавали свои атрибуты по той или иной причине, поэтому специально создали атрибут который начинается со слова data-, а все что идет после тире, это какая либо сущность придуманная нами, я взял src, так как это более наглядный и понятный для человека значение, то есть сокращенно - путь.
В итоге в участке product.tpl мы нашли место где происходит вывод изображения для опций и остается лишь добавить наш атрибут. В итоге мы получим (пример):

PHP:

<img data-src="" src="<?php echo $option_value['image']; ?>">

В путях картинки указана переменная в которой содержится путь до картинки.
Остается также и в атрибут data-src вставить путь до новой увеличенной картинки а именно переменную:

PHP:

<?php echo $option_value['scale_image']; ?>

В итоге в обычном атрибуте src указан путь до обычной картинки, а в data-src до увеличенной.

Ниже представленный скрипт написанный на JavaScript, но для простоты был использована библиотека jQuery которая превращает громоздкий JavaScript в короткий и более читабельный и понятный код, даже и для обычного начинающего программиста.
Надеюсь не надо объяснять как работает ниже представленный скрипт.

Код:

    <script>
        $('*[data-src]').hover(
            function() {
                scale_image = $(this).data('src');
                old_image = $(this).attr('src');
                $(this).attr('src', scale_image);

            }, function() {
                $(this).attr('src', old_image);
            }
        );
    </script>

 

Я понимаю к чему вы клоните, но тогда на странице будет несколько изображений 200x200 это плохо может сказаться на скорости загрузки страницы. Это не вариант. То что я сделал в PHP уже достаточно, а за визуальный вывод отвечает целиком файл формата TPL

 

Заставляет планшет качать тяжелое изображение и съедает весь трафик пользователя мобильного интернета,когда касаешься изображения опции?) или они изначально подгружаются?
Только я прикола не понимаю с этим скриптом в маленькое поле закачивается тяжелое изображение?

 

Он не будет съедать так как изображение подгружается в зависимости от события - которое выполняет человек, ну и во вторых оно имеет ограниченный размер, в данном случае 200x200. Это равно сильно тому что мы используем LazyLoad

 

Это не тяжелое, у меня 500 на 500 большое.

 

Ну и что, нет разницы, подгружается не сразу, а при событии и не все, а только конкретная.

 

В ЛС - дадите ссылочку посмотреть как работает Ваш сайт?

А что по размерам, каждый определяет что ему выводить - если ему конечно знакомы картинки, он(а) знает как с ними работать и подготовить нужную картинку для вывода. Или пользоваться графическими редакторами уже запрещено? (я наверное слишком, аж через чур умный - по этому и страдаю)

 

Вы читали пост http://forum.opencart-russia.ru/threads/opcii-uvelichenie-fotografij.3841/page-6#post-28303 ?

 

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

 

Все работает по способу solunski.d. Единственное, как вывести увеличенные фотки в центре экрана (не убирая миниатюры)?

 

И еще вопрос: сделал увеличение картинки с помощью скрипта jquery.hoverpulse.js.
Но есть проблема: при выводе картинки опций есть класс class="img-thumbnail", в котором прописано max-width=100%, в моем случае 100px, но при увеличении, надо, чтобы картинка по ширине стала 300px. Так вот надо сделать, чтобы при увеличении картинки, она вышла за пределы данного класса. Всю голову сломал. Подскажите плиз... Сайт на локалке, показать не смогу.

 

fancybox используй ну или другой плагин

 

не не.. в. 2х уже есть ... http://dimsemenov.com/plugins/magnific-popup/

 

Здравствуйте, Уважаемые.
Переискал все темы по увеличению фото в карточке товара. Подскажите пожалуйста, как можно сделать как здесь:
http://www.lamoda.ru/p/qe001ewnam47/clothes-qedlondon-plate/
Спасибо.

 

По увеличению фото здесь есть примеры: https://leonidmuzyka.com/3-imagesize/6karta.php
Но как их встраивать? я не профи... Может кто подскажет?

 

Сами вы вряд ли поставите, на этом сайте этот эффект написан в ручную, а не какой то плагин.
И то не совсем корректно сделали

Вам это не подойдет.

 

Жаль. Но есть хоть какой нибудь вариант? Типа такого: https://leonidmuzyka.com/3-imagesize/multizoom_2.1/demo.html
Нужно показать особенности в одежде (переплетение).
Спасибо.