X   Сообщение сайта
(Сообщение закроется через 2 секунды)

Здравствуйте, гость ( Вход | Регистрация )

2 страниц Открыть меню   1 2 >  
Ответить в данную темуНачать новую тему
> Оптимизация превью в RC5
Loader
сообщение 2010-11-06, 15:51
Сообщение #1
Профессионал
Иконка группы

Группа: Eleanor user
Сообщений: 1 161
Регистрация: 2010-04-19

Репутация:   нет  
Всего: нет


Не секрет что библиотека wz_tooltip.js очень плохо работает в качестве предпросмотрщика изображений (В IE вызывает всплывающее окно "этот скрипт тормозит работу браузера", да и в других не показывает изображение с 1-го раза, требует повторного наведения на картинку).
Нашёл ей замену размером в 1193 байта, работает превосходно! :D (для сравнения: 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(\'&lt;img src=&quot;'.$params['file'].'&quot; style=&quot;max-width:\'+sw+\'px&quot; alt=&quot;&quot; /&gt;\',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

Прикрепленные файлы
Прикрепленные файлы  imagePreview.rar ( 692 байт ) Скачиваний: 11
 
Перейти в начало страницы
+Цитировать сообщение
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

Репутация:   нет  
Всего: нет


Цитата (KeSSLeR @ 2010-11-07, 0:47)
Показал бы на примере как это работает. Скрин там или чтонить такое.


Да пожалуйста! :) Стандартное превью которое появляется при наведении курсора мыши, которое теперь стало просто реактивное и не тупит.



Сообщение отредактировал 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(\'&lt;img src=&quot;'.$params['file'].'&quot; style=&quot;max-width:\'+sw+\'px&quot; alt=&quot;&quot; /&gt;\',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

Репутация:   нет  
Всего: нет


Цитата (KeSSLeR @ 2010-11-07, 12:02)
Второй способ больше понравился. Нужно попробовать.


Я тоже себе второй поставил :)
Перейти в начало страницы
+Цитировать сообщение
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 261
Регистрация: 2008-11-11
Из: Николаев
Версия системы: RC5

Репутация:   нет  
Всего: 67


Loader, благодарю за ценную модификацию! (репа не работает, поэтому благодарю устно)
Перейти в начало страницы
+Цитировать сообщение
Loader
сообщение 2010-11-09, 9:35
Сообщение #9
Профессионал
Иконка группы

Группа: Eleanor user
Сообщений: 1 161
Регистрация: 2010-04-19

Репутация:   нет  
Всего: нет


Цитата (Alexander @ 2010-11-08, 2:52)
Loader, благодарю за ценную модификацию! (репа не работает, поэтому благодарю устно)


Кстати, второй способ может намного больше чем просто отображение картинки! Полный перечень Здесь
Пробовал сделать мини-галерею как там написано:

Цитата
<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, может потому, что картинки не с Вашего сайта идут?


<a href="/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants">
<img src="http://jquery.com/demo/thickbox/images/plant3_t.jpg" alt="Plant 3" title=""/>
</a>
<a href="/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants">
<img src="http://jquery.com/demo/thickbox/images/plant4_t.jpg" alt="Plant 4" title=""/>
</a>


И еще, там к примеру написано:

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 @ 2024-03-28 12:04)
Loader, может потому, что картинки не с Вашего сайта идут?

Они на моём сайте были.
Цитата (scanread @ 2024-03-28 12:04)
И еще, там к примеру написано:

Give each link element the same rel element and value. (Example: rel="gallery-plants")

Что это значит?
Перейти в начало страницы
+Цитировать сообщение
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 @ 2024-03-28 12:04)
Переводчик хреново это дело переводит и не понятно как бы

Я это заметил :rofl:
Перейти в начало страницы
+Цитировать сообщение
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

Репутация:   нет  
Всего: нет


Цитата (scanread @ 2024-03-28 12:04)
Loader, а jQuery этого скрипта чего не подключен? О_о Вот и не работает.

Этот скрипт использует jQuery, а вот чтобы у него был свой jQuery - это сенсация какая-то! :blink:
Перейти в начало страницы
+Цитировать сообщение
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

Репутация:   нет  
Всего: нет


Цитата (scanread @ 2024-03-28 12:04)
эти два скрипта и вроде бы и цсс не подключен

А зачем два-то? Там один просто thickbox.js а второй его сжатый вариант thickbox-compressed.js подключать надо один из них.
А css у меня внутри другого файла.
Перейти в начало страницы
+Цитировать сообщение
scanread
сообщение 2011-07-13, 11:10
Сообщение #18
Любитель
Иконка группы

Группа: Пользователи
Сообщений: 227
Регистрация: 2011-07-02

Репутация:   нет  
Всего: нет


Loader, да не важно, сжатый или не сжатый подключать. Дело в том, что на странице теста ни один ни другой не подключен, и цсс так же не подключен. Потому и не работает. Я у себя на локалке оттестировал - все гуд летает.

Цитата (Loader @ 2024-03-28 12:04)
А css у меня внутри другого файла.


Я в отдельный не закидывал, чтобы не было путаницы в будущем. Работает :) Да и как ты говоришь, что в отдельном, должно работать. Но на странице теста все равно thickbox.js не подключен...



Сообщение отредактировал scanread - 2011-07-13, 11:20
Перейти в начало страницы
+Цитировать сообщение
Loader
сообщение 2011-07-13, 11:55
Сообщение #19
Профессионал
Иконка группы

Группа: Eleanor user
Сообщений: 1 161
Регистрация: 2010-04-19

Репутация:   нет  
Всего: нет


Цитата (scanread @ 2024-03-28 12:04)
Я у себя на локалке оттестировал - все гуд летает.

Цитата (scanread @ 2024-03-28 12:04)
Работает

Да??? :blink: Ладно, буду разбираться!
Перейти в начало страницы
+Цитировать сообщение
Loader
сообщение 2011-07-13, 15:02
Сообщение #20
Профессионал
Иконка группы

Группа: Eleanor user
Сообщений: 1 161
Регистрация: 2010-04-19

Репутация:   нет  
Всего: нет


Перепробовал всё. И на локалке и на сайте - не работает хоть тресни! :diablo: :diablo: :diablo:

Сообщение отредактировал Loader - 2011-07-13, 15:15
Перейти в начало страницы
+Цитировать сообщение

2 страниц Открыть меню   1 2 >
Ответить в данную темуНачать новую тему
0 чел. читают эту тему (гостей: 0, скрытых пользователей: 0)
Пользователей: 0

 
RSS Текстовая версия 0.0362 сек.    11 запросов    GZIP включен    Сейчас: 2024-03-28, 12:04