Jump to content

[хак] Всплывающие изображения


Recommended Posts

На одном из моих проектов заказчик попросил сделать на блоке "Новинки" всплывающие изображения.
Чтобы было видно картинки и других товаров, а не только двух.

Решил запостить тут. Может кому нужно будет.:)

Итак.
ШАГ - 1
---------
Качаем архивчик тут.


ШАГ - 2
---------
Далее из него берем один файл - main.js (т.к. этот хинт jquery)
И копируем его в папку js/jquery/ (не в шаблоне. в корне PS)


ШАГ - 3
---------
Далее открываем файл - themes/ваш шаблон/header.tpl
Ищем подключение js/jquery/jquery.easing.1.3.js
Ниже подключаем js/jquery/main.js


ШАГ - 4
---------
Далее открываем файл - themes/ваш шаблон/css/global.css

В самый низ вставляем

#screenshot{
   position:absolute;
   border:1px solid #ccc;
   background:#333;
   padding:5px;
   display:none;
   color:#fff;
   /* text-align:left; */
}




ШАГ - 5
---------
Открываем файл - modules/blocknewproducts/blocknewproducts.tpl

Ищем

></pre>
<dl>{$product.name}{$product.description_short|strip_tags:'UTF-8'|truncate:50}



Заменяем на

></pre>
<dl>{$product.name}{$product.description_short|strip_tags:'UTF-8'|truncate:50}



ВСЕ.:)

P.S. Размер изображения можно именить. Все закачиваемые картинки копируются в разных размерах
1-1-small.jpg, 1-1-medium.jpg, 1-1-home.jpg, 1-1-large.jpg, 1-1-thickbox.jpg, 1-1.jpg.(по возрастанию)
Я поставил home (такой вывод на главной и в просмотрах списков товара).

rel="{$img_prod_dir}{$product.id_image}-home.jpg"



Можно добавить и описание в выводе.
Для этого
Ищем

title="{$product.name}"


Заменяем на

title="{$product.name}
{$product.description_short|strip_tags:'UTF-8'|truncate:50}"


Длина описания как и положено настраивается тут

truncate:50



Тестировал в Opera 9.5, FireFox 3.0, IE 7.

1368_JMqivyEgFWN83DAVh83x_t

Link to comment
Share on other sites

  • 4 months later...

Сделал все как написано. Но работает только в IE7 :(.
В Google Chrome и Firefox 3.0.4 при наведении мышкой на линк картинка появляется но в самом низу страницы и без рамки, такое впечатление что не применяется секция "CSS screenshot". Немогу понять в чем дело. Помогите плиз...

Link to comment
Share on other sites

Спасибо за щедрость! Есть ведь люди!

Хотелось бы в живую посмотреть, может ссылку на проэкт оставите!? И интересно, с ОПЕРОЙ как будет работать?

Link to comment
Share on other sites

  • 7 months later...
Спасибо Bad Boy, за [хак]!!!


Уважаемый Zuzul!
Подскажите, плз - у Вас на сайте (который Мега-шоп) присутствует крайне любопытное окошко с опцией он-лайн консультации - это Вы сами написали или оно где-то уже было?

Заранее спасибо за ответ)))
Link to comment
Share on other sites

Это мне ПриватБанк посоветовал когда я подписывал договор интернет эквайринга [http://www.siteheart.com/]

В смысле посоветовал? Идею подал? Таки да, идея супер!
А вот исполнение чье - Ваше собственное?


Нет. Я же адрес дал указал [http://www.siteheart.com/]
На самом деле подобных систем много, для примера вот еще один адрес [http://www.livezilla.net/home/]
Я остановился на siteheart потому чта там интегрирована возможность приема платежей онлайн.
Link to comment
Share on other sites

Нет. Я же адрес дал указал [http://www.siteheart.com/]
На самом деле подобных систем много, для примера вот еще один адрес [http://www.livezilla.net/home/]
Я остановился на siteheart потому чта там интегрирована возможность приема платежей онлайн.


Упс))) Сорри, протупил)))

Большое спасибо за ответ!)))))
Link to comment
Share on other sites

  • 5 months later...
Сделал все как написано. Но работает только в IE7 :(.
В Google Chrome и Firefox 3.0.4 при наведении мышкой на линк картинка появляется но в самом низу страницы и без рамки, такое впечатление что не применяется секция "CSS screenshot". Немогу понять в чем дело. Помогите плиз...


Не подскажете как решили проблему??? у меня такая же песня, что то не получается? :(
Заранее спасибо!
Link to comment
Share on other sites

Сделал все как написано. Но работает только в IE7 :(.
В Google Chrome и Firefox 3.0.4 при наведении мышкой на линк картинка появляется но в самом низу страницы и без рамки, такое впечатление что не применяется секция "CSS screenshot". Немогу понять в чем дело. Помогите плиз...


Не подскажете как решили проблему??? у меня такая же песня, что то не получается? :(
Заранее спасибо!



Все!, Сорри, сам уже разобрался, когда начал делать второй раз! )))
Все дело в global.css, предлагаемый код лучше вставлять не в самом конце, а по-раньше.
И тогда будет все ОК отображаться в мозиле и опере.
Всем удачи! :)
Link to comment
Share on other sites

×
×
  • Create New...