Улучшенный слайдер JQuerty для Блоггер

<<

Solomon_Fox

Автор темы

Сообщения: 17

Зарегистрирован: 07 дек 2011, 13:36

Благодарил (а): 1 раз.
Поблагодарили: 0 раз.

Сообщение 07 дек 2011, 13:49

Улучшенный слайдер JQuerty для Блоггер

Здравствуйте. Вопрос в следующем. /go.php?http://24works.blogspot.com/2010/12/11-featured-content-slider-for-blogger.html#comment-form вот собственно слайдер первый в списке и первый работающий и относительно просто устанавливающийся на блоггер. Как этот слайдер можно улучшить. Например наводишь на подпись под картинкой и что бы открывалась соответствующая статья. Не только кнопкой "читать далее" как это показано на рисунке, но и и просто наведением на надпись.
Например, новость про машины.
Заголовок: Ока машина на все времена. - дальше описание и кнопка "читать далее". Вот нужно что бы при клике на заголовок сразу открывалась статья. Что нужно дописать в html коде и ещё вопрос. Можно ли что бы заголовок и описание высвечивались на сером фоне а не были прозрачными как на примере. Заранее благодарю, а то уже который день головой о стену бьюсь и не работает.

Добавлено спустя 8 минут:
Featured Content Slider for Blogger Using jQuery - вот слайдер о котором я говорил.
<<

Admin

Аватара пользователя

Сообщения: 1450

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 157 раз.

Сообщение 07 дек 2011, 16:29

Re: Улучшенный слайдер JQuerty для Блоггер

А вы попробовали установить его в блог? Рекомендую сначала установить слайдер к себе, хотя бы на тестовый блог, а потом уже задавать вопросы здесь. И не забыть дать ссылочку на блог, в котором установили.
Последний раз редактировалось Admin 07 дек 2011, 16:30, всего редактировалось 1 раз.
<<

Solomon_Fox

Автор темы

Сообщения: 17

Зарегистрирован: 07 дек 2011, 13:36

Благодарил (а): 1 раз.
Поблагодарили: 0 раз.

Сообщение 08 дек 2011, 08:31

Re: Улучшенный слайдер JQuerty для Блоггер

Буквально вчера нашёл способ как сделать ссылку в слайдере. Но вопрос про фон под текстом остаётся. (что бы текст не был на прозрачном фоне картинки а на собственном сером фоне) И можно ли не просто сделать ссылку по разделам но что бы туда новости автоматически добавлялись
http://gc-church.blogspot.com/ - установленный слайдер.
<<

Admin

Аватара пользователя

Сообщения: 1450

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 157 раз.

Сообщение 08 дек 2011, 12:58

Re: Улучшенный слайдер JQuerty для Блоггер

Solomon_Fox писал(а): Но вопрос про фон под текстом остаётся. (что бы текст не был на прозрачном фоне картинки а на собственном сером фоне)

У вас в шаблоне должен быть такой код:
  Код:
#featured .ui-tabs-panel .info {
    background: url("transparent-bg.png") repeat scroll 0 0 transparent;
    height: 70px;
    left: 0;
    position: absolute;
    top: 180px;
    width: 400px;
}

добавьте во вторую строку #666666 таким образом:
  Код:
    background: #666666 url("transparent-bg.png") repeat scroll 0 0 transparent;

Цифры 666666 - это серый цвет, можете установить любой другой цвет.

Solomon_Fox писал(а):И можно ли не просто сделать ссылку по разделам но что бы туда новости автоматически добавлялись

Сомневаюсь. Для этого нужен ещё скрипт, который бы выводил новости из RSS, а список новостей уже принимал вид слайдера.
<<

Solomon_Fox

Автор темы

Сообщения: 17

Зарегистрирован: 07 дек 2011, 13:36

Благодарил (а): 1 раз.
Поблагодарили: 0 раз.

Сообщение 08 дек 2011, 14:17

Re: Улучшенный слайдер JQuerty для Блоггер

Да действительно работает. Цвет меняется, только это не много не то, что нужно. Т.к. появившийся цвет заливает остальную часть картинки и она кажется "обрезанной" а нужно что бы текст был под налётом цвета т.е. цвет не закрашивал картинку полностью. Я менял остальные цвета, но все они закрашивают картинку. Есть ли выход, что бы часть картинки, под текстом, не закрашивалась? Может опция какая имеется?
<<

Admin

Аватара пользователя

Сообщения: 1450

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 157 раз.

Сообщение 08 дек 2011, 22:03

Re: Улучшенный слайдер JQuerty для Блоггер

Solomon_Fox писал(а):Да действительно работает. Цвет меняется, только это не много не то, что нужно. Т.к. появившийся цвет заливает остальную часть картинки и она кажется "обрезанной" а нужно что бы текст был под налётом цвета т.е. цвет не закрашивал картинку полностью. Я менял остальные цвета, но все они закрашивают картинку. Есть ли выход, что бы часть картинки, под текстом, не закрашивалась? Может опция какая имеется?

Если честно, то я вообще не поняла, что значит:
что бы текст был под налётом цвета

и как вы себе представляете это?
Текст находится на картинке, вы хотите, чтобы под текстом был цвет, т.е. между картинкой и текстом должна быть подложка. Так вот как вы себе представляете, чтобы эта подложка была, но картинку не закрашивала? Я не представляю.
Возможно, вы имеете ввиду, что подложка должна быть полупрозрачной? По прозрачность и "налет цвета" не одно и то же.
Про прозрачность читайте тут
<<

Solomon_Fox

Автор темы

Сообщения: 17

Зарегистрирован: 07 дек 2011, 13:36

Благодарил (а): 1 раз.
Поблагодарили: 0 раз.

Сообщение 09 дек 2011, 09:12

Re: Улучшенный слайдер JQuerty для Блоггер

Admin писал(а):Если честно, то я вообще не поняла, что значит:

Это я не так объяснил наверное. Прежде всего спасибо за помощь. :thank: В принципе можно оставить так как есть сейчас. Полупрозрачная подложка это то, что нужно. Но к сожалению вместе с подложкой текст который находиться на ней то же становиться прозрачным. А для чтения это не очень удобно. Можно ли только подложку делать прозрачной а текст оставить непрозрачным. Господи, надеюсь понятно объяснил. Т.е. бекраунд подложки прозрачный, а текст не изменяет. Может я параметр opacity: 0.5; куда то не туда вставляю? Просто если вставлять куда то ещё, как бы это не звучало, то подложка не становиться полупрозрачной.
Резюме: Можно ли сделать подложку прозрачной, а текст оставить стандартным?
<<

Admin

Аватара пользователя

Сообщения: 1450

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 157 раз.

Сообщение 09 дек 2011, 12:19

Re: Улучшенный слайдер JQuerty для Блоггер

Я так полагаю, в этом коде (в него вы добавляли серый фон)
  Код:
#featured .ui-tabs-panel .info {
    background: url("transparent-bg.png") repeat scroll 0 0 transparent;
    height: 70px;
    left: 0;
    position: absolute;
    top: 180px;
    width: 400px;
}

как раз и реализовано так, чтобы была полупрозрачная подложка.
За это отвечает кусочек кода во второй строке:
  Код:
url("transparent-bg.png")

Странно только, что автор слайда не написал об этом и не дал исходные картинки.
Вы можете сделать свою полупрозрачную картинку, высотой 70px, шириной, например, 2px, загрузить ее в свой веб-альбом Picasa, скопировать ее ссылку и указать адрес в коде.
В качестве эксперимента, у меня уже есть такая картинка, можете скачать ее к себе на компьютер, после этого загрузить в свой веб-альбом и указать свою ссылку.
Моя картинка находится по этому адресу:
  Код:
http://1.bp.blogspot.com/-7Z8PHOnV9bk/TuHB7wGnDUI/AAAAAAAAByI/eiRygYV0Yg8/s1600/transparent-bg.png

Только учтите, что старые браузеры Internet Exploer не понимают прозрачность у картинок, т.е. будут показывать картинку, как непрозрачную.
А свойство opacity хоть и очень хорошее, но к сожалению, применяется ко всем дочерним элементам, поэтому текст также становится прозрачным.
<<

Solomon_Fox

Автор темы

Сообщения: 17

Зарегистрирован: 07 дек 2011, 13:36

Благодарил (а): 1 раз.
Поблагодарили: 0 раз.

Сообщение 12 дек 2011, 08:06

Re: Улучшенный слайдер JQuerty для Блоггер

Я по копался в интернете и нашёл точно такой же слайдер который мы обсуждаем но с работающей подложкой
/go.php?http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/ (после урока есть демо /go.php?http://demo.webdeveloperplus.com/featured-content-slider/)
Отсюда возникает логичный вопрос - какая принципиальная разница в коде слайдера того что у меня на блоге и этого слайдера. Где кардинальное отличие в коде? Не может же быть что бы такой слайдер только на ворд прес работал.

Добавлено спустя 20 минут 20 секунд:
И ещё по теме на Youtube есть отличный слайдер нисан http://www.youtube.com/?noredirect=1 Я не знаю jquery это или нет и конечно он не двигается меж рубриками но один отличный момент точно есть. На слайдере отображается видео причём постоянно. Нажмёшь на видео и оно реагирует т.е. с начала начинается. Слайдер с вмонтированным видео плеером или как это называется. Но можно ли jqery который у нас есть превратить в то что есть в youtube смотрится солидно и место на блоге экономим. + всегда есть выход на видео с самого видного места. В общем это возможно? И если да то можно и рукава засучить. А если ещё и оставить движение по рубрикам то вообще сказочно будет.
<<

Admin

Аватара пользователя

Сообщения: 1450

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 157 раз.

Сообщение 12 дек 2011, 15:15

Re: Улучшенный слайдер JQuerty для Блоггер

Solomon_Fox писал(а):Я по копался в интернете и нашёл точно такой же слайдер который мы обсуждаем но с работающей подложкой
/go.php?http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/ (после урока есть демо /go.php?http://demo.webdeveloperplus.com/featured-content-slider/)
Отсюда возникает логичный вопрос - какая принципиальная разница в коде слайдера того что у меня на блоге и этого слайдера. Где кардинальное отличие в коде? Не может же быть что бы такой слайдер только на ворд прес работал.

Отличий нет. Я статью не читала, просто там, возможно, подробно описывается, как его вставить в WordPress, а вам нужно сообразить самостоятельно, как его вставить в Blogger. Вот и вся разница. Вообще подобных слайдеров в интернете огромное количество, и любой можно вставить в любой сайт, независимо от платформы.
Solomon_Fox писал(а):Добавлено спустя 20 минут 20 секунд:
И ещё по теме на Youtube есть отличный слайдер нисан /go.php?http://www.youtube.com/?noredirect=1

Тут я вам не помогу. Яндекс и гугл в помощь. Запрос "Слайдер для видео на JQuery". Потом отпишитесь об успехах.

Вернуться в Скрипты для Blogger

Кто сейчас на конференции

Зарегистрированные пользователи: Yahoo [Bot]

Работает на phpBB © 2000, 2002, 2005, 2007 phpBB Group. Дизайн ST Software и Blogger Форум. Русская поддержка phpBB
ЧПУ ссылки от phpbb seo