JS неправильно отображает загруженную страницу

0

Я создаю меню для загрузки (без обновления страницы) страницы в div (id = "main-content"), и все работает, кроме слайдера, есть JS-код:

jQuery(document).ready(function(){
    // load index page when the page loads
    jQuery("#main-content").load("/tpl/index.tpl.php");
    jQuery("#index").click(function(){
    // load home page on click
        jQuery("#main-content").load("/tpl/index.tpl.php");
    });
    jQuery("#about").click(function(){
    // load about page on click
        jQuery("#main-content").load("about.html");
    });
    jQuery("#contact").click(function(){
    // load contact form onclick
        jQuery("#main-content").load("contact.html");
    });
});

Существует часть индексного кода (с основным содержимым div):

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <link rel="stylesheet" href="css/global.css" media="all">
    <link rel="stylesheet" href="style.css" media="all">
    <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="all" />     
    <![endif]-->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,300italic,200italic,400italic,600italic,600,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

</head>
<body class="dark-footer flx-home-page-4">
<div id="main-content">
</div>
 <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/superfish.js"></script>
    <script src="js/retina.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.form.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/jquery.nivo.slider.js"></script>
    <script src="js/jquery.flexslider.js"></script>
    <script src="js/jquery.carouFredSel-5.6.4.js"></script>
    <script src="js/jquery.prettyPhoto.js"></script>
    <script src="js/jflickrfeed.min.js"></script>
    <script src="js/mediaelement-and-player.min.js"></script>
    <script src="js/modernizr.custom.63321.js"></script>
    <script src="js/jquery.hoverdir.js"></script>
    <script src="js/jquery.dropdown.js"></script>
    <script src="js/modernizr.custom.js"></script>
    <script src="js/jquery.dlmenu.js"></script>
    <script src="js/jquery.isotope.min.js"></script>
    <script src="js/jquery.eislideshow.js"></script>
    <script src="js/raphael-min.js"></script>
    <script src="js/iview.js"></script>
    <script src="js/tweetable.jquery.js"></script>
    <script src="js/jquery.timeago.js"></script>
    <script src="js/custom.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.quicksand.js"></script>
    <script src="js/main.js"></script>
    <script src="js/bra_social_media.js"></script>
    <script src="js/jquery.themepunch.plugins.min.js"></script>
    <script src="js/jquery.themepunch.revolution.min.js"></script>
    <script src="js/classie.js"></script>
    <script src="js/cbpAnimatedHeader.min.js"></script>
    <script src="js/styleswitch.js"></script>
    <script src="js/loader.js"></script>

    <script type="text/javascript">

        var tpj=jQuery;
        tpj.noConflict();

        tpj(document).ready(function() {

        if (tpj.fn.cssOriginal!=undefined)
            tpj.fn.css = tpj.fn.cssOriginal;

            tpj('.fullwidthbanner').revolution(
                {
                    delay:9000,
                    startwidth:1000,
                    startheight:500,

                    onHoverStop:"on",                       // Stop Banner Timet at Hover on Slide on/off

                    thumbWidth:100,                         // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
                    thumbHeight:50,
                    thumbAmount:3,

                    hideThumbs:0,
                    navigationType:"bullet",                // bullet, thumb, none
                    navigationArrows:"solo",                // nexttobullets, solo (old name verticalcentered), none

                    navigationStyle:"round",                // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom


                    navigationHAlign:"left",                // Vertical Align top,center,bottom
                    navigationVAlign:"bottom",                  // Horizontal Align left,center,right
                    navigationHOffset:30,
                    navigationVOffset:30,

                    soloArrowLeftHalign:"left",
                    soloArrowLeftValign:"center",
                    soloArrowLeftHOffset:0,
                    soloArrowLeftVOffset:0,

                    soloArrowRightHalign:"right",
                    soloArrowRightValign:"center",
                    soloArrowRightHOffset:0,
                    soloArrowRightVOffset:0,

                    touchenabled:"on",                      // Enable Swipe Function : on/off


                    stopAtSlide:-1,                         // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
                    stopAfterLoops:-1,                      // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic

                    hideCaptionAtLimit:0,                   // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
                    hideAllCaptionAtLilmit:0,               // Hide all The Captions if Width of Browser is less then this value
                    hideSliderAtLimit:0,                    // Hide the whole slider, and stop also functions if Width of Browser is less than this value


                    fullWidth:"on",

                    shadow:0                                //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows -  (No Shadow in Fullwidth Version !)

                });




    });
    </script>
</body>
</html>

И index.tpl.php код:

<div class="fullwidthbanner-container">
            <div class="fullwidthbanner">
                <ul>
                    <!-- THE FIRST SLIDE -->
                    <li data-transition="fade" data-slotamount="10" data-masterspeed="300" data-thumb="images/thumbs/thumb1.jpg">
                                <!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
                                <img src="placeholders/slider/revolution-bg-1.jpg" alt="" >

                                <!-- THE CAPTIONS IN THIS SLDIE -->
                                <div class="caption lft rev-entry-2" data-x="25" data-y="30" data-speed="900" data-start="500" data-easing="easeOutBack"><img src="placeholders/slider/rev-entry-2.png" alt="" /></div>
                                <div class="caption lfb rev-entry-1" data-x="70" data-y="120" data-speed="900" data-start="500" data-easing="easeOutBack"><img src="placeholders/slider/rev-entry-1.png" alt="" /></div>
                                <div class="caption sft medium_white"  data-x="645" data-y="250" data-speed="300" data-start="1200" data-easing="easeOutExpo">test</div>
                                <div class="caption lfb big_yellow"  data-x="645" data-y="285" data-speed="300" data-start="1300" data-easing="easeOutExpo">test</div>
                                <div class="caption lfb small_yellow"  data-x="645" data-y="330" data-speed="200" data-start="1500" data-easing="easeOutExpo">test</div>
                                <div class="caption lfb small_white"  data-x="645" data-y="380" data-speed="300" data-start="1500" data-easing="easeOutExpo">test test test test test test test test</div>


                    </li>

                    <!-- THE SECOND SLIDE -->
                    <li data-transition="boxfade" data-slotamount="15" data-masterspeed="300" data-delay="9400" data-thumb="images/thumbs/thumb2.jpg">
                                <img src="placeholders/slider/revolution-bg-2.jpg" alt="" >
                                <div class="caption sfb rev-entry-3" data-x="730" data-y="130" data-speed="900" data-start="1000" data-easing="easeOutBack"><img src="placeholders/slider/rev-entry-3.png" alt="" /></div>
                                <div class="caption lft rev-entry-4" data-x="540" data-y="20" data-speed="900" data-start="1000" data-easing="easeOutBack"><img src="placeholders/slider/rev-entry-4.png" alt="" /></div>

                                <div class="caption lfl very_big_white"  data-x="0" data-y="216" data-speed="300" data-start="1200" data-easing="easeOutExpo">test</div>
                                <div class="caption lfl very_big_white"  data-x="0" data-y="275" data-speed="300" data-start="1300" data-easing="easeOutExpo">test</div>
                                <div class="caption lfb big_white"  data-x="0" data-y="360" data-speed="300" data-start="1500" data-easing="easeOutExpo"><a href="index.html#">test Now</a></div>
                    </li>

                    <!-- THE THIRD SLIDE -->
                    <li data-transition="turnoff" data-slotamount="15" data-masterspeed="300">
                                <img src="placeholders/slider/revolution-bg-3.jpg" alt="" >

                                <div class="caption sfb rev-entry-5" data-x="650" data-y="168" data-speed="700" data-start="500" data-easing="easeOutExpo"><img src="placeholders/slider/rev-entry-5.png" alt="" /></div>
                                <div data-easing="easeOutExpo" data-start="900" data-speed="600" data-y="140" data-x="540" class="caption lft tp-caption start rev-entry-6" data-easing="easeOutBack"><img src="placeholders/slider/rev-entry-6.png" alt="" /></div>
                                <div data-easing="easeOutExpo" data-start="1500" data-speed="800" data-y="70" data-x="400" class="caption lft tp-caption start rev-entry-7" data-easing="easeOutBack"><img src="placeholders/slider/rev-entry-7.png" alt="" /></div>
                                <div data-easing="easeOutExpo" data-start="2000" data-speed="1000" data-y="20" data-x="280" class="caption lft tp-caption start rev-entry-8" data-easing="easeOutBack"><img src="placeholders/slider/rev-entry-8.png" alt="" /></div>
                                <div class="caption lfl stl bg-op"
                                     data-x="0"
                                     data-y="380"
                                     data-speed="300"
                                     data-start="500"
                                     data-easing="easeOutExpo" ><p class="big_yellow">test</p><span class="medium_white">test</span></div>
                    </li>


                </ul>

                <div class="tp-bannertimer"></div>
            </div>
        </div>

Если у кого-то есть решение, это будет здорово. Спасибо вам.

EDITED: изображение при работе - http://gyazo.com/cea705bdd1badfc22a3ef6f7699940e8 - изображение, когда оно не работает - http://gyazo.com/e0db6b14e4049b3cc570913e8bef1b4d -

Решено: пожалуйста, проверьте ответ @pawel, это (для меня) решение.

Теги:

2 ответа

0
Лучший ответ

Вы инициализируете слайдер перед загрузкой html с содержимым слайдера. Попробуй это:

var sliderInit = function(){
        if (tpj.fn.cssOriginal!=undefined)
        tpj.fn.css = tpj.fn.cssOriginal;

        tpj('.fullwidthbanner').revolution({ /* params */ });
}

И в ваших .load() добавьте его в качестве обратного вызова при загрузке страниц со слайдером

jQuery("#main-content").load("/tpl/index.tpl.php", sliderInit );
Поделиться
  • 0
    Работаю так же, спасибо;)
0

содержимое в div добавляется после загрузки jquery

jQuery(document).ready(function(){
// load index page when the page loads
jQuery("#main-content").load("/tpl/index.tpl.php");
jQuery(document).on('click',"#index",function(){
// load home page on click
    jQuery("#main-content").load("/tpl/index.tpl.php");
});
jQuery(document).on('click',"#about",function(){
// load about page on click
    jQuery("#main-content").load("about.html");
});
jQuery(document).on('click',"#contact",function(){
// load contact form onclick
    jQuery("#main-content").load("contact.html");
});

});

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню