Перейти к содержимому


Фотография
* * * * * 1 Голосов

Отражение у аватара


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 22

#1 Оффлайн   Z7ian

    Постоялец


  • VIP
  • Репутация
    51
    • Cообщений: 248
    • Форум:4.1

Отправлено 31 Декабрь 2012 - 06:31

Вот я и до инфо панели добрался.

 

Доброва времени всем и с наступающим новым годом!

 

Не уверен что пишу именно в той теме.хотя вопрос в принципе относится к профилю пользователей.

 

На одном сайте есть такая забавная штука как зеркальное отражение аватара.Я давно уже бьюсь над этим и по скольку сам не селён в css и тому подобном.решил обратится к вам за помощью.

 

И так вопрос:

 

Может кто ни буть помочь.показать\подсказать как можно сделать зеркальное отражение аватаров пользователей?

 

Вот скрин для примера того что есть и что бы хотелось:

 

50e0f9109f523_c950112f47c5446ca02d098ba1


  • 0

Заработок и обучение заработку

#2 Гость_Олександр_*


  • Гости
  • Репутация
    0

Отправлено 01 Январь 2013 - 14:15

Вот как это выглядит:

Прикрепленный файл  Ура заработало! - Форум - Invision Power Board - Google Chrome (2013-01-01 08.10.19).png   79,86К    скачиваний 17


Для добавления отражения будем использовать библиотеку reflection.js.
Прикрепленный файл  reflection.zip   1,67К    скачиваний 49 

Откройте файл userInfoPane. Найдите там 3 строки, которые начинаются на
<img itemprop="image" src='{$author['pp_
К свойству class добавьте "reflect rheight34 ropacity60", где
rheight34 - высота отражения (34px)
ropacity60 - прозрачность отражения (60%)

Подключаем библиотеку. Откройте файл includeJS (или где-нибудь еще... главное в head добавить) и в конец вставьте
<script type="text/javascript" src='{style_images_url}/js/reflection.js'></script>
В моем случае файл залит в ПАПКА_ИЗОБРАЖЕНИЙ_СТИЛЯ/js/

Вот и все. Поддерживаются браузеры Internet Explorer 5.5+, Chrome 1+, Mozilla Firefox 1.5+, Opera 9+ и Safari. В IE есть один баг - если отражение по высоте больше за само ихображение, она не отображается.

В стандартном стиле поплыла верстка, т.к. для класса .ipsUserPhoto_large указана не точная, а максимальная ширина. Для исправления добавляем img-фильтр к классам. Например, после
.ipsUserPhoto_large { max-width: 90px; max-height: 90px; }
вставляем
.ipsUserPhoto_large img { max-width: 90px; max-height: 90px; }
По аналогии правим и остальные значеня.

На этом все, надеюсь, помог  :podmig:

#3 Оффлайн   Z7ian

    Постоялец


  • VIP
  • Репутация
    51
    • Cообщений: 248
    • Форум:4.1

Отправлено 12 Январь 2013 - 15:34

Спасибо что уделили время и силы решению этой проблемы.

 

Но у меня не выходит так как у вас описано.

 

Посмотрите может я не так что то вставляю:

 

 

userInfoPane три пункта выполнил добавить:

