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

Вам нужно модальное окно с увеличенным изображением или тот же обьект увеличенный?
Zoomi ерунда

 

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

 

Насколько большое изображение вам нужно?

 

А это не?
http://xoops.ws/modules/web/article.php?storyid=18

Как по мне, то буду пробовать у себя. Там на странице работа картинок выглядит почти идеально. И без всяких модов да прочих штук.

 

Да, такого плана. Что бы так происходило увеличение, без модальных и прочих доп. окон. Навел - увеличилось, посмотрел - кликнул по опции (совершил заказ - этой опции). То что нужно!
Теперь вопрос по реализации в 2.2

 

Это обычный HTML и CSS, не важно какая версия движка.

 

Погодите, не гоните лошадей. Там немного не то, о чем читала тут в топике и исходя из ваших пожеланий. Там без клика оно работает. А другой вариант, вот тут он, он работает по клику, но в нём есть неприятный побочный эффект - при увеличении картинки она раздвигает строение страницы.

Т.е., первый вариант - картинка выскакивает над страницей, не портя верстку, но работает без кликов, а этот второй вариант работает по клику, но ломает структуру страницы (потом возвращает, канешна, но все же). Хотелось бы соеденить эти два кода, взяв от каждого только лучшее. Но тут нужен верстальщик...

Если мне не изменяет память, solunski.d - это вы вроде версткой занимаетесь, учились этому у хороших мастеров (вы же из Германии?)? Или это мелко для вашего уровня?

 

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

 

Это не так, Google понизит сайт в поисковой выдаче, если не будет оптимизации по скорости загрузки контента, что не является удобным для пользователя, следовательно уменьшения его релевантности

 

Ну, насколько знаю, Гугли обращает внимание на оптимизацию изображений. А они, естесно, должны быть оптимизированы. Про обязательность использовать миниатюры - пока не слышала.

P.S. И вааще, Гугли нам не указ

 

Правила похожие и у Яндекса, а так же мало кто будет ждать пока сайт загрузиться

 

Да я с вами согласна в принципе, но всё это - образная болтология. В реале методом тыка определять, чего оно там выйдет.

На странице 12 миниатюр или 12 картинок. Разница в килобайтах каких-то (не заставки же там для мониторов выкладываться будут).

P.S. А шо вы от другого вопроса уходите? Человек, возможно, согласился бы на взаимовыгодное сотрудничество, а вы молчите...

 

Я бы эти миниатюры выводил с помощью AJAX, лучше было бы.
Кажется что маленькое кол. но в месте уже 1мб)
К сожалению клиентов, наверное, я за ними не бегаю ибо у меня работа всегда есть)

 

Ясно. Но это и не работа скорее, а так, для спортивного интереса. Хотя, знаете, практически всем на Опенкарте этого не хватает. И если получилось бы прилично, то это уже как бы и заработок мог бы быть дополнительный... Одно дело коды ковырять, и совсем другое - на потоке сидеть (это я червячка закидываю, мож кто клюнет да в благодарность и со мной поделится реализацией)

 

И каков порядок встраивания этого скрипта в опенкарт?
1 - Прописываем стиль в css.
2 - Ложим JS скрипт в папку с др. скриптами.
3 - Теперь как в <div> поместить код и как именно это сделать? Что включить в это место? </div>\
Кто (то) может подсказать какие строчки включать в Дивы?

 

Какой скрипт используете?
Zoomie не используйте, ужасный скрипт.
Вот нормальный http://fancyapps.com/fancybox/#examples или можно использовать встроенный magnific popup.
Выберете, а далее я расскажу что и как делать

 

И даже работает в Опенкарт
Но, как и ожидалось, без дёгтя ну никак.

Вот оригинал фото товара на странице каталога и оно же, при наведении мышки



Проблемные моменты - увеличенное фото не выплывает за пределы рамочки, в которой лежит фото с товаром. Эта рамочка сдерживает и фотка увеличивается внутри неё.

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

На странице с товаром картина немного другая



Тут нижний край рамки почему-то не мешает, она за него выходит спокойно. А верхний край опенкартовской рамки всё также держит границы, не выпускает фотку. Но верхний край и не сильно-то мешает, там уже потолок, а вот есть необходимость с помощью CSS опустить всю фотку вниз.

 

Всё таки основная проблема в конструкции на CSS - это вывод той фотки, которая видна на странице, а это миниатюра, т.е., маленькая слишком. CSS увеличивает её, но качество дрянь. Если бы выводилась другая фотка, которая большая, основная, то вероятна был бы другой расклад.

 

Эти миниатюры открываются с помощью magnific popup и это не CSS, а создается всплывающие окно в которое подгружается картинка

 

Мальчики, вы ломаете все мои планы... Я ещё шапкой занимаюсь, а вынуждена следить за этой темой... Рыыы

Установила себе этот скрипт. Ничё так. Главное, он работает с моим стареньким привередливым браузером (ФФ) (стандартный фотоскрипт у меня не работает, а значит, может не работать и у клиентов).

Вот тока одна беда, вся надежда на solunski.d - подскажете, если знаете?

Под основной всплывающей фоткой выводятся прочие миниатюры, имеющиеся на странице. Но они бегают вправо-влево когда чередуются картинки. А хотелось бы, шоб они стояли по центру.

Вот так это выглядит





Как отцентрировать нижние миниатюры?
Полагаю, это в файле catalog/view/javascript/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.css
нужно сделать (где-то 17 строка #fancybox-thumbs ul думаю). Но и так, и так тыкала, ничё не вышло - то просто влево станет, то никак.