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



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Nivo slider
fr0d
fr0d
Topic Starter сообщение 9.11.2011, 1:39; Ответить: fr0d
Сообщение #1


Здравствуйте. Подскажите как можно сгладить края картинок в Nivo Slider
с помощью border-radius

http://dev7studios.com/wp-content/uploads/...o-slider2.6.zip

пробовал через css, но сглаживается только первая картинка, остальные - нет.

И ещё, есть ли возможноть рандомно показывать картинки?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
cyber_ua
cyber_ua
сообщение 9.11.2011, 3:53; Ответить: cyber_ua
Сообщение #2


тебе надо для всех картинок на страницы?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
fr0d
fr0d
Topic Starter сообщение 9.11.2011, 10:06; Ответить: fr0d
Сообщение #3


<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<a href="1"><img src="main_files/0.jpg" ></a>
<a href="2"><img src="main_files/1.jpg"></a>
<a href="2"><img src="main_files/2.jpg"></a>
<a href="2"><img src="main_files/3.jpg"></a>
<img src="main_files/4.jpg">
</div>
</div>


Мне нужно для этих картинок закруглить края только сверху.

Если делать так
[CSS]#slider {border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0;}[/CSS]
то края закругляются только у первой фотки. Я предположил, что нужно править сам JS.

Для этих фоток мне нужно сделать рандомное отображение при каждом обновлении.

И ещё одна проблема. Как сделать, чтобы фотка перед тем как отобразиться изменилась в размере, например width:1000px, а потом обрезалась по высоте на заданное значение 700px; и если же полученная высота картинки не 700px, то сначала меняется её высота height:700px, а потом обрезается ширина до 1000px. Примечание: все изменения картинки должны происходить относительно её центра (по высоте и ширине), а не левого верхнего угла.

Если кто поможет сделать - отблагодарю.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
cyber_ua
cyber_ua
сообщение 9.11.2011, 10:29; Ответить: cyber_ua
Сообщение #4


вот тебе решение на var img= document.getElementById('айди блока с картинкамм').getElementsByTagsName('img');//масив со всеми картинками в блоке, чтоб применить какойто метод ко всем картинкам нужен цикл ; Более подробно могу написать вечером еси надо когда буду за пк на пиши еси чет непонятно . А для замены размера через время тебе надо setTimeout как юзать смори тут javascript.ru/setTimeout
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
сообщение 9.11.2011, 18:58; Ответить: Den1xxx
Сообщение #5


(fr0d @ 9.11.2011, 13:06) *
Мне нужно для этих картинок закруглить края только сверху.


(fr0d @ 9.11.2011, 13:06) *
Как сделать, чтобы фотка перед тем как отобразиться изменилась в размере

Перед закачкой картинок в слайдер измените их редактором — закруглите края где надо, а где надо размер.
Если будете упорствовать через скрипт, получатся жуткие тормоза при отображении, ведь сам нивослайдер уже тормознутый, а тут ещё это.
К тому же кроссбраузерно закруглить только 2 верхних уголка не получится — насколько знаю под ИЕ есть решения для закругления только сразу всех четырех.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
texno
texno
сообщение 9.11.2011, 20:57; Ответить: texno
Сообщение #6


то края закругляются только у первой фотки

Проверять лень, попробуй так
[CSS]#slider img {border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0;}[/CSS]


(Den1xxx @ 9.11.2011, 21:58) *
насколько знаю под ИЕ есть решения для закругления только сразу всех четырех.

Могу только подтвердить и добавить, что делается это скругление криво, чёрт ногу сломит, что там происходит.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zippovich
Zippovich
сообщение 9.11.2011, 21:12; Ответить: Zippovich
Сообщение #7


Скругление краев:

Дело в том что nivoSlider парсит твои картинки и режет их на много блоков, для создания нестандартных анимационных эффектов. Т.е. когда скрипт заработал никаких картинок там уже нет. Применяй скругление для всего блока. Т.е.:

[CSS].nivoSlider {
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
-moz-border-radius: 12px; /* FF1-3.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}[/CSS]

Последние 3 правила по идее должны обрезать внутренние блоки по скруглению внешнего блока, к которому применяется скругление. Но надо проверять в каждом конкретном случае, тут много подводных камней.

Для IE используй pIE - работать будет даже в ie6. (http://css3pie.com/)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pavelsc
pavelsc
сообщение 9.11.2011, 21:21; Ответить: pavelsc
Сообщение #8


(Zippovich @ 10.11.2011, 00:12) *
Дело в том что nivoSlider парсит твои картинки и режет их на много блоков

Этакак? Всегда считал что создается N слоев с одной и той-же картинкой, но с разными background-position, смещенными на ширину и высоту слоя в каждом последующем слое.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zippovich
Zippovich
сообщение 9.11.2011, 21:22; Ответить: Zippovich
Сообщение #9


Этакак? Всегда считал что создается N слоев с одной и той-же картинкой, но с разными background-position, смещенными на ширину и высоту слоя в каждом последующем слое.


а я что сказал? перефразируйте мою фразу под себя и не умничайте
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
shelly_hb
shelly_hb
сообщение 9.1.2012, 1:13; Ответить: shelly_hb
Сообщение #10


Здравствуйте!
Столкнулась с точно такой же проблемой. Решение пока что найти не смогла.
Подскажите, пожалуйста, если вы нашли выход)))

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыRealTraf.net - Slider / ClickUnder РЕАЛьные цены за ваш трафик!
930 azotsamara 206827 3.4.2014, 5:43
автор: azotsamara
Открытая тема (нет новых ответов) Easy Jquery Slider
0 illya6785 4523 6.10.2013, 0:09
автор: -illya6785-


 



RSS Текстовая версия Сейчас: 19.3.2024, 7:06
Дизайн