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


Слайдер На Главной


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

#1 silverstone

silverstone

    Пользователь

  • Пользователи
  • PipPip
  • 45 сообщений

Отправлено 24 Июль 2012 - 19:58

Захотел поставить вот этот слайдер ( http://www.woothemes.com/flexslider/ ) на главную страницу своего сайта - www.v1shop.ru

Только не пнял, что куда запихивать чтобы слайдер появился именно тут, как на картинке?

Прикрепленные изображения

  • ммм.png


#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 24 Июль 2012 - 22:02

Вам необходимо размещать код слайдера в шаблоне "Страница" раздела редактора тем, а так же код слайдера необходимо обвернуть в условие вида
{%IF index_page%}
 код слайдера
{%ENDIF%}


#3 silverstone

silverstone

    Пользователь

  • Пользователи
  • PipPip
  • 45 сообщений

Отправлено 24 Июль 2012 - 23:11

Заинтересовал следующее вот ЭТО

как можно это все сделать?

у меня в архиве папки :

1) css
2) img - это понятно вроде бы
3) js - тут вообще 3 файла *.js

и еще, можно ли к каждой ссылке прикрепить ссылку для перехода?

Если интересно, то ниже архив

Прикрепленные файлы

  • Прикрепленный файл  gallery.zip   390,35К   104 Количество загрузок:


#4 Wo lf

Wo lf

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 461 сообщений

Отправлено 25 Июль 2012 - 03:04

Этот слайдер Вам явно не подойдет, Вы же не книги предлагаете или же у Вас не фото галерея и т.д.

Вы предлагаете товар, соответственно вам бы не помешал бы слайдер, где в него входило и описание товара, и возможно перейти на страницу товара, и даже добавить в корзину...

#5 silverstone

silverstone

    Пользователь

  • Пользователи
  • PipPip
  • 45 сообщений

Отправлено 25 Июль 2012 - 14:19

Нет нет, я хочу попробовать его. Возможно ли в этом слайдере сделать так чтобы по фоткам можно было перейти на страницы? Это будет меню, а не предложение товара...

#6 Wo lf

Wo lf

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 461 сообщений

Отправлено 25 Июль 2012 - 14:23

Можно будет конечно... :rolleyes:

#7 silverstone

silverstone

    Пользователь

  • Пользователи
  • PipPip
  • 45 сообщений

Отправлено 25 Июль 2012 - 14:23

А как?) Подскажите пожалуйста)

#8 Wo lf

Wo lf

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 461 сообщений

Отправлено 25 Июль 2012 - 14:28

каждую картинку оберните ссылкой

#9 silverstone

silverstone

    Пользователь

  • Пользователи
  • PipPip
  • 45 сообщений

Отправлено 25 Июль 2012 - 14:29

Я прошу прощения, я вообще полный ноль во всё этом)) Я абсолютно не понимаю куда что вставлять)) Вы бы не могли мне сюда написать как и что?)  :rolleyes:

#10 Wo lf

Wo lf

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 461 сообщений

Отправлено 25 Июль 2012 - 14:33

Напишу, :rolleyes:

#11 silverstone

silverstone

    Пользователь

  • Пользователи
  • PipPip
  • 45 сообщений

Отправлено 25 Июль 2012 - 14:35

Спасибо, буду ждать))
там файл с этой штуковиной выше я выложил)

я имею ввиду я полный ноль вообще в том как этот слайдер вставить на сайт) сделать хотел бы на главной перед этими картинками которые сейчас у меня на сайте www.v1shop.ru

#12 Wo lf

Wo lf

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 461 сообщений

Отправлено 25 Июль 2012 - 14:40

Я вот не пойму, Вы зачем так сделали это. Т.е эти картинки

#13 silverstone

silverstone

    Пользователь

  • Пользователи
  • PipPip
  • 45 сообщений

Отправлено 25 Июль 2012 - 14:50

Которые сейчас? ну чтобы было меню) хочу поменять на эти, которые показал)

#14 Wo lf

Wo lf

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 461 сообщений

Отправлено 25 Июль 2012 - 15:12

Вы здесь еще, давайте приступим

#15 silverstone

silverstone

    Пользователь

  • Пользователи
  • PipPip
  • 45 сообщений

Отправлено 25 Июль 2012 - 15:28

дада, я жду ) надеюсь вы мне объясните всю технологию куда и что вставлять чтобы это появилось на моем сайте)

#16 Wo lf

Wo lf

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 461 сообщений

Отправлено 25 Июль 2012 - 15:32

Ну так давайте,
1. Загрузить файлы к себе в админку.

raphael.js
init.js
default.css

2. Подключить файлы в шаблоне HTML...

1. <link rel="stylesheet" href="{ASSETS_STYLES_PATH}default.css" type="text/css" />

