Jump to content
Sign in to follow this  
Bad_Boy

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
Спасибо Bad Boy, за [хак]!!!


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

Заранее спасибо за ответ)))

Share this post


Link to post
Share on other sites

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

Share this post


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

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

Share this post


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

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


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

Share this post


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


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

Большое спасибо за ответ!)))))

Share this post


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


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

Share this post


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


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



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

Share this post


Link to post
Share on other sites
Sign in to follow this  

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More