<div itemscope itemtype="http://schema.org/Person" class='user_details'>
	<span class='hide' itemprop="name">{$author['members_display_name']}</span>
	<ul class='basic_info'>
		<if test="membertitle:|:$author['member_title']">
			<p class='desc member_title'>{$author['member_title']}</p>
		</if>
		<if test="avatar:|:$author['member_id']">
			<li class='avatar'>
				<if test="canSeeProfiles:|:$this->memberData['g_is_supmod'] OR ( $this->memberData['g_mem_info'] && ! IPSMember::isInactive( $author ) )">
				<a itemprop="url" href="{parse url="showuser={$author['member_id']}" template="showuser" seotitle="{$author['members_seo_name']}" base="public"}" title="{$this->lang->words['view_profile']}: {$author['members_display_name']}" class='ipsUserPhotoLink'>
				</if>
				<if test="hasVariable:|:$this->settings['member_topic_avatar_max']">	
					<img itemprop="image" src='{$author['pp_main_photo']}' class='ipsUserPhoto ipsUserPhoto_variable" "reflect rheight34 ropacity60" />
				<else />
					<img itemprop="image" src='{$author['pp_thumb_photo']}' class='ipsUserPhoto ipsUserPhoto_large" "reflect rheight34 ropacity60" />
				</if>
				<if test="canSeeProfiles2:|:$this->memberData['g_is_supmod'] OR ( $this->memberData['g_mem_info'] && ! IPSMember::isInactive( $author ) )">
				</a>
				</if>
			</li>
		<else />
			<li class='avatar'>
				<img itemprop="image" src='{$author['pp_thumb_photo']}' class='ipsUserPhoto ipsUserPhoto_large" "reflect rheight34 ropacity60" />
			</li>

 

includeJS тоже добавил в конец:

 

<if test="minifyjs:|:$this->settings['use_minify']">
	<if test="remoteloadjs:|:$this->settings['remote_load_js']">
		<script type='text/javascript' src='<if test="usehttpsprototype:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js'></script>
		<script type='text/javascript' src='<if test="usehttpsscriptaculous:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js?load=effects,dragdrop,builder'></script>
	<else />
		<script type='text/javascript' src='{$this->settings['js_base_url']}min/index.php?ipbv={$this->registry->output->antiCacheHash}&amp;g=js'></script>
	</if>
	<script type='text/javascript' src='{$this->settings['js_base_url']}min/index.php?ipbv={$this->registry->output->antiCacheHash}&amp;charset={$this->settings['gb_char_set']}&amp;f={parse expression="PUBLIC_DIRECTORY"}/js/ipb.js,cache/lang_cache/{$this->lang->lang_id}/ipb.lang.js,{parse expression="PUBLIC_DIRECTORY"}/js/ips.hovercard.js,{parse expression="PUBLIC_DIRECTORY"}/js/ips.quickpm.js<if test="hasjsmodules:|:count($jsModules)">,{parse expression="PUBLIC_DIRECTORY"}/js/ips.{parse expression="implode('.js,' . PUBLIC_DIRECTORY . '/js/ips.', array_unique( array_keys( $jsModules ) ) )"}.js</if>' charset='{$this->settings['gb_char_set']}'></script>
<else />
	<if test="nominifyremoteloadjs:|:$this->settings['remote_load_js']">
		<script type='text/javascript' src='<if test="nmusehttpsp:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js'></script>
	<else />
		<script type='text/javascript' src='{$this->settings['js_base_url']}js/3rd_party/prototype.js'></script>
	</if>
	<script type='text/javascript' src='{$this->settings['js_base_url']}js/ipb.js?ipbv={$this->registry->output->antiCacheHash}&amp;load=quickpm,hovercard,{parse expression="implode(',', array_unique( array_keys( $jsModules ) ) )"}'></script>
	<if test="nominifyremoteloadjs2:|:$this->settings['remote_load_js']">
		<script type='text/javascript' src='<if test="nmusehttpss:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js?load=effects,dragdrop,builder'></script>
	<else />
		<script type='text/javascript' src='{$this->settings['js_base_url']}js/3rd_party/scriptaculous/scriptaculous-cache.js'></script>
	</if>
	<script type="text/javascript" src='{$this->settings['cache_dir']}lang_cache/{$this->lang->lang_id}/ipb.lang.js' charset='{$this->settings['gb_char_set']}'></script>
</if>
{parse template="liveEditJs" group="global"}
<if test="isLargeTouch:|:$this->registry->output->isLargeTouchDevice()">
<script type="text/javascript" src='{$this->settings['js_base_url']}js/3rd_party/iscroll/iscroll.js'></script>

</if>

<script type="text/javascript" src='public_html/public/style_images/ipbmetro/js/reflection.js'></script>

Сообщение отредактировал Z7ian: 12 Январь 2013 - 15:36

  • 0

#4 Оффлайн   ..ツ⋆WOLF⋆ツ..

    Гуру


  • Модераторы
  • Репутация
    1 801
    • Cообщений: 8 174
    • Форум:3.4.х
    • Город:Казань

Отправлено 12 Январь 2013 - 15:40

не парьтесь) давно уже хук выложили на форуме) поиском воспользуйтесь


  • 1

#5 Оффлайн   Law AC vs. Finch

    Гуру


  • Пользователи
  • Репутация
    887
    • Cообщений: 3 004
    • Форум:Нет

Отправлено 12 Январь 2013 - 15:42

WTF?

<img itemprop="image" src='{$author['pp_main_photo']}' class='ipsUserPhoto ipsUserPhoto_variable" "reflect rheight34 ropacity60" />

Правильно так 

<img itemprop="image" src='{$author['pp_main_photo']}' class='ipsUserPhoto ipsUserPhoto_variable reflect rheight34 ropacity60' />

И это что такое? 

<script type="text/javascript" src='public_html/public/style_images/ipbmetro/js/reflection.js'></script>

 

Вам же написали, как нужно.


  • 1

#6 Оффлайн   Z7ian

    Постоялец


  • VIP
  • Репутация
    51
    • Cообщений: 248
    • Форум:4.1

Отправлено 12 Январь 2013 - 15:43

не парьтесь) давно уже хук выложили на форуме) поиском воспользуйтесь

ООО спасибо огромное.Сейчас поищу.)   Но если честно то не плохо было бы и тут разобраться. Хуки упрощают всё это дело,но я люблю и учится.



не парьтесь) давно уже хук выложили на форуме) поиском воспользуйтесь

ООО спасибо огромное.Сейчас поищу.)   Но если честно то не плохо было бы и тут разобраться. Хуки упрощают всё это дело,но я люблю и учится.


  • 0

#7 Оффлайн   Z7ian

    Постоялец


  • VIP
  • Репутация
    51
    • Cообщений: 248
    • Форум:4.1

Отправлено 12 Январь 2013 - 17:50

Это снова я.

 

Обнаружился не большой баг с отражением: -с низу видна полоска об водки аватара.Мне кажется что логичней и правильней её убрать?

 

Но вот беда: -я не знаю строк отвечающих за это действие.Если не сложно подскажите строку в шаблоне или в css с этими параметрами для изменения?

 

50f16a25441dd_b5066f46bc014b87a31c097d9d


  • 0

#8 Оффлайн   ..ツ⋆WOLF⋆ツ..

    Гуру


  • Модераторы
  • Репутация
    1 801
    • Cообщений: 8 174
    • Форум:3.4.х
    • Город:Казань

Отправлено 12 Январь 2013 - 18:53

.ipsUserPhoto {

            padding: 1px;

и убираете строку

 

padding: 1px;

  • 1

#9 Оффлайн   Z7ian

    Постоялец


  • VIP
  • Репутация
    51
    • Cообщений: 248
    • Форум:4.1

Отправлено 13 Январь 2013 - 00:44

 

 

Я нашел как вы подсказали: (Я так понял это в ipb_styles.css)

.ipsUserPhoto {

            padding: 1px;

У меня правда выглядит это по другому:

.ipsUserPhoto {

            padding: 0px;

 

При удаление строчки,не чего ровным счётом не изменилось,как не печально. :prostite:

 

На всякий случай уточнаю стили ipb: metro и MAXX SKIN (Dark) build9


Сообщение отредактировал Z7ian: 13 Январь 2013 - 00:44

  • 0

#10 Оффлайн   ..ツ⋆WOLF⋆ツ..

    Гуру


  • Модераторы
  • Репутация
    1 801
    • Cообщений: 8 174
    • Форум:3.4.х
    • Город:Казань

Отправлено 13 Январь 2013 - 00:48

так дайте ссылку на форум где у вас стоит  MAXX SKIN (Dark) build9


  • 0