Помощник
Здравствуйте, гость ( Вход | Регистрация )
Оптимизация превью в RC5 |
Loader |
2010-11-06, 15:51
Сообщение
#1
|
|
Профессионал Группа: Eleanor user Сообщений: 1 161 Регистрация: 2010-04-19 Репутация: нет Всего: нет |
Не секрет что библиотека wz_tooltip.js очень плохо работает в качестве предпросмотрщика изображений (В IE вызывает всплывающее окно "этот скрипт тормозит работу браузера", да и в других не показывает изображение с 1-го раза, требует повторного наведения на картинку).
Нашёл ей замену размером в 1193 байта, работает превосходно! (для сравнения: wz_tooltip.js - 36551 байт) Итак, скачиваем файл imagePreview.js из аттача, распаковываем и закидываем в папку js в корне сайта. Далее открываем файл classec/others/class_ownbb.php ищем строки: Цитата self::$jscripts[]='js/wz_tooltip.js'; $html='<a href="'.$params['file'].'" target="_blank" onmouseover="var sw=Math.round(screen.width*0.8);Tip(\'<img src="'.$params['file'].'" style="max-width:\'+sw+\'px" alt="" />\',BGCOLOR,\'#fff\')" onmouseout="UnTip()"><img src="'.$params['preview'].'"'.join('',$params_img).' /></a>'; Заменяем на: Цитата self::$jscripts[]='js/imagePreview.js'; $html='<a href="'.$params['file'].'" class="preview" target="_blank"><img src="'.$params['preview'].'"'.join('',$params_img).' /></a>'; Открываем любой файл стилей отсюда templates/Ваша тема/style/ и в конец добавляем: Цитата #preview{ position:absolute; border:2px solid #ffffff; background: #ccc; padding:5px; display:none; color:#; } Файл wz_tooltip.js сносим с огромной радостью! На этом всё! Сообщение отредактировал Loader - 2010-11-07, 8:29
Прикрепленные файлы
|
|
|
||
KeSSLeR |
2010-11-07, 0:47
Сообщение
#2
|
|
Любитель Группа: Eleanor user Сообщений: 483 Регистрация: 2010-02-11 Версия системы: RC5 Репутация: нет Всего: нет |
Показал бы на примере как это работает. Скрин там или чтонить такое.
|
|
|
||
Loader |
2010-11-07, 8:23
Сообщение
#3
|
|
Профессионал Группа: Eleanor user Сообщений: 1 161 Регистрация: 2010-04-19 Репутация: нет Всего: нет |
Да пожалуйста! Стандартное превью которое появляется при наведении курсора мыши, которое теперь стало просто реактивное и не тупит. Сообщение отредактировал Loader - 2010-11-07, 9:59 |
|
|
||
Loader |
2010-11-07, 10:20
Сообщение
#4
|
|
Профессионал Группа: Eleanor user Сообщений: 1 161 Регистрация: 2010-04-19 Репутация: нет Всего: нет |
Итак, способ номер 2
Основное отличие - в способе отображения картинки. Если в первом, который описан выше картинка отображается при наведении курсора мыши, то здесь она отображается только при клике мышкой. Скачиваем файл thickbox.rar из аттача, распаковываем и закидываем в папку js в корне сайта. Далее открываем файл classec/others/class_ownbb.php ищем строки: Цитата self::$jscripts[]='js/wz_tooltip.js'; $html='<a href="'.$params['file'].'" target="_blank" onmouseover="var sw=Math.round(screen.width*0.8);Tip(\'<img src="'.$params['file'].'" style="max-width:\'+sw+\'px" alt="" />\',BGCOLOR,\'#fff\')" onmouseout="UnTip()"><img src="'.$params['preview'].'"'.join('',$params_img).' /></a>'; Заменяем на: Цитата $html='<a href="'.$params['file'].'" class="thickbox" ><img src="'.$params['preview'].'"'.join('',$params_img).' /></a>'; Открываем файл index.php отсюда templates/Ваша тема/ и перед тэгом </head> добавляем: Цитата <script type="text/javascript" src="../js/thickbox.js"></script> Открываем любой файл стилей отсюда templates/Ваша тема/style/ и в конец добавляем: Цитата /* thickbox specific link and font settings */ #TB_window { font: 12px Arial, Helvetica, sans-serif; color: #333333; } #TB_secondLine { font: 10px Arial, Helvetica, sans-serif; color:#666666; } #TB_window a:link {color: #666666;} #TB_window a:visited {color: #666666;} #TB_window a:hover {color: #000;} #TB_window a:active {color: #666666;} #TB_window a:focus{color: #666666;} /* thickbox settings */ #TB_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; } .TB_overlayMacFFBGHack {background: url(../images/macFFBgHack.png) repeat;} .TB_overlayBG { background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; } * html #TB_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } #TB_window { position: fixed; background: #ffffff; z-index: 102; color:#000000; display:none; border: 4px solid #525252; text-align:left; top:50%; left:50%; } * html #TB_window { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } #TB_window img#TB_Image { display:block; margin: 15px 0 0 15px; } #TB_closeWindow{ height:25px; padding:11px 25px 10px 0; float:right; } #TB_load{ position: fixed; display:none; height:13px; width:208px; z-index:103; top: 50%; left: 50%; margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */ } * html #TB_load { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } Копируем приложенные изображения: loadingAnimation.gif в Сайт/images/ macFFBgHack.png в templates/Ваша тема/images/ На этом всё! Вот скрин того что получается: Сообщение отредактировал Loader - 2010-11-09, 9:17
Прикрепленные файлы
loadingAnimation.gif ( 5.75 килобайт )
Скачиваний: 222
thickbox.rar ( 3.64 килобайт ) Скачиваний: 35 macFFBgHack.png ( 207 байт ) Скачиваний: 200 |
|
|
||
KeSSLeR |
2010-11-07, 12:02
Сообщение
#5
|
|
Любитель Группа: Eleanor user Сообщений: 483 Регистрация: 2010-02-11 Версия системы: RC5 Репутация: нет Всего: нет |
Второй способ больше понравился. Нужно попробовать.
|
|
|
||
Loader |
2010-11-07, 12:30
Сообщение
#6
|
|
Профессионал Группа: Eleanor user Сообщений: 1 161 Регистрация: 2010-04-19 Репутация: нет Всего: нет |
Я тоже себе второй поставил |
|
|
||
NoIndex |
2010-11-07, 21:35
Сообщение
#7
|
|
Опытный Группа: Бета-тестеры Сообщений: 825 Регистрация: 2008-12-13 Из: Россия → Новосибирск Версия системы: RC5 Репутация: нет Всего: 24 |
Дык в 1.0 отказался Саша от wz_tooltip
|
|
|
||
Alexander |
2010-11-08, 2:52
Сообщение
#8
|
|
Eleanor developer Группа: Администраторы Сообщений: 5 262 Регистрация: 2008-11-11 Из: Николаев Версия системы: RC5 Репутация: нет Всего: 67 |
Loader, благодарю за ценную модификацию! (репа не работает, поэтому благодарю устно)
|
|
|
||
Loader |
2010-11-09, 9:35
Сообщение
#9
|
|
Профессионал Группа: Eleanor user Сообщений: 1 161 Регистрация: 2010-04-19 Репутация: нет Всего: нет |
Кстати, второй способ может намного больше чем просто отображение картинки! Полный перечень Здесь Пробовал сделать мини-галерею как там написано: Цитата <a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="Plant 1" /></a> <a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="Plant 2" /></a> <a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="Plant 3" /></a> <a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant4_t.jpg" alt="Plant 4" /></a> Но как только добавляю тэг "rel=" , то этот скрипт вообще перестаёт работать - появляется значёк загрузки, но изображение не грузится. Пример: http://pda-kino.net/page/test.html Почему это может быть? Сообщение отредактировал Loader - 2010-11-09, 11:05 |
|
|
||
scanread |
2011-07-12, 15:01
Сообщение
#10
|
|
Любитель Группа: Пользователи Сообщений: 227 Регистрация: 2011-07-02 Репутация: нет Всего: нет |
Loader, может потому, что картинки не с Вашего сайта идут?
И еще, там к примеру написано: Give each link element the same rel element and value. (Example: rel="gallery-plants") Сообщение отредактировал scanread - 2011-07-12, 15:03 |
|
|
||
Loader |
2011-07-12, 16:43
Сообщение
#11
|
|
Профессионал Группа: Eleanor user Сообщений: 1 161 Регистрация: 2010-04-19 Репутация: нет Всего: нет |
Они на моём сайте были. Что это значит? |
|
|
||
scanread |
2011-07-12, 18:30
Сообщение
#12
|
|
Любитель Группа: Пользователи Сообщений: 227 Регистрация: 2011-07-02 Репутация: нет Всего: нет |
Loader, чтобы я знал что оно значит Переводчик хреново это дело переводит и не понятно как бы Какое-то значение просит дать ему...а вот какое... без понятия.
|
|
|
||
Loader |
2011-07-12, 18:59
Сообщение
#13
|
|
Профессионал Группа: Eleanor user Сообщений: 1 161 Регистрация: 2010-04-19 Репутация: нет Всего: нет |
Я это заметил |
|
|
||
scanread |
2011-07-12, 22:07
Сообщение
#14
|
|
Любитель Группа: Пользователи Сообщений: 227 Регистрация: 2011-07-02 Репутация: нет Всего: нет |
Loader, а jQuery этого скрипта чего не подключен? О_о Вот и не работает.
thickbox.js thickbox-compressed.js ThickBox.css Подключить к той странице надо, с главной не подключает чего-то... Сообщение отредактировал scanread - 2011-07-12, 22:10 |
|
|
||
Loader |
2011-07-12, 23:24
Сообщение
#15
|
|
Профессионал Группа: Eleanor user Сообщений: 1 161 Регистрация: 2010-04-19 Репутация: нет Всего: нет |
Этот скрипт использует jQuery, а вот чтобы у него был свой jQuery - это сенсация какая-то! |
|
|
||
scanread |
2011-07-12, 23:52
Сообщение
#16
|
|
Любитель Группа: Пользователи Сообщений: 227 Регистрация: 2011-07-02 Репутация: нет Всего: нет |
Loader, пребидущий пост читаем мой. На странице, что ты тестируешь, эти два скрипта и вроде бы и цсс не подключен.... Проверь сам, я в исходнике не нашел...
|
|
|
||
Loader |
2011-07-13, 8:55
Сообщение
#17
|
|
Профессионал Группа: Eleanor user Сообщений: 1 161 Регистрация: 2010-04-19 Репутация: нет Всего: нет |
А зачем два-то? Там один просто thickbox.js а второй его сжатый вариант thickbox-compressed.js подключать надо один из них. А css у меня внутри другого файла. |
|
|
||
scanread |
2011-07-13, 11:10
Сообщение
#18
|
|
Любитель Группа: Пользователи Сообщений: 227 Регистрация: 2011-07-02 Репутация: нет Всего: нет |
Loader, да не важно, сжатый или не сжатый подключать. Дело в том, что на странице теста ни один ни другой не подключен, и цсс так же не подключен. Потому и не работает. Я у себя на локалке оттестировал - все гуд летает.
Я в отдельный не закидывал, чтобы не было путаницы в будущем. Работает Да и как ты говоришь, что в отдельном, должно работать. Но на странице теста все равно thickbox.js не подключен... Сообщение отредактировал scanread - 2011-07-13, 11:20 |
|
|
||
Текстовая версия | 0.0403 сек. 12 запросов GZIP включен Сейчас: 2024-09-27, 8:18 |