2. <script type="text/javascript" src="{ASSETS_JS_PATH}init.js"></script>
    <script type="text/javascript" src="{ASSETS_JS_PATH}raphael.js"></script>


И дальше См. картинку....

3. Открываем файл init.js

И внутри его меняем на это:

$(function(){
    
    var li = $('.gallery').find('li');   // Ищем все элементы 'li'
        
    li.each(function(i){
        var t = $(this),
            img = t.find('img'), // Ищем изображение в элементе 'li'
            src = img.attr('src'), // Получаем путь к изображению
            width = li.width(), // Получаем ширину 'li'
            height = li.height(); // Получаем высоту 'li'
            
        img.hide().after($('<div />').attr('id', 'holder'+i).addClass('holder')); // Скрываем все изображения и создаем контейнеры для объектов Raphael

        var r = Raphael('holder'+i, width*2, height*2), // Создаем объекты Raphael
            rimg = r.image(src, width/2, height/2, width, height); // Создаем новое изображение с использованием предыдущей переменной
        
        rimg.hover(function() {
            this.animate({
                scale: 2, // Увеличиваем ваше изображение до нормального размера
                rotation : 360
            }, 1200, 'elastic');
        }, function() {
            this.animate({
                scale: 1, // Уменьшаем размер изображений
                rotation : 0
            }, 1200, 'elastic');
        });
        
    });
    
    li.hover(function(){
        li.css({ 'z-index': 1 }); // Устанавливаем z-index для всех элементов 'li'
        $(this).css({ 'z-index': 2 }); // Устанавливаем z-index для элемента, над которым находится курсор мыши
    });
            
});


4. Открываем файл default.css

И меняем на это:


ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}


.gallery ul li {
width:144px;
height:144px;
margin:0 10px 10px 0;
float:left;
position:relative;
}

.holder {
position:absolute;
top:0;
left:0;
margin:-100px 0 0 -100px;
}

a img {
border:none;
}


5. Как все это проделали, остается теперь только сам код установить, но будете ставить его, чтоб он не мешал никому , т.е не дизайну , ни блокам и т.д.  иначе может дизайн сайта съехать. Я Вам там уже уменьшил до 144 px.
Так же не размещайте большие картинки, рекомендуется размещать 400х400 px.

<div class="gallery">
<ul class="reset">
<li><a title="Название" href="Ваша ссылка"><img src="ссылка на картинку" alt="" /></a></li>
<li><a title="Название" href="Ваша ссылка"><img src="ссылка на картинку" alt="" /></a></li>
<li><a title="Название" href="Ваша ссылка"><img src="ссылка на картинку" alt="" /></a></li>
<li><a title="Название" href="Ваша ссылка"><img src="ссылка на картинку" alt="" /></a></li>
<li><a title="Название" href="Ваша ссылка"><img src="ссылка на картинку" alt="" /></a></li>
<li><a title="Название" href="Ваша ссылка"><img src="ссылка на картинку" alt="" /></a></li>
<li><a title="Название" href="Ваша ссылка"><img src="ссылка на картинку" alt="" /></a></li>
<li><a title="Название" href="Ваша ссылка"><img src="ссылка на картинку" alt="" /></a></li>
</ul>

</div>

Если хотите чтоб формат картинок миниатюр был другой, а так же расположение их - то это надо ковырять уже в default.css

#17 Wo lf

Wo lf

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 461 сообщений

Отправлено 25 Июль 2012 - 16:03

Просмотр сообщенияsilverstone (25 Июль 2012 - 14:50) писал:

Которые сейчас? ну чтобы было меню) хочу поменять на эти, которые показал)

Конечно уберите это меню, а то прям как меню Вк в группе , у Вас же полноценный сайт  :unsure: ,

#18 silverstone

silverstone

    Пользователь

  • Пользователи
  • PipPip
  • 45 сообщений

Отправлено 25 Июль 2012 - 21:21

А как менять файл init.js и другой? я их открываю на сайте и мне не изменить его(

#19 Wo lf

Wo lf

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 461 сообщений

Отправлено 25 Июль 2012 - 21:23

Открыть нужно в Админке Вашей. Ну и как еще можно поменять, просто открыть

Выделить все содержимое, удалить, и вставить что я Вам написал здесь

И еще, прежде чем ковыряться --- не забывайте Создавать бэкапы дизайн-шаблона  :rolleyes:

#20 silverstone

silverstone

    Пользователь

  • Пользователи
  • PipPip
  • 45 сообщений

Отправлено 25 Июль 2012 - 21:55

Я открываю файл этот у себя в админке и он просто открывает его, изменить никак. Браузер файерфокс. Через эксплорер вообще не открывает, выдает ошибку.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных