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

Добро пожаловать на форум IP-Board.Ru - У нас есть хуки, стили и релизы IP.Board
Зарегистрируйтесь сейчас, чтобы получить доступ ко всем из наших особенностей. После регистрации и входа в систему вы сможете создавать темы, отвечать на сообщения в существующих разделах, изменять репутацию другим пользователям, получить возможность обмениваться личными сообщениями, обновления статуса, управлять профилем и многое другое.Если у вас уже есть аккаунт, войдите или зарегистрируетесь бесплатно!
Уважаемые пользователи IP-Board.ru , спешу сообщить, что каждую неделю администрация будет выкладывать VIP файлы для общего доступа.
Форум нуждается в активных участниках, для получения привилегий на форуме любой пользователь может оставить заявку тут Набор команды на форум. Внесите свой вклад на форум и форум Вас не забудет. ;)

Фотография

Слайдер для IP.Board

- - - - -

  • Вы не можете создать новую тему
  • Авторизуйтесь для ответа в теме
Сообщений в теме: 26

#1
Offline Rain Man

Rain Man
  • Пользователи
  • 8 339 сообщений
  • 587 тем
2 598

    Инструкция выполнена специально для пользователей IP.Board.Ru !


    Прикрепленный файл  ( IP-Board.Ru ) -IP-Board.Ru_‎24 ‎февраля ‎2012 ‎г._16h07m05s.png   318,89К   318 Количество загрузок:



    В css создаём новый css-файл и называем его slider.css , в нём прописываем следующее содержимое :
    #slider_wrap {
    
    background: #747474 url(/public/style_images/baisik/slider_wrap.png) repeat-x;
    
    height: 200px;
    
    width: 100%;
    
    margin: 0 auto;
    
    margin-top: -10px;
    
    margin-bottom: 20px;
    
    position: absolute;
    
    left: 0;
    
    right: 0;
    
            -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a !important;
    
            -moz-box-shadow: 0px 1px 5px 0px #4a4a4a !important;
    
            box-shadow: 0px 1px 5px 0px #4a4a4a !important;
    
    }
    
    
    
    .nivoSlider {
    
            position:relative;
    
            width:1000px; /* Change this to your images width */
    
            height:200px; /* Change this to your images height */
    
    margin: 0 auto;
    
    background: url(/public/style_images/baisik/slider_load.gif) no-repeat 50% 50%;
    
    }
    
    .nivoSlider img {
    
            position:absolute;
    
            top:0px;
    
            left:0px;
    
            display:none;
    
    }
    
    .nivoSlider a {
    
            border:0;
    
            display:block;
    
    }
    
    
    
    
    
    /* The Nivo Slider styles */
    
    .nivoSlider {
    
    position:relative;
    
    }
    
    .nivoSlider img {
    
    position:absolute;
    
    top:0px;
    
    left:0px;
    
    }
    
    /* If an image is wrapped in a link */
    
    .nivoSlider a.nivo-imageLink {
    
    position:absolute;
    
    top:0px;
    
    left:0px;
    
    width:100%;
    
    height:100%;
    
    border:0;
    
    padding:0;
    
    margin:0;
    
                    z-index: 2;
    
    display:none;
    
    }
    
    /* The slices and boxes in the Slider */
    
    .nivo-slice {
    
    display:block;
    
    position:absolute;
    
    z-index:1;
    
    height:100%;
    
    }
    
    .nivo-box {
    
    display:block;
    
    position:absolute;
    
    z-index:1;
    
    }
    
    /* Caption styles */
    
    .nivo-caption {
    
    position:absolute;
    
    left:0px;
    
    bottom:0px;
    
    background:#000;
    
    color:#fff;
    
    opacity:0.5; /* Overridden by captionOpacity setting */
    
    width:100%;
    
    z-index:2;
    
    }
    
    .nivo-caption p {
    
    padding:5px;
    
    margin:0;
    
    }
    
    .nivo-caption a {
    
    display:inline !important;
    
    }
    
    .nivo-html-caption {
    
            display:none;
    
    }
    
    /* Direction nav styles (e.g. Next & Prev) */
    
    
    
    .nivo-directionNav a {
    
    display:block;
    
    width:30px;
    
    height:30px;
    
    background:url(/public/style_images/baisik/arrows2.png) no-repeat;
    
    text-indent:-9999px;
    
    border:0;
    
    }
    
    a.nivo-nextNav {
    
    background-position:-30px 0;
    
    right:15px;
    
    }
    
    a.nivo-prevNav {
    
    left:15px;
    
    }
    
    .nivo-directionNav a {
    
    position:absolute;
    
    top:45%;
    
    z-index:5;
    
    cursor:pointer;
    
    }
    
    .nivo-prevNav {
    
    left:0px;
    
    }
    
    .nivo-nextNav {
    
    right:0px;
    
    }
    
    /* Control nav styles (e.g. 1,2,3...) */
    
    .nivo-controlNav a {
    
    position:relative;
    
    z-index:5;
    
    cursor:pointer;
    
    }
    
    .nivo-controlNav a.active {
    
    font-weight:bold;
    
    }

    В шаблоне globalTemplate находим :
    {parse template="includeVars" group="global" params="$header_items"}
    И ниже добавляем :
    
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    
    <script src="{$this->settings['img_url']}/jquery.nivo.slider.pack.js" type="text/javascript"></script>
    
    <script type="text/javascript">$.noConflict();</script>
    
    <script type="text/javascript">
    
    jQuery(window).load(function() {
    
            jQuery('#slider').nivoSlider({
    
                    effect: 'boxRainGrow,fold,sliceDown,slideInRight', // Specify sets like: 'fold,fade,sliceDown'
    
                    pauseTime: 8000, // How long each slide will show
    
                    pauseOnHover: true, // Stop animation while hovering
    
                    directionNav: true, // Next & Prev navigation
    
                    directionNavHide: true, // Only show on hover
    
                    animSpeed: 500, // Slide transition speed
    
                    directionNav: true, // Next & Prev navigation
    
                    directionNavHide: true, // Only show on hover
    
                    controlNav: false, // 1,2,3... navigation
    
                    controlNavThumbs: false, // Use thumbnails for Control Nav
    
                    controlNavThumbsFromRel: false, // Use image rel for thumbs
    
                    captionOpacity: 0.5, // Universal caption opacity
    
            });
    
    });
    
    </script>
    
    

    В шаблоне boardIndexTemplate находим :
    <if test="boardIndexTop:|:true"></if>
    И ниже добавляем :
    <div id="slider_wrap">
    
    <div id="slider" class="nivoSlider">
    
            <a href="http://ip-board.ru"><img src="https://ip-board.ru/public/style_images/baisik/slide1.jpg" alt="" title="Тайтл изображения слайдера!"></a>
    
            <a href="http://ip-board.ru"><img src="https://ip-board.ru/public/style_images/baisik/slide2.jpg" alt="" title="Тайтл изображения слайдера"></a>
    
            <a href="http://ip-board.ru"><img src="https://ip-board.ru/public/style_images/baisik/slide3.jpg" alt="" title="Тайтл изображения слайдера"></a>
    
            <a href="http://ip-board.ru"><img src="https://ip-board.ru/public/style_images/baisik/slide4.jpg" alt="" title="Тайтл изображения слайдера!"></a>
    
    </div>
    
    </div>

    В шаблоне ipb_styles.css находим :
    #board_index { position: relative; }
    И приводим к такому виду :
    #board_index { position: relative; margin-top: 200px;}

    Все файлы из архива загружаем в папку со своим стилем .

    Инструкция выполнена специально для пользователей IP.Board.Ru !

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


    • 7

    #2
    Offline Remaker

    Remaker
    • Пользователи
    • 25 сообщений
    • 6 тем
    0
      Огромное спасибо!
      • 0

      #3
      Offline Bluesman

      Bluesman
      • Пользователи
      • 60 сообщений
      • 8 тем
      3
        Не совсем понял, что это дает?
        • 0

        #4
        Offline Rain Man

        Rain Man
        • Пользователи
        • 8 339 сообщений
        • 587 тем
        2 598
          Ничего. :D Прокрутка изображений с различными эффектами.
          • 0

          #5
          Offline Remaker

          Remaker
          • Пользователи
          • 25 сообщений
          • 6 тем
          0
            Как его можно уменьшить и в правый блок запихнуть?
            • 0

            #6
            Offline ADM

            ADM
            • Пользователи
            • 246 сообщений
            • 41 тем
            -2
              а как серую полосу подлинне уменьшить и цвет изменить ее? :)
              • 0

              #7
              Offline Finch

              Finch
              • Пользователи
              • 4 404 сообщений
              • 70 тем
              1 415

                а как серую полосу подлинне уменьшить и цвет изменить ее? :)

                #slider_wrap {
                
                .............................
                
                }
                
                
                width: 100%;
                background: #747474 url(..../slider_wrap.png) repeat-x;
                • -1

                #8
                Offline БиБиК

                БиБиК
                • Пользователи
                • 139 сообщений
                • 21 тем
                3
                  Немного странно указав путь :
                  <div id="slider" class="nivoSlider">
                  
                              <a href="/forum/"><img src="{style_images_url}/slide1.jpg" alt="" title="1"></a>
                  
                              <a href="/forum/"><img src="{style_images_url}/slide2.jpg" alt="" title="2"></a>
                  
                              <a href="/forum/"><img src="{style_images_url}/slide3.jpg" alt="" title="3"></a>
                  
                              <a href="/forum/"><img src="{style_images_url}/slide4.jpg" alt="" title="4"></a>
                  
                  

                  не отображаются картинки
                  • 0

                  #9
                  Offline Finch

                  Finch
                  • Пользователи
                  • 4 404 сообщений
                  • 70 тем
                  1 415

                    Немного странно указав путь :

                    Что значит странно?
                    {style_images_url} - папка с изображениями стиля.
                    Да и на месте у Вас изображения. А вот скрипт куда-то пропал.
                    • 1

                    #10
                    Offline БиБиК

                    БиБиК
                    • Пользователи
                    • 139 сообщений
                    • 21 тем
                    3
                      Finch, Спасиб все разобрался скрипт забыл перетащить ;)

                      Сообщение отредактировал БиБиК: 20 Июль 2012 в 18:52

                      • 0

                      #11
                      Offline TORRES

                      TORRES
                      • Пользователи
                      • 67 сообщений
                      • 33 тем
                      2
                        а есть какой нибудь форум что бы посмотреть как это смотрится на форуме?
                        • 0

                        #12
                        Offline Finch

                        Finch
                        • Пользователи
                        • 4 404 сообщений
                        • 70 тем
                        1 415

                          а есть какой нибудь форум что бы посмотреть как это смотрится на форуме?

                          Слайдер выдернут из одного из стилей (XGame). Демо
                          • 0

                          #13
                          Offline darhan

                          darhan
                          • Пользователи
                          • 3 сообщений
                          • 0 тем
                          0


                            Немного странно указав путь :

                            Что значит странно?
                            {style_images_url} - папка с изображениями стиля.
                            Да и на месте у Вас изображения. А вот скрипт куда-то пропал.

                            А куда надо скрипт заливать? ['img_url']}/jquery.nivo.slider.pack.js" это куда?
                            • 0

                            #14
                            Offline Finch

                            Finch
                            • Пользователи
                            • 4 404 сообщений
                            • 70 тем
                            1 415

                              А куда надо скрипт заливать? ['img_url']}/jquery.nivo.slider.pack.js" это куда?

                              В папку с изображениями своего стиля кидайте скрипт
                              • 0

                              #15
                              Offline zanyda258

                              zanyda258
                              • Пользователи
                              • 114 сообщений
                              • 28 тем
                              -39
                                Вопрос, можно ли вывести не над навигационным меню, а встроить например в раздел?
                                • 0

                                #16
                                Offline zanyda258

                                zanyda258
                                • Пользователи
                                • 114 сообщений
                                • 28 тем
                                -39
                                  Если кто не понял что я написал, то вот набросок в пайнте

                                  Прикрепленный файл  IMG_08102012_162357.png   783,45К   17 Количество загрузок:
                                  • 0

                                  #17
                                  Offline Finch

                                  Finch
                                  • Пользователи
                                  • 4 404 сообщений
                                  • 70 тем
                                  1 415

                                    Вопрос, можно ли вывести не над навигационным меню, а встроить например в раздел?

                                    Ищите нужное место и добавляйте код. А я что с наброском, что без него ничего не понял.
                                    • 0

                                    #18
                                    Offline zanyda258

                                    zanyda258
                                    • Пользователи
                                    • 114 сообщений
                                    • 28 тем
                                    -39
                                      style_css - в этой папке должен находится css?
                                      • 0

                                      #19
                                      Offline Finch

                                      Finch
                                      • Пользователи
                                      • 4 404 сообщений
                                      • 70 тем
                                      1 415

                                        style_css - в этой папке должен находится css?

                                        Вы где-то видите в стартовом посте слова об упомянутой Вами папке? Если так сложно, то добавьте код в ipb_styles.css
                                        • 0

                                        #20
                                        Offline zanyda258

                                        zanyda258
                                        • Пользователи
                                        • 114 сообщений
                                        • 28 тем
                                        -39


                                          style_css - в этой папке должен находится css?

                                          Вы где-то видите в стартовом посте слова об упомянутой Вами папке? Если так сложно, то добавьте код в ipb_styles.css

                                          Спасибо, просто не увидел кнопку создать новый css файл
                                          • -1




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

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