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

Вижу восприятие реалей разделяется - это хорошо что есть варианты.
А мне-то всего (то) нужно, что бы при наведении на картинку в опциях, без кликов по опциям - появлялась картинка оригинала этой опции (оригинал). Не к чему модальные окна. Кликая по картинке (в опциях 40х40 пикс) посетитель (конечно - же) посмотрит полюбуется, НО, забудет что хотел - так как много событий происходит виртуального плана - закроет эту страницу (сайт) и будет искать то что по проще и не так его отвлекает по мелочам. Это же (я думаю) итак всем понятно. Чем меньше отвлекающих наворотов - тем быстрее сделается выбор и Вы не собьете с мысли основной поток (будущих потенциальных) покупателей. Зачем, когда клиент созрел отвлекать его эфектами такими как модальные окна, не нужно его на этом этапе тормозить... Как то так - по другому в убыток.

 

не разбавляйте пожалуйста тему вопросами не по теме!

 

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

 

Обновитесь, зачем вы подвергаете себя риску?

HTML:

#fancybox-thumbs ul {
    position: relative;
    list-style: none;
    padding: 0;
    left: 0 !important;
    right: 0 !important;
    margin: auto;
}

 

Я вас спрашивал какого размера должна быть картинка при наведении?
Вы хотите чтобы она еще не была размыта, это можно добиться, но есть 2 варианта, один оптимзированный под скорость загрузки, а другой нет.

 

- Что это значит подвергаете себя риску?
Картинки будут размером 200х200 (примерно)

 

Это для @vikaharkov

Ок.
Идете в папку catalog\controller\product\ и редактируете через notepad++ product.php
Находим такой блок:

PHP:

$product_option_value_data[] = array(
    'product_option_value_id' => $option_value['product_option_value_id'],
    'option_value_id'         => $option_value['option_value_id'],
    'name'                    => $option_value['name'],
    'image'                   => $this->model_tool_image->resize($option_value['image'], 50, 50),
    'price'                   => $price,
    'price_prefix'            => $option_value['price_prefix']
);

И добавляем в него одну строчку, чтобы выглядел так:

PHP:

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

Далее изменяем визуальную часть, идем в catalog\view\theme\default\название темы\product\ и редактируем product.tpl
Находим такой блок:

PHP:

<?php if ($option['type'] == 'image') { ?>
    <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
        <label class="control-label"><?php echo $option['name']; ?></label>
        <div id="input-option<?php echo $option['product_option_id']; ?>">
            <?php foreach ($option['product_option_value'] as $option_value) { ?>
                <div class="radio">
                    <label>
                        <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                        <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" /> <?php echo $option_value['name']; ?>
                        <?php if ($option_value['price']) { ?>
                            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                        <?php } ?>
                    </label>
                </div>
            <?php } ?>
        </div>
    </div>
<?php } ?>

И редактируем его чтобы выглядел так:

PHP:

<?php if ($option['type'] == 'image') { ?>
    <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
        <label class="control-label"><?php echo $option['name']; ?></label>
        <div id="input-option<?php echo $option['product_option_id']; ?>">
            <?php foreach ($option['product_option_value'] as $option_value) { ?>
                <div class="radio">
                    <label>
                        <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                        <img data-src="<?php echo $option_value['scale_image']; ?>" src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" /> <?php echo $option_value['name']; ?>
                        <?php if ($option_value['price']) { ?>
                            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                        <?php } ?>
                    </label>
                </div>
            <?php } ?>
        </div>
    </div>
    <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>
<?php } ?>

Это оптимизированный вариант

 

solunski.d, живите долго и в радость! Благодарю!

Но обрадую вас и всех заинтересовавшихся, шо это ещё не конец. Недостаточно просто установить новый фотоскрипт (этот или какой другой) и беззаботно наслаждаться им. Нужно позаботиться об удалении стандартного, но морально устаревшего опенкартовского Magnificа. Иначе будут косяки вылазить не только в Консоли, но и на экране у посетителей с другими браузерами (от того, шо работают два скрипта, которые оба выводят одну и ту же картинку). Этим (искоренением Magnificа) щас и займёмся...

1. Заходим в файл: catalog/controller/product/product.php
Находим в нём поиском строчки со словом "magnific" (там две строки с этим словом - 241 и 242) и блокируем эти строчки (некоторые рекомендуют только заменить путь в них к новых файлам, но вот в данном случае неясно, на какой путь менять, потому я их просто блокирую - но не призываю делать, как я, а показываю лишь дорогу)

2. Заходим в файл: catalog/view/theme/default/template/product/product.tpl
Спускаемся в самый низ и находим там скриптовый блок со словом "magnific"

Код:

$(document).ready(function() {
   $('.thumbnails').magnificPopup({
...
...

Коментируем весь блок (можно удалить, но вдруг шо-то пойдёт не так...)
Кстати, сюда же нужно и вставить скриптовый блок от фотоскрипта (можно на странице его оставить, в head, но слишком много там будет, а можно сюда вставить).

P.S. Я уже поняла, шо ТС остановился на каком-то своём выборе фотовыводилки, и не обязательно на этом скрипте. Но коль мы затронули в теме разные варианты систем вывода фотографий, то негоже бросать их отработку на половине пути, вот потому и дана тут мелкая, но существенная деталь, заканчивающая процесс замены скрипта. Иначе это будет неоконченный огрызок в теме.

 

Скрипт хорош, но вот меня терзают смутные сомнения - шо это может быть? До него в консоли такого не появлялось.


Это ссыль на ресурс, принадлежащий компаниям Oracle and Java

 

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

 

Это уже не по теме, но на странице продукта есть в низу ссылки поделиться и перечесляется список соц. сетей, это скрипт по умолчанию в движке и никакого отношения к fancybox не имеет. То что у вас не работает, это не означает что проблема в скрипте, проблема как раз таки в вашем браузере. В данном мире есть только Chrome,Firefox,Opera и IE, а все остальное барахло и мусор.

 

Скажу вам я так: "ВЫ слишком много думаете, слишком."
Я дал полное решение, JavaScript будет работать с библиотекой jQuery, а все что касается PHP сценария, то я изменения проводил на версии 2.x и выше, так что достаточно сделать как я описал и все будет работать. И никаких скрытых личных сообщений, кроме как о помощи не было.

 

Выше не получается, в версии 2.3.0.2 такого блока

в файле: catalog/view/theme/default/template/product/product.tpl
не наблюдается

 

Нету ибо там более универсальный подход

PHP:

<?php if ($option_value['image']) { ?>
    <img data-src="" src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" />
<?php } ?>

Достаточно добавить data-src="" а внутри ковычек вывести scale_image

 

Там два таких блока.
Один в div class="radio" (стр 200)
Второй в div class="checkbox" (стр 221)
В оба добавлять?
И непонятно теперь, внутри каких скобок выводить scale_image

 

Опечатался, да в обоих случаях, внутри скобок вставляем вывод переменной

 

Кхе-кхе, внутри скобок или внутри кавычек? (сбиваюсь в догадках - там же есть кавычки пустые в data-src="", а вот скобок не вижу, в скрипте, што ли...)

 

1) в product.php - из папки: /catalog/controller/product - поставил строку:
'scale_image' => $this->model_tool_image->resize($option_value['image'], 200, 200),
2) в product.tpl - из папки: /catalog/view/theme/default/template/product - вставил скрипт (после третьего закрывающего </div>, перед <?php } ?>)
<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>
- Это все в исходном дефолтном шаблоне, но не хочет (и он) работать что бы показывать при наведении на опции увеличенное изображение.

 

- Вы уже пробовали ставить это решение?
Встает вопрос - как (опять же) загнать оригинал картинки в опции, что бы посредством transform выводить большего размера изображение? Иначе (то) не как не вывести его таким методом.
Там такой код (стоит):
img.img.left{ float:left; margin:5px 15px 5px 0; max-height: 320px; max-width: 320px; }
img.img.left:hover{ transform:scale(2) translate(70px, 30px); transition: all 0.3s linear 0.3s; }

 

Вы не до конца все поставили, а как же указать изображению атрибут data-src?