[Помогите] Сделать так же как на musicbyprudence.com/

Тема в разделе "Wordpress", создана пользователем Antoy Bad, 30 май 2010.

Статус темы:
Закрыта.
Модераторы: DzSoft, Sorcus
  1. Antoy Bad

    Antoy Bad Создатель

    Регистр.:
    31 июл 2006
    Сообщения:
    43
    Симпатии:
    17
    Привет ребята, помогите организовать такой же ротатор фона, как на данном сайтеhttp://www.musicbyprudence.com/
     
  2. Eimantas

    Eimantas Писатель

    Регистр.:
    15 мар 2009
    Сообщения:
    8
    Симпатии:
    0
    <script type="text/javascript" src="http://www.musicbyprudence.com/wp-content/themes/BartlettDeBoer_iThemba/js/jquery.carousel.js"></script>


    <script type="text/javascript">
    function loadCarouselLite() {
    $("#showcase").jCarouselLite({
    btnNext: ".next",
    btnPrev: ".prev",
    visible: 1,
    vertical: true,
    auto: 3000,
    speed: 500,
    btnGo:
    ['goto1', '.goto2']
    });

    $("#background .images").jCarouselLite({
    btnNext: ".next",
    btnPrev: ".prev",
    visible: 3,
    auto: 3000,
    speed: 500
    });

    $('.goto2').click();
    }

    function gotoPrev() {
    $('.prev').click();
    }

    function hideLoading() {
    $('.loading').fadeOut();
    }

    $(document).ready(function() {
    if ($.browser.msie && $.browser.version=="6.0") {
    $('.loading').css({
    'width': $(window).width(),
    'height': $(window).height()
    });

    $('.loading img').css({
    'left': '50%',
    'top': '50%',
    'margin' : '-10px 0px 0px -110px'
    });
    }

    setTimeout("loadCarouselLite()", 1000);
    setTimeout("gotoPrev()", 2000);
    setTimeout("hideLoading()", 2500);
    });
    </script>
    <!-- background end -->
     
  3. Antoy Bad

    Antoy Bad Создатель

    Регистр.:
    31 июл 2006
    Сообщения:
    43
    Симпатии:
    17
    Я правильно понял этот скрипт просто вставить в шаблон и всё?
     
  4. partizannn

    partizannn

    Регистр.:
    15 сен 2008
    Сообщения:
    418
    Симпатии:
    52
    спаибо конечно за джаваскрипт - но в обеих скриптах я не увидил откуда именно подключаются картинки.... может подскажите?
     
  5. Di9

    Di9 Создатель

    Регистр.:
    19 ноя 2006
    Сообщения:
    33
    Симпатии:
    0
    может из ('.loading img').css ?
    но идея понравилась!
     
  6. Antoy Bad

    Antoy Bad Создатель

    Регистр.:
    31 июл 2006
    Сообщения:
    43
    Симпатии:
    17
    Eimantas можешь более по подробней расписать, как и что, а то я не совсем понял, что делать с этим JS куда его прикручивать и откуда изображения подгружать
     
  7. xbreaker

    xbreaker Вверх ногами

    Регистр.:
    15 авг 2007
    Сообщения:
    245
    Симпатии:
    52
    с помощью этого скрипта в блоке div с id=background происходит ротация картинок следующим образом:
    взят список ul, куда в виде пунктов li помещены картинки и за счет свойства float:left они стоят в один ряд, получается широкое полотно состоящее из всех картинок, скрипт же сдвигает у ul свойство left, за счет чего меняется картинка, пример в коде
    PHP:
    <div id="background">
            <
    div class="images" style="overflow: hidden; visibility: visible; left: 0px; width: 5040px;">
                <
    ul style="margin: 0pt; padding: 0pt; position: relative; list-style-type: none; width: 16800px; left: -8400px;"><li style="overflow: hidden; float: left; width: 1680px; height: 1050px;"><img alt="" src="http://www.musicbyprudence.com/wp-content/themes/BartlettDeBoer_iThemba/images/background/Prudence_CU.jpg"></li><li class="news" style="overflow: hidden; float: left; width: 1680px; height: 1050px;"><img alt="" src="http://www.musicbyprudence.com/wp-content/themes/BartlettDeBoer_iThemba/images/background/BandSky.jpg"></li><li style="overflow: hidden; float: left; width: 1680px; height: 1050px;"><img alt="" src="http://www.musicbyprudence.com/wp-content/themes/BartlettDeBoer_iThemba/images/background/Prudence_Mic.jpg"></li><li style="overflow: hidden; float: left; width: 1680px; height: 1050px;"><img alt="" src="http://www.musicbyprudence.com/wp-content/themes/BartlettDeBoer_iThemba/images/background/Liyana_Band.jpg"></li>
                <
    li style="overflow: hidden; float: left; width: 1680px; height: 1050px;"><img alt="" src="http://www.musicbyprudence.com/wp-content/themes/BartlettDeBoer_iThemba/images/background/Prudence_CU.jpg"></li>
                <
    li class="news" style="overflow: hidden; float: left; width: 1680px; height: 1050px;"><img alt="" src="http://www.musicbyprudence.com/wp-content/themes/BartlettDeBoer_iThemba/images/background/BandSky.jpg"></li>
                <
    li style="overflow: hidden; float: left; width: 1680px; height: 1050px;"><img alt="" src="http://www.musicbyprudence.com/wp-content/themes/BartlettDeBoer_iThemba/images/background/Prudence_Mic.jpg"></li><li style="overflow: hidden; float: left; width: 1680px; height: 1050px;"><img alt="" src="http://www.musicbyprudence.com/wp-content/themes/BartlettDeBoer_iThemba/images/background/Liyana_Band.jpg"></li><li style="overflow: hidden; float: left; width: 1680px; height: 1050px;"><img alt="" src="http://www.musicbyprudence.com/wp-content/themes/BartlettDeBoer_iThemba/images/background/Prudence_CU.jpg"></li><li class="news" style="overflow: hidden; float: left; width: 1680px; height: 1050px;"><img alt="" src="http://www.musicbyprudence.com/wp-content/themes/BartlettDeBoer_iThemba/images/background/BandSky.jpg"></li></ul>
            </
    div>
        </
    div>
     
  8. Antoy Bad

    Antoy Bad Создатель

    Регистр.:
    31 июл 2006
    Сообщения:
    43
    Симпатии:
    17
    Ребята если я всё правильно понял, то ниже представленный код приводит фоновое изображение в слайд шоу

    PHP:
    <script type="text/javascript" src="http://www.musicbyprudence.com/wp-content/themes/BartlettDeBoer_iThemba/js/jquery.carousel.js"></script>
    <style type='text/css'>

    /***********************************************************

        Homepage Background
        
    ***********************************************************/

    .pattern {
        width: 5040px;
        height: 1050px;
        margin-left: -2520px;
        position: absolute;
        left: 50%;
        top: 0px;
        background: url('images/pattern.gif');
        z-index: -1;
    }

    .gradient {
        width: 5040px;
        height: 1050px;
        margin-left: -2520px;
        position: absolute;
        left: 50%;
        top: 0px;
        background: url('images/gradient.png') bottom repeat-x;
        z-index: -2;
    }

    #background {
        width: 5040px;
        height: 1050px;
        margin-left: -2520px;
        position: absolute;
        left: 50%;
        top: 0px;
        z-index: -3;
    }
        
        #background .images ul li {
            width: 1680px;
            height: 1050px;
            text-align: center;
        }
        
            #background .images ul li img {
                width: 1680px;
                height: 1050px;
            }
            
        #background .images ul li.graphic {
            background: #303030;
        }
        
            #background .images ul li.graphic  img {
                width: 980px;
                height: 370px;
                margin-top: 150px;
            }
        
    /***********************************************************

        Detail Background
        
    ***********************************************************/

    #background_detail {
        width: 100%;
        height: 788px;
        background: url('images/detailBG.jpg') repeat-x;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
    }

        #background_detail .pattern_detail {
            width: 100%;
            height: 435px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        
        #background_detail .image_detail {
            width: 980px;
            height: 697px;
            background: url('images/background/Prudence.jpg') no-repeat;
            margin: auto;
        }
    </style>

    <!-- background start -->
        <div class="gradient"></div>
        
        <div id="background">

            <div style="overflow: hidden; visibility: visible; left: 0px; width: 5040px;" class="images">
                <ul style="margin: 0pt; padding: 0pt; position: relative; list-style-type: none; width: 18480px; left: -6720px;"><li style="overflow: hidden; float: left; width: 1680px; height: 1050px;"><img src="http://www.musicbyprudence.com/wp-content/themes/BartlettDeBoer_iThemba/images/background/Liyana_Band.jpg" alt=""></li>
                <li style="overflow: hidden; float: left; width: 1680px; height: 1050px;"><img src="http://www.musicbyprudence.com/wp-content/themes/BartlettDeBoer_iThemba/images/background/Prudence_CU.jpg" alt=""></li>
                <li style="overflow: hidden; float: left; width: 1680px; height: 1050px;" class="news"><img src="http://www.musicbyprudence.com/wp-content/themes/BartlettDeBoer_iThemba/images/background/BandSky.jpg" alt=""></li>
                <li style="overflow: hidden; float: left; width: 1680px; height: 1050px;"><img src="http://www.musicbyprudence.com/wp-content/themes/BartlettDeBoer_iThemba/images/background/Prudence_Mic.jpg" alt=""></li></ul>
            </div>
        </div>
        
        <script type="text/javascript">
            function loadCarouselLite() {
                $("#showcase").jCarouselLite({
                    btnNext: ".next",
                    btnPrev: ".prev",
                    visible: 1,
                    vertical: true,
                                    auto: 3000,
                                    speed: 500,
                    btnGo:
                    ['goto1', '.goto2']
                });
            
                $("#background .images").jCarouselLite({
                    btnNext: ".next",
                    btnPrev: ".prev",
                    visible: 3,
                                    auto: 3000,
                                    speed: 500
                });
                
                $('.goto2').click();
            }
            
            function gotoPrev() {
                $('.prev').click();
            }
            
            function hideLoading() {
                $('.loading').fadeOut();
            }
            
            $(document).ready(function() {
                if ($.browser.msie && $.browser.version=="6.0") {
                    $('.loading').css({
                        'width': $(window).width(),
                        'height': $(window).height()
                    });
                    
                    $('.loading img').css({
                        'left': '50%',
                        'top': '50%',
                        'margin' : '-10px 0px 0px -110px'
                    });
                }
                
                setTimeout("loadCarouselLite()", 1000);
                setTimeout("gotoPrev()", 2000);
                setTimeout("hideLoading()", 2500);
            });
        </script>

        <!-- background end -->
     
  9. xbreaker

    xbreaker Вверх ногами

    Регистр.:
    15 авг 2007
    Сообщения:
    245
    Симпатии:
    52
    вы различаете такие вещи как html-верстка, css-стили и java-код? если нет, то сделать что то путное у вас врядли получится, собрать в кучу весь код - не гарантия того что он заработает ;)
     
  10. Antoy Bad

    Antoy Bad Создатель

    Регистр.:
    31 июл 2006
    Сообщения:
    43
    Симпатии:
    17
    Если я не ошибаюсь, то то что я собрал Ява-код который выполняет саму анимацию потом нашел css который отвечает за <div id="background"> который выводит данное слайд шоу как фон.
    Вопрос в следующем, где моя ошибка. Я конечно не гуру CSS и JS, но
    стараюсь разобраться в том, что мне интересно. Не откажусь от помощи и совета
     
Статус темы:
Закрыта.