Закруглённые углы и тень (среднее изображ&#10 Закруглённые углы и тень (среднее изображ&#10
 

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Main Menu

Закруглённые углы и тень (среднее изображ

Started by awf, May 27, 2008, 11:01:31 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

awf

Мне захотелось как-то разнообразить отображение средней (normal) картинки.
После гугления нашёл ссылку http://www.netzgesta.de/corner/
По ней предлагается java-скрипт, который призван рисовать закруглённые углы и рисовать тень (и некоторые другие эффекты).

Для подключения скрипта, в используемой теме в файле template.html добавьте строку

<script type="text/javascript" src="corner.js"></script>

На всякий случай я добавил эту строку и в файл template_std.html


Для применения скрипта  нам нужно поменять класс image на класс, обрабатываемый скриптом, corner плюс необходимые эффекты ishadow33 iradius16 - тень и закругление углов,

Предупреждение: менять содержимое файла themes.inc.php является не рекомендуемым методом.


Отредактируем файл themes.inc.php:
Находим в нём:
// Displays a picture

if (!function_exists('theme_html_picture')) {  //{THEMES}

function theme_html_picture()


далее, в этой функции находим:

if ($mime_content['content']=='image') {

        if (isset($image_size['reduced'])) {


Далее меняем:

$pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";

на

$pic_html .= "<img src=\"" . $picture_url . "\" class=\"corner ishadow33 iradius16\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";

и тоже самое чуть ниже

} else {

            $pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><br />\n";


меняем на:

} else {

            $pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"corner ishadow33 iradius16\" border=\"0\" alt=\"\" /><br />\n";



Как видите, мы всего лишь поменяли класс image на классы corner ishadow33 iradius16, которые делают тень к средней картинке и закругляют углы.
Дополнительные классы, обрабатываемые скриптом, Вы найдёте в хелпе к скрипту.





Alex Revo

Спасибо, awf! Очень интересное решение.

От себя добавлю, что ркомендуемым методом нужно сделать так.

Скопировать весь блок с  / Displays a picture

if (!function_exists('theme_html_picture')) {  //{THEMES}

function theme_html_picture()

из файла themes.inc.php в файл theme.php вашей темы и все изменения проводить там.

awf

я пробовал, но видимо как то не так..

я копировал всю эту функцию и в итоге получил чистый экран вместо галереи

awf

Дополнение: изображение слегка (совсем незначительно) замыливается, имейте это в виду.

awf

Ещё один эффект: Фотокарточка  с бордюром и тенью
качаем скрипт тут: http://www.netzgesta.de/instant/

Подключаем точно также как описано выше, с поправкой на имя скрипта (instant.js)
Затем опять подменяем класс изображения на классы: instant ishadow50 itiltnone
Данная комбинация классов рисует рамку с бордюром и нулевой угол наклона.
Так же возможны наклон влево - itiltleft и наклон вправо - itiltright.
Можно изменить цвет рамки, добавив класс: icolor000000, где 000000 - rgb-код цвета

Valeryn

Только что попробовал reflex - отражение изображения. Понравилось. http://www.netzgesta.de/reflex/
Как посоветовал Alex Revo с переносом блока в theme.php тоже не получается.
А вообще думаю былоб красивей еслиб  всё это происходило с изображениями на главной странице