javascript - Dynamic content nullifying flexslider -
i'm using jquerydynamiccontent.js changes content dynamically , when calling page contains flexslider not. not appear. if put direct flexslider on index page works normal. can ? thank you.
index.php
<!doctype html> <html> <head> <title>epinox</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <meta name="keywords" content="ino, corrimão, guarda-corpo, suporte de mangueira, churrasqueira"> <meta name="description" content="confecções de peças sob medida em aço inox."> <link rel="shortcut icon" href="ico/favicon.ico" /> <script src="http://code.jquery.com/jquery.js"></script> <!-- le fav , touch icons --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png"> <!-- le styles --> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap-theme.css" rel="stylesheet"> <link href="css/bootstrapvalidator.css" rel="stylesheet"> <link href="css/bootstrap-steps.css" rel="stylesheet"> <link href="css/flexslider.css" rel="stylesheet"> <link href="css/responsivemobilemenu.css" rel="stylesheet"> <link href="css/footer-distributed-with-address-and-phones.css" rel="stylesheet"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/magnific-popup.css"> <!--<link href="css/site.css" rel="stylesheet">--> <link href="css/site2.css" rel="stylesheet"> <script src="js/jquery-1.11.1.js"></script> <script src="js/bootstrapvalidator.js"></script> <script src="js/jquerydynamiccontent.js"></script> <script src="js/accordion.js"></script> <script src="js/responsivemobilemenu.js"></script> </head> <?php include("top.php"); ?> <body data-spy="scroll" data-target=".bs-docs-sidebar" data-twttr-rendered="true"> <?php include("menu2.php"); ?> <div id="div_content" class="div_content"> </div> <?php include("footer.php"); ?> <script src="js/bootstrap.min.js"></script> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/jquery.flexslider.js"></script> <script> $(document).ready(function() { $('#flexslider').flexslider({ animation: "slide" }); // slider being synced must initialized first $('#carousel').flexslider({ animation: "slide", controlnav: false, animationloop: false, slideshow: false, itemwidth: 210, itemmargin: 5, asnavfor: '#slider' }); $('#slider').flexslider({ animation: "slide", controlnav: false, animationloop: false, slideshow: false, sync: "#carousel" }); }); </script> </body> </html>
jquerydynamiccontent.js
$(document).ready(function() { var content = $('#div_content'); //pre carregando o gif loading = new image(); loading.src = '../images/ajax-loader.gif'; $('#rmm a').click(function(e) { var arq = pega_arq($(this).attr('href')); abre(arq, content); }); /* iniciando com home */ abre(pega_arq(document.location.href), content); }); function abre(href, content) { content.html('<img id="loader" src="../images/ajax-loader.gif" />'); $.ajax({ url: href, success: function(response) { content.delay(250).hide().html(response).fadein(); } }); } function pega_arq(url) { var file = url.split('#'); return (file[1]) ? file[1] + '.php' : 'home.php'; }
ralos.php
<div id="slider" class="flexslider"> <ul class="slides"> <li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li> <li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li> <li> <img src="images/kitchen_adventurer_donut.jpg" /> </li> <li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li> <li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li> <li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li> <li> <img src="images/kitchen_adventurer_donut.jpg" /> </li> <li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li> <li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li> <li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li> <li> <img src="images/kitchen_adventurer_donut.jpg" /> </li> <li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li> </ul> </div> <div id="carousel" class="flexslider"> <ul class="slides"> <li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li> <li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li> <li> <img src="images/kitchen_adventurer_donut.jpg" /> </li> <li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li> <li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li> <li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li> <li> <img src="images/kitchen_adventurer_donut.jpg" /> </li> <li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li> <li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li> <li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li> <li> <img src="images/kitchen_adventurer_donut.jpg" /> </li> <li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li> </ul> </div>
menu2.php
<div id="rmm" class="rmm" data-menu-style='sapphire' style="padding-top: 15px; padding-bottom: 15px"> <ul> <li><a href='#home' class="btn_menu">home</a></li> <li><a href="#ralos" class="btn_menu">ralos</a></li> <li><a href='#menu' class="btn_menu">menu</a></li> <li><a href='#menu' class="btn_menu">menu</a></li> <li><a href='#menu' class="btn_menu">menu</a></li> <li><a href='#menu' class="btn_menu">menu</a></li> </ul>
Comments
Post a Comment