Форма входа

mvcreative

Старая форма входа

Страница 1 из 11
Модератор форума: BSide 
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Пожалуйста, помогите!
Пожалуйста, помогите!
karla-marxДата: Среда, 26.12.2012, 14:42 | Сообщение # 1
Молчун
Группа: Проверенные
Пользователь №: 1387
Сообщений: 10
Награды: 0
Репутация: 0
Статус: оффлайн
Доброго времени суток. Уважаемые программисты, пожалуйста, помогите мне. Дело в том, что у меня на сайте установлен шаблон Элеганс, и он меня вполне устраивает. Как сделать вот такие кнопки "Подробнее" и далее на странице материала - "Зум", чтобы выглядело, как здесь http://tilability.do.am/news У меня на сайте стоит прозрачность для картинок (не затемнение, как в примере), кнопки я сохранила и сделала их черными, но что нужно прописывать в css и какой скрипт ставить? прошерстила весь инет на предмет подобного, но ничего нет. На вас вся надежда, помогите, пожалуйста, а то заедает перфекционизм)

Сообщение отредактировал karla-marx - Среда, 26.12.2012, 14:42
 
вверх
cechДата: Среда, 26.12.2012, 15:35 | Сообщение # 2
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
на событие hover повесить появление затемнения (класс fade), и animate на класс zoom с изменение top с -100 к примеру до 100...
структура может быть к примеру такой
Код
<div class="poster">
<img src="poster.jpg" alt=""/>
<div class="fade">
   <a href="#" class="zoom"></a>
</div>
</div>
<style>
.poster {
   position:relative;
}
.fade {
   position:absolute;
   background:#000;
   opacity:0.5;
   z-index:10;
   top:0;
   left:0;
   oveflow:hidden;
}
.zoom {
   width:10px;
   height:10px;
   background:url(zoom.png) no-repeat;
   left:50%;
   margin-left:-5px;
   top:-100px;
}
</style>



 
вверх
SaiqdrxДата: Среда, 26.12.2012, 16:40 | Сообщение # 3
Охрипший
Группа: Проверенные
Пользователь №: 1228
Сообщений: 336
Награды: 7
Репутация: 21
Статус: оффлайн
css от данной функции :

Js файл
Если что он прописывает или ссылка на него между body и head
его код :

Html - это прописывается где будет стоять твоя "фотка".

P.s Что за что отвечает :
В основе лежит - proj-img -,так что если захочешь изменить класс,то придётся и в js его менять.
Картинки думая сможешь сделать сам и прописать на них путь
Такой не доведенный до ума демо : Демо.
 
вверх
karla-marxДата: Среда, 26.12.2012, 18:03 | Сообщение # 4
Молчун
Группа: Проверенные
Пользователь №: 1387
Сообщений: 10
Награды: 0
Репутация: 0
Статус: оффлайн
нет, мне затемнение как раз не нужно) у меня стоит прозрачность, то есть наоборот, высветляет изображение, поэтому картинки белого зума не видно, а вот черная - самое оно. Фокус в том, чтобы остальное было хоть приблизительно, как в примере - анимированная иконка на изображении. А я в программировании ни в зуб ногой. proj-img я пыталась изменить, смотрела, как это сделано в шаблоне. Но разумеется, у меня ничего не вышло, потому что как я понимаю, надо не просто прописать дополнительно класс, а изменить вид картинок в css. Спасибо за примеры, попытаюсь разобраться.
 
вверх
cechДата: Среда, 26.12.2012, 19:29 | Сообщение # 5
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
что бы сделать темную достаточно в фотошопе провести несколько манипуляций



Прикрепления: 0446490.png(1Kb)




 
вверх
karla-marxДата: Среда, 26.12.2012, 22:55 | Сообщение # 6
Молчун
Группа: Проверенные
Пользователь №: 1387
Сообщений: 10
Награды: 0
Репутация: 0
Статус: оффлайн
Я просто сделала инверсию, и у меня получилась черная) спасибо. Попробовала настроить css, js, ничего у меня не выходит( вообще исчезает прозрачность картинок и ссылки, остается просто изображение - и это в лучшем случае, когда не ломается дизайн. Ну плохо, плохо быть бестолковой. Сайт вот www.jamesdean.ucoz.ru Если бы он хотя бы деньги приносил, я бы с удовольствием заплатила, чтобы кто-то со светлой головой приделал эту чудесную штучку... Но за два года - 38 рублей, так что баловство одно, способ отвлечься от рутины. Хобби
 
вверх
cechДата: Четверг, 27.12.2012, 00:16 | Сообщение # 7
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
karla-marx, если честно я в суть проблемы не вник, не понял ее просто=)


 
вверх
karla-marxДата: Четверг, 27.12.2012, 16:41 | Сообщение # 8
Молчун
Группа: Проверенные
Пользователь №: 1387
Сообщений: 10
Награды: 0
Репутация: 0
Статус: оффлайн
Суть такая: я хочу, чтобы при наведении курсора на изображение было, как здесь: http://tilability.do.am/news
и на странице материала, когда выскакивает зум: http://tilability.do.am/news/testovaja_novost/2012-11-24-7
а у меня на данный момент, как у меня: http://jamesdean.ucoz.ru/blog
Как реализовать эти динамические зумы и дескрипшены, где что прописать, чтобы работало, и не ломало дизайн? в моем случае - дизайн Элеганс) вот суть)))
 
вверх
exclusive37Дата: Четверг, 27.12.2012, 19:13 | Сообщение # 9
Спикер
Группа: Проверенные
Пользователь №: 1149
Сообщений: 499
Награды: 8
Репутация: 10
Статус: оффлайн
Цитата (karla-marx)
эти динамические зумы

я так понимаю нужно установить какую-либо галерею для получения "зума" то есть увеличения изображения



 
вверх
karla-marxДата: Четверг, 27.12.2012, 20:21 | Сообщение # 10
Молчун
Группа: Проверенные
Пользователь №: 1387
Сообщений: 10
Награды: 0
Репутация: 0
Статус: оффлайн
Я подключила две галереи для разных блоков - iload и нынешнюю штатную юкозовскую. Речь о том, чтобы при наведении курсора иконки зум и дескрипшен работали так, как работают в шаблоне http://tilability.do.am/news
Ну то есть наводишь курсор, и иконка zoom.png красиво опускается, или иконка details.png сверху выпадает и ссылается на материал. Сам визуальный эффект. Если для этого эффекта надо подключить еще одну галерею - значит, надо... я не знаю, поэтому и спрашиваю, как это все прописать)
Ну вот, к примеру http://tilability.do.am/photo/ Фотогалерея, при наведении на изображение сверху вываливается иконка зума. Как здесь сделать то же самое, или хотя бы примерно то же самое? http://jamesdean.ucoz.ru/photo/fotografii_raznykh_let/3/ Этот эффект он же, как я понимаю, не с галереей поставляется? потому что иконка "подробнее" работает аналогично, ссылаясь на страницу материала


Сообщение отредактировал karla-marx - Четверг, 27.12.2012, 22:09
 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Пожалуйста, помогите!
Страница 1 из 11
Поиск: