Более гибкий и удобный thickbox
Darkarena
Новичок
: 9
: 15-02-2011


15-02-2011 07:01
Хочу разобраться со скриптом ресайза больших изображений товара.

По умолчанию они принимают значения параметра thickbox.

Это очень неудобно, если, например, есть оригинальное изображение 500x1000, то скрипт не только кропит его до значений thickbox (например, 900x900) но и добавляет белые поля, чтобы "выровнять" картинку.

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

Итак, задача 1: добавить возможность "обтекаемости" изображения.


Еще нужен так называемый двойной зум.

Т.е. есть значение thickbox например, 600x600. И, соответственно, все картинки товаров обрезаются до этих размеров.

Но часто требуется показать большое детальное изображение товара, например 1200х800, и сделать это лучше всего двойным зумом.

Т.е. при наведение на картинку 600х600, если исходник больше, вместо курсора показывается лупа, и при клике thickbox должен "разъезжаться" до оригинальных размеров изображения без всяких белых полей.
И сжиматься до предыдущего 600х600 при следующем клике.


Прошу всех, кто заинтересован и разбирается в престе, высказываться в этой теме.

 
  
YellowDuck


Профессионал
: 1054
: Ярославль
: 29-09-2009


16-02-2011 14:53
по 1 задаче, видимо нужно написать интеллектуальный скрипт кропа )))

Подготавливайте картинки в графическом редакторе, врядли малой кровью удастся автоматизировать этот процесс

Изображения thickbox самые большие, можно сделать их больше и использовать зум модуль. Но в модальном окне будет открываться картинка с максимальным разрешением.
 



Интернет-магазин товаров для детей yellowduck.ru
Хороший хостинг для Prestashop и не только one-hosting.ru
  
Darkarena
Новичок
: 9
: 15-02-2011


16-02-2011 18:56
имхо, кроп для самых крупных изображений вообще не нужен. то есть, должна быть опция - отключить кроп для второго thickbox если будет двойной зум.

Т.е. максимальный размер изображения останется таким, каким его залил пользователь. Ведь гораздо проще через, например, фотошоп прогнать всю папку с картинками на локальном компе если они уж очень большие, и автоматом ресайзнуть + оптимизировать + добавить резкости и уже готовыми залить их на хост.

Зум модуль - если Вы имеете ввиду JqZoom вместо thickbox, то в ряде случае это не очень удобное решение + тк это все-таки магазин, у клиента всегда должна быть возможность увидеть изображение целиком в макс разрешении и сохранить его себе на комп при желании несильно напрягаясь при этом.
Я пробовал Magic Zoom Plus - хороший модуль, но проблем с thickbox'ом он не решает.
 
  
Darkarena
Новичок
: 9
: 15-02-2011


16-02-2011 20:18
сейчас попробовал следующее: заменил часть сгенерированных изображений с белыми полями (900х900) оригинальными с разными разрешениями - thickbox обтекает изображение как и требуется, сохраняя поля и навигацию, даже в стилях ничего менять не надо.

Поэтому вопрос пока такой - как отключить регенератор?

Если просто удалить параметр thickbox - то не станет вообще крупных изображений товара. То есть физически-то они останутся на сервере, но по клику на товар - вылезут только поля thickbox'a с навигацией, а картинки никакой не будет. Как в этой цепочке загрузка картинок ->регенерция->назначение имен каритинкам и соответствие (small-medium-large) убрать часть процесса регенерации thickbox?


Сообщение отредактировано Darkarena 16-02-2011 21:23 ...
 
  
Darkarena
Новичок
: 9
: 15-02-2011


17-02-2011 21:02
продолжаю ковыряться с thickbox'ом

цель: чтобы в окне thickbox'a отображалось не сгенерированное престашопом изображение товара с белыми полями типа 10-52-thickbox.jpg, а оригинальное изображение вида 10-52.jpg благо все загружаемые картинки все-таки сохраняются в папке "p"со своим разрешением, но переименовываются по номеру товара и номеру картинки.

открываю в /themes/мой_шаблон/product.tpl и правлю код:
Код:
<a href="{$img_prod_dir}{$product->id}-{$image.id_image}-thickbox.jpg" rel="view-others" class="thickbox{if $smarty.foreach.thumbnails.first}shown{/if}">


на
Код:
<a href="{$img_prod_dir}{$product->id}-{$image.id_image}.jpg" rel="view-others" class="thickbox{if $smarty.foreach.thumbnails.first}shown{/if}">


т.е. просто заменяю ссылку c окончанием 10-52-thickbox.jpg на 10-52.jpg

теперь по клику открывается полноразмерное изображение в рамке thickbox
но при наведении на другие картинки в слайдере вместо 10-XX-large.jpg тоже почему-то появляются просто полноразмерные пиксы вида 10-XX.jpg и вылезает за рамки image-block

в файле themes/мой_шаблон/js/product.js

нашел такой код:

Код:
//update display of the large image
function displayImage(domAAroundImgThumb)
{
    if (!domAAroundImgThumb.hasClass('shown'))
    {
        if (domAAroundImgThumb.attr('href'))
        {
            var newSrc = domAAroundImgThumb.attr('href').replace('thickbox','large');



смена большой картинки (10-52-large.jpg) при наведении на соседнее превью в слайдере товара происходит при помощи класса 'shown'

я пробовал менять параметры replace('thickbox','large'); но это ничего не дало

Что нужно изменить в product.js чтобы при удалении окончания -thickbox.jpg из
product.tpl в image-block на станице товара также оставался large.jpg при наведении на соседнее превью?


Пока я вижу только такое решение: после каждого добавления товара через фтп или шел переименовывать с заменой изображения в папке img/p/10-XX.jpg в img/p/10-XX-thickbox.jpg - тогда все показывается как надо.


Сообщение отредактировано Darkarena 17-02-2011 22:05 ...