0
Я создаю меню для загрузки (без обновления страницы) страницы в div (id = "main-content"), и все работает, кроме слайдера, есть JS код: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");
});
});
Существует часть индекса кода (с сНу основного содержания):
<!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 ответ, это (для меня) решение ,
не отображается правильно, что это значит ??? Вам нужно инициализировать слайдер после его добавления в DOM, используя обратный вызов .load(). И вам действительно нужно реорганизовать свой код. –
@ a-wolff с изображениями. –