javascript - Jquery slider adding slides after page loaded -
i found template kinda works powerpoint browsers, after tried wanted content out of db ajax , have slider content date.
the problem slider works divs , adds classes each div see divs slides are, guess divs made after slide code...
so when run page looks normal webpage , divs under each other instead of hided should be...
when code divs @ home page works fine.
this homepage.php :
<!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <title>biesmans</title> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> <script type="text/javascript" src="bootstrap/js/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="js/home.js"></script> <script type="text/javascript" src="js/index.js"></script> </head> <body id="simpleslides"> </body> </html> my slideshow js :
$(function() { var id = { slideshow : 'simpleslides', slide : 'slide', counter : 'counter', navigation : 'navigation', next : 'next', previous : 'previous', current : 'current' }; var labels = { next : '→', previous : '←', separator : ' / ' }; var $slideshow = $('#'+id.slideshow); var $slides = $slideshow.children().addclass(id.slide); var $currentslide; var $firstslide = $slides.first(); var $lastslide = $slides.last(); $slideshow.append($('<div>').attr('id',id.next).addclass(id.navigation).html(labels.next)); $slideshow.append($('<div>').attr('id',id.previous).addclass(id.navigation).html(labels.previous)); $slideshow.append($('<div>').attr('id',id.counter)); var $counter = $('#'+id.counter); var $next = $('#'+id.next); var $previous = $('#'+id.previous); /*** functions ***/ var updatecounter = function() { // updates counter $counter.text(thisslidepointer + labels.separator + lastslidepointer); } var hidecurrentslide = function() { // hide current slide $currentslide.fadeout().removeclass(id.current); } var nextslide = function() { // hide current slide hidecurrentslide(); // next slide var nextslide = $currentslide.next(); // not last slide => go next 1 , increment counter if ( thisslidepointer != lastslidepointer ) { nextslide.fadein().addclass(id.current); $currentslide = nextslide; thisslidepointer++; } else { // last slide => go first slide , reset counter. $firstslide.fadein().addclass(id.current); $currentslide = $firstslide; thisslidepointer = 1; } // update counter updatecounter(); } var previousslide = function() { // hide current slide hidecurrentslide(); // previous slide var previousslide = $currentslide.prev(); // if not first slide, go previous 1 , decrement counter if ( thisslidepointer != 1 ) { previousslide.fadein().addclass(id.current); $currentslide = previousslide; thisslidepointer--; } else { // must first slide, go last slide , set counter. $lastslide.fadein().addclass(id.current); $currentslide = $lastslide; thisslidepointer = lastslidepointer; } // update counter updatecounter(); } /*** init slideshow ***/ // hide slides $slides.hide(); // first slide number first! var thisslidepointer = 1; // last slide position total number of slides var lastslidepointer = $slides.length; // first slide first slide! let's make visible , set counter $currentslide = $firstslide.show().addclass(id.current); updatecounter(); /*** events ***/ // "next" arrow clicked => next slide $next.click(nextslide); // "previous" arrow clicked => previous slide $previous.click(previousslide); // add keyboard shortcuts changing slides $(document).keydown(function(e){ if (e.which == 39) { // right key pressed => next slide nextslide(); return false; } else if (e.which == 37) { // left key pressed => previous slide previousslide(); return false; } }); }); and ajax call in js file :
$(document).ready(function () { $("#simpleslides").html(""); $.ajax({ url: "index.php/projecten/getprojecten", type: "post", success: function (data) { var projecten = jquery.parsejson(data); (i = 0; < projecten.length; i++) { $("#simpleslides").append( "<div>" + "slider content here" + "</div>" ); } } }); }); edit :
editing init part function , calling function after succes not work :
var thisslidepointer; var lastslidepointer; init = function () { $slides.hide(); thisslidepointer = 1; lastslidepointer = $slides.length; $currentslide = $firstslide.show().addclass(id.current); updatecounter(); }
you need call init slideshow section (from slideshow script) in success function, right after added divs. (and of course remove original script) also, need add initialization lines.
i suggest add init function (remamber declare var's outside function), also, since call function after success ajax call can remove $(function() {}) block:
var thisslidepointer; var lastslidepointer; var $slideshow; var $slides; var $currentslide; var $firstslide; var $lastslide; var $counter; var $next; var $previous; var id = { slideshow : 'simpleslides', slide : 'slide', counter : 'counter', navigation : 'navigation', next : 'next', previous : 'previous', current : 'current' }; var labels = { next : '→', previous : '←', separator : ' / ' }; /*** functions ***/ var updatecounter = function() { // updates counter $counter.text(thisslidepointer + labels.separator + lastslidepointer); } var hidecurrentslide = function() { // hide current slide $currentslide.fadeout().removeclass(id.current); } var nextslide = function() { // hide current slide hidecurrentslide(); // next slide var nextslide = $currentslide.next(); // not last slide => go next 1 , increment counter if ( thisslidepointer != lastslidepointer ) { nextslide.fadein().addclass(id.current); $currentslide = nextslide; thisslidepointer++; } else { // last slide => go first slide , reset counter. $firstslide.fadein().addclass(id.current); $currentslide = $firstslide; thisslidepointer = 1; } // update counter updatecounter(); } var previousslide = function() { // hide current slide hidecurrentslide(); // previous slide var previousslide = $currentslide.prev(); // if not first slide, go previous 1 , decrement counter if ( thisslidepointer != 1 ) { previousslide.fadein().addclass(id.current); $currentslide = previousslide; thisslidepointer--; } else { // must first slide, go last slide , set counter. $lastslide.fadein().addclass(id.current); $currentslide = $lastslide; thisslidepointer = lastslidepointer; } // update counter updatecounter(); } /*** events ***/ // add keyboard shortcuts changing slides $(document).keydown(function(e){ if (e.which == 39) { // right key pressed => next slide nextslide(); return false; } else if (e.which == 37) { // left key pressed => previous slide previousslide(); return false; } }); var init = function () { $slideshow = $('#'+id.slideshow); $slides = $slideshow.children().addclass(id.slide); $firstslide = $slides.first(); $lastslide = $slides.last(); $slideshow.append($('<div>').attr('id',id.next).addclass(id.navigation).html(labels.next)); $slideshow.append($('<div>').attr('id',id.previous).addclass(id.navigation).html(labels.previous)); $slideshow.append($('<div>').attr('id',id.counter)); $counter = $('#'+id.counter); $next = $('#'+id.next); $previous = $('#'+id.previous); $slides.hide(); thisslidepointer = 1; lastslidepointer = $slides.length; $currentslide = $firstslide.show().addclass(id.current); updatecounter(); /*** events ***/ // "next" arrow clicked => next slide $next.click(nextslide); // "previous" arrow clicked => previous slide $previous.click(previousslide); }
Comments
Post a Comment