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



Помогите с заменой шапки на слейдер

#1 Артур22
Артур22
  • Неактивные
  • 19 сообщений
  • Репутация: 6
0

Отправлено 18 Август 2012 - 22:16

Здравствуйте, делаю сайт http://free-store.ru.tf/
Хотел сделать анимированую шапку, в gif сами посмотрите на качество (на сайте}
Хотел заменить на флеш, не получилось, пытался сделать слайдер тоже не получилось
Помогите,как сделать слайдер изображений точно таких размеров вместо шапки?
Текст из html
<div class="header">
Из CSS
.header {
height: 274px;
background: #4b8bd9 url("../images/tophead.jpg") no-repeat 0 0;
padding: 0 8px 0 24px;
overflow: hidden;

 

 

  • 1

#2 surfer
surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 18 Август 2012 - 22:58

https://www.google.r...iw=1920&bih=979
  • 0

#3 Артур22
Артур22
    Topic Starter
  • Неактивные
  • 19 сообщений
  • Репутация: 6

Отправлено 19 Август 2012 - 10:21

Проблема не в том что я не могу найти такой скрипт, а в том что я не могу его поставить
  • 1

#4 surfer
surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 19 Август 2012 - 11:59

ну так конкретизируйте, какой именно скрипт, обычно в исходниках дается демо, просто тупо код оттуда копируете с поправками на свою верстку.
  • 2

#5 Артур22
Артур22
    Topic Starter
  • Неактивные
  • 19 сообщений
  • Репутация: 6

Отправлено 19 Август 2012 - 20:50

Вот примерно такой нужен http://www.rudebox.o...jquery-rudebox/
Как и куда его вставить чтоб точно также как шапка отоброжалься, и таких же размеров
  • 0

#6 Артур22
Артур22
    Topic Starter
  • Неактивные
  • 19 сообщений
  • Репутация: 6

Отправлено 21 Август 2012 - 20:18

Никто не знает чтоле?
  • 0

#7 Алия
Алия
  • Неактивные
  • 42 сообщений
  • Репутация: 10

Отправлено 22 Август 2012 - 20:55

1. Зайдите на указанный Вами сайт rudebox и, нажав на зеленую кнопочку, скачайте исходник.
2. Распакуйте содержимое скачанной заархивированной папки к себе на комп. Там всего четыре наименования: css, images, js и index.
3. Откройте папку js. В ней лежат два файла. Откройте в редакторе файл craftyside.min.js и измените в нём размеры var defaults width и height в соответствии с размерами Ваших картинок для шапки. Задайте "pagination":false, если хотите, чтобы слайдер листался автоматически, можно также изменить fadetime и delay.
4. В папке images лежит пять картинок для слайдера. Переименуйте Ваши картинки такими же названиями: 1.jpg, 2.jpg и т.д. Удалите содержимое папки images, (оставив только paginations.png, если слайды листаются вручную), и залейте в папку свои картинки.
5. Откройте код страницы index.html. Скопируйте в голову Вашей страницы, на которй Вы хотите разместить слайдер, строку <link rel="stylesheet" href="css/craftyslide.css" /> Если Ваша страница не в корне сайта, соответственно скорректируйте путь к файлу css.
6. Скопируйте в нужное место в теле Вашей страницы кусок кода, который начинается с <div id="slideshow"> и до конца тушки. Если Ваша страница не в корне сайта, соответственно скорректируйте путь к файлу js. Поменяйте надписи С Новым Годом на нужные Вам, а если надписи не нужны, удалите их.
7. Залейте папки css, images и js в корень Вашего сайта. Если нужно, скорректируйте css по Вашему усмотрению.
У меня все работает.
  • 1

#8 surfer
surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 22 Август 2012 - 23:28

Алия,зачем так извращаться и лезть в исходный код, когда можно взять компактную версию скрипта, а настройки задать в объявлении, например в данном случае будет так:
<script>
    $("#slideshow").craftyslide({
        height: 274
    });
 </script>

  • 0

#9 Артур22
Артур22
    Topic Starter
  • Неактивные
  • 19 сообщений
  • Репутация: 6

Отправлено 23 Август 2012 - 00:10

Не получается у меня никак сделать, делаю по инструкции ноль толка, есть к примеру банальный java скрипт слайдера?
  • 0

#10 surfer
surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 23 Август 2012 - 00:18

так ты задай правильный идентификатор, чтоб скрипт определил где отображать слайд шоу
в твоем случае это будет:
<script>
    $("#header").craftyslide({
	    height: 274
    });
</script>
во вторых убери лишние свойства из стилей идентификатора, в твоем случае это может быть как минимум
.header {
height: 274px;
padding: 0 8px 0 24px;
overflow: hidden;
}
в третьих проверь правильность путей
и в четвертом неужели под ДЛЕ нет готовых модулей, не поверю!





  • 0

#11 Алия
Алия
  • Неактивные
  • 42 сообщений
  • Репутация: 10

Отправлено 23 Август 2012 - 03:51

surfer, спасибо за подсказку +1. Пока освоила только html и css, остальное методом тыка.


Артур22, по-моему, это довольно простой скрипт. Мне не совсем понятно, куда именно Вы собираетесь ставить слайдер на Вашем сайте, у Вас в хедере много чего размещено, если слайдер криво встает, возможно, вы его вкладываете не в тот див. Проверьте сначала, работает ли он в принципе, вставив, его, например, на место banner468х60.
  • 0

#12 Алия
Алия
  • Неактивные
  • 42 сообщений
  • Репутация: 10

Отправлено 23 Август 2012 - 15:43

Артур22,
Почитав про слайдеры и DLE, обнаружила, что возможны проблемы с внешними библиотеками jquery.
Вот ссылка на очень простой чисто js слайдер, надеюсь, подойдёт: http://www.yellowlem...er/tinyslider-2
Кстати, есть шаблон для DLE со слайдером: http://dle-joomla.ru...-slayderom.html
  • 0

#13 Rune
Rune
  • Неактивные
  • 22 сообщений
  • Репутация: 0

Отправлено 23 Сентябрь 2012 - 23:28

Шаблон, честно говоря так себе, при этом очень криво встает. Может быть у меня какие-то проблемы возникли, не исключаю, но изначально шаблон этого слейдера вызывал у меня противоречивые ощущения. После установки все мои негативные догадки подтвердились. Не рекомендую его использовать.
  • 0

#14 TihonoffAntony
TihonoffAntony
  • Неактивные
  • 23 сообщений
  • Репутация: 1

Отправлено 24 Сентябрь 2012 - 18:04

Сделал бы лучше анимированную шапку и не парился бы. Думаю она больше привлечет посетителей , чем слайды. Анимашки сейчас больше нравятся людям , чем слайды.
  • 0

#15 Flex
Flex
  • Неактивные
  • 24 сообщений
  • Репутация: 0

Отправлено 24 Сентябрь 2012 - 20:21

Я тоже считаю , что анмимированная шапка больше пользователей привлечёт. Слайды можно сказать уже устарели и всем надоели. Сейчас , так сказать , среди сайтов более популярны те , где есть анимации.
  • 0

#16 Vlad Sosnovskii
Vlad Sosnovskii
  • Заблокированные
  • 13 сообщений
  • Репутация: 0

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

Вот хороший слайдер меняем только картинки .

<style>
#content {
/* Ширина слайдера */
width:200px;
margin:0px;
}
.slider {
float:left;
/* Ширина слайдера */
width:200px;
/* Высота слайдера */
height:200px;
position:relative;
padding-bottom:26px;
background:url([url="http://delaisait.ucoz.ru/img/1/1/dsslider/bottom_shadow.png"]http://delaisait.uco...ttom_shadow.png[/url]) no-repeat bottom center;
}
.sliderContent {
float:left;
/* Ширина слайдера */
width:200px;
/* Высота слайдера */
height:200px;
clear:both;
position:relative;
overflow:hidden;
}
.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url([url="http://delaisait.ucoz.ru/img/1/1/dsslider/prev_next.png"]http://delaisait.uco...r/prev_next.png[/url]);
width:42px;
height:42px;
position:absolute;
top:50%;
margin-top:-34px;
}
.prev {
background-position:0 0;
left:15px;
}
.prev:hover {
background-position:0 -44px;
}
.next {
right:15px;
background-position:-44px 0;
}
.next:hover {
background-position:-44px -44px;
}
.sliderContent .item img{
position:absolute;
/* Ширина слайдера */
width:200px;
/* Высота слайдера */
height:200px;
background:#000;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
-ms-background-size:100% 100%;
}
.sliderBullets {
position:absolute;
bottom:0;
left:50%;
z-index:50;
margin-left:-45px;
}
.sliderBullets a {
display:block;
float:left;
text-indent:-9999px;
outline:none;
margin-left:5px;
width:10px;
height:11px;
background:url([url="http://delaisait.ucoz.ru/img/1/1/dsslider/bullets.png"]http://delaisait.uco...der/bullets.png[/url]) no-repeat;
}
.sliderBullets .active {
background-position:0 -11px;
}
.sliderContent a {
outline:none;
}
</style>
<div class="slider dsslider">
<div class="sliderContent">
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/1.jpg" alt="" />
</div>
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/2.jpg" alt="" />
</div>
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/3.jpg" alt="" />
</div>
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/4.jpg" alt="" />
</div>
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/5.jpg" alt="" />
</div>
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/6.jpg" alt="" />
</div>
</div>
</div>
<script src="http://delaisait.ucoz.ru/js/jQuery/mobilyslider.js" type="text/javascript">
</script>
<script type="text/javascript">
$('.dsslider').mobilyslider({
// Тип воспроизведения (vertical) или удалить всю строку
transition: 'fade',
// Скорость перелистывания
animationSpeed: 800,
// Автовоспроизведение включено
autoplay: true,
// Скорость автовоспроизведения
autoplaySpeed: 3000,
// Остановка во время наведения курсора (false)
pauseOnHover: true,
// Показывать кнопки вперёд назад (false)
bullets: true,
// Показывать нижние кнопки управления (false)
arrowsHide: true
});
</script>

результат можно посмотреть на этой странице http://www.m3i.ru/index/slajder/0-72

<script src="http://delaisait.ucoz.ru/script/js/1/2013/flux.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
if(!flux.browser.supportsTransitions)
alert("Flux Slider requires a browser that supports CSS3 transitions");
window.f = new flux.slider('#dssliderbars', {
pagination: false,
controls: false, // Кнопки управления, можно (true)
transitions: ['bars'],
autoplay: true // Автозапуск, можно (false)
});
});
</script>
<div id="dssliderbars">
<img src="http://delaisait.ucoz.ru/script/img/1/2013/img1.jpg" alt="" />
<img src="http://delaisait.ucoz.ru/script/img/1/2013/img2.jpg" alt="" />
<img src="http://delaisait.ucoz.ru/script/img/1/2013/img3.jpg" alt="" />
</div>

результат можно посмотреть на этой странице http://www.m3i.ru/index/slajder2/0-73 нужно только вставить код .

<script src="http://delaisait.ucoz.ru/script/js/1/2013/flux.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
if(!flux.browser.supportsTransitions)
alert("Flux Slider requires a browser that supports CSS3 transitions");
window.f = new flux.slider('#dssliderwarp', {
pagination: false,
controls: false, // Кнопки управления, можно (true)
transitions: ['warp'],
autoplay: true // Автозапуск, можно (false)
});
});
</script>
<div id="dssliderwarp">
<img src="http://delaisait.ucoz.ru/script/img/1/2013/img1.jpg" alt="" />
<img src="http://delaisait.ucoz.ru/script/img/1/2013/img2.jpg" alt="" />
<img src="http://delaisait.ucoz.ru/script/img/1/2013/img3.jpg" alt="" />
</div>


результат можно посмотреть на этой странице http://www.m3i.ru/index/slajder3/0-74
  • 0

robot
robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
MattCutts MattCutts 1-й за Сентябрь
Очков активности: 1 407 8 тем, 110 сообщений, 7 баллов репутации
Сайт: dmitrylee.ru
ТОП самых активных за этот месяц
  • Фотография Андрей WPM
    #1

    Андрей WPM (wpmaster.kz)
    Очков активности: 486 Вне конкурса за определение пользователя месяца

  • Фотография MattCutts
    #2

    MattCutts (dmitrylee.ru)
    Очков активности: 390 Вне конкурса за определение пользователя месяца

  • Фотография NataliaAntalia
    #3

    NataliaAntalia
    Очков активности: 210 0 тем, 35 сообщений, 4 балла репутации

  • Фотография ShowPrint
    #4

    ShowPrint (ShowPrint.ru)
    Очков активности: 162 1 тема, 15 сообщений, 6 баллов репутации

  • Фотография TimurR
    #5

    TimurR
    Очков активности: 76.5 2 темы, 11 сообщений, 3 балла репутации

  • Фотография Rexxar
    #6

    Rexxar
    Очков активности: 48 0 тем, 32 сообщения, 1 балл репутации

  • Фотография Megoydagi
    #7

    Megoydagi (24ho.ru)
    Очков активности: 37.5 3 темы, 16 сообщений, 1 балл репутации

  • Фотография Rodiola
    #8

    Rodiola (rukodelkovo.ru)
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография lena220678
    #9

    lena220678
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография Zevss
    #10

    Zevss (domles43.ru)
    Очков активности: 19.5 3 темы, 4 сообщения, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 27.09.2019
  • Яндекс выдача: 11.10.2019
Топ 5 участников по репутации

Оформление форума – IPBSkins.ru