Hallo
ich bin gerade dabei eine Slideshow responsiveslides.js einzufügen.
Es klappt auch alles nur habe ich ein Problem.
Die Navigation läuft über ajax also fade in fade out animation etc
Nun hab ich das Problem das wenn ich auf den link ,der zu der seite mit der slideshow führt, klicke dann öffnet sich über ajax die seite nur ladet die seite so wies aussieht die js datei von der slideshow nicht , da ich eingestellt habe es soll automatisch weitergehen jedoch passiert nichts und auch die tab navigation unten fehlt, und nur wenn ich erneut auf den link klicke ladet die slideshow richtig.
hier die index.html
seite mit der slideshow home.html
ich bin gerade dabei eine Slideshow responsiveslides.js einzufügen.
Es klappt auch alles nur habe ich ein Problem.
Die Navigation läuft über ajax also fade in fade out animation etc
Nun hab ich das Problem das wenn ich auf den link ,der zu der seite mit der slideshow führt, klicke dann öffnet sich über ajax die seite nur ladet die seite so wies aussieht die js datei von der slideshow nicht , da ich eingestellt habe es soll automatisch weitergehen jedoch passiert nichts und auch die tab navigation unten fehlt, und nur wenn ich erneut auf den link klicke ladet die slideshow richtig.
hier die index.html
HTML:
<!DOCTYPE>
<html>
<head><title>#</title> <meta name="#" content="#"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"> <script src="scripts/javascript.js" type="text/javascript"></script> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> <link rel="SHORTCUT ICON" href="#" type="image/x-icon"> <!-- Fonts--> <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'> <!-- Fonts Ende--> <!-- Scripts --> <script type="text/javascript"> $(document).ready(function() { $("#nav_home").click(function() { $("#content").animate({opacity:"0", filter:"alpha(opacity=0)"}, 200, function() { $("#content").load("home.html", function() { $("#content").animate({opacity:"1", filter:"alpha(opacity=100)"}, 200); }); }); }); $("#nav_blog").click(function() { $("#content").animate({opacity:"0", filter:"alpha(opacity=0)"}, 200, function() { $("#content").load("blog.html", function() { $("#content").animate({opacity:"1", filter:"alpha(opacity=100)"}, 200); }); }); }); $("#nav_videos").click(function() { $("#content").animate({opacity:"0", filter:"alpha(opacity=0)"}, 200, function() { $("#content").load("videos.html", function() { $("#content").animate({opacity:"1", filter:"alpha(opacity=100)"}, 200); }); }); }); $("#nav_photos").click(function() { $("#content").animate({opacity:"0", filter:"alpha(opacity=0)"}, 200, function() { $("#content").load("photos.html", function() { $("#content").animate({opacity:"1", filter:"alpha(opacity=100)"}, 200); }); }); }); $("#nav_aboutme").click(function() { $("#content").animate({opacity:"0", filter:"alpha(opacity=0)"}, 200, function() { $("#content").load("aboutme.html", function() { $("#content").animate({opacity:"1", filter:"alpha(opacity=100)"}, 200); }); }); }); }); </script> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="slides.js"></script> <script> $(function(){ $("#slides").slides(); }); </script> </head>
<body #onload="if(confirm('#';}" style="background:url(Bilder/bg.png) repeat fixed"> <!-- Header --> <div id="header"> Miaui e <img src="Bilder/header_logo.png" alt="" /> </div> <!-- Navigation Bar --> <div id="navigation_bar"> <a class="nb_a" id="nav_home" href="#">Home |</a> <a class="nb_a" id="nav_blog" href="#"> Blog.</a> <a class="nb_a" id="nav_videos" href="#"> Videos.</a> <a class="nb_a" id="nav_photos" href="#"> Photos.</a> <a class="nb_a" id="nav_aboutme" href="#"> About Me.</a> </div> <!-- Content --> <section id="content"> </section> </body>
</html>seite mit der slideshow home.html
HTML:
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="stylesheet" href="slideshow i/responsiveslides.css" /> <link rel="stylesheet" href="style.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="slideshow i/responsiveslides.min.js"></script> <script> $(function () {
// Slideshow 2 $("#slider2").responsiveSlides({ auto: true, pager: true, speed: 300, maxwidth: 1000 }); }); </script></head><body> <div id="wrapper"> <!-- Slideshow 2 --> <ul class="rslides" id="slider2"> <li><a href="#"><img src="http://placehold.it/989x550" alt="" /></a> <!--<p class="caption">Placeholder 1</p>--> </li> <li><a href="#"><img src="http://placehold.it/989x550/ffff" alt="" /></a> <!--<p class="caption">Placeholder 2</p>--> </li> <li><a href="#"><img src="http://placehold.it/989x550/ffaa" alt="" /></a> <!--<p class="caption">Placeholder 3</p>--> </li> </ul> </div></body></html>