Jquery slide. Putting some images into it with ajax -
i found jquery.slide.js script internet, pretty well, have modify create want.
first of all, script renders <image>
objects within <div id="slides"></div>
, creates slideshow them.
i ajax info includes image file names within folder code below:
[system.web.services.webmethod] public static list<string> pictures() { list<string> result= new list<string>(); directoryinfo files= new directoryinfo(httpcontext.current.server.mappath("~/images/")); list<fileinfo> file_names = new list<fileinfo>(); fileinfo[] myfiles; myfiles = files.getfiles("*.jpg"); file_names.addrange(myfiles); foreach (fileinfo file in file_names) { result.add(file.name); } homecoming result; }
//
$.ajax({ type: "post", url: "default.aspx/pictures", data: "{}", datatype: "json", contenttype: "application/json; charset=utf-8", success: function (msg) { var indexnum = 0; indexnum = 1; $.each(msg.d, function (i) { $("<img src='resimler/'" + + "'></img>").appendto($(".slidesjs-control")); //this .slidejs-control contains pictures dynamically created script, putting pictures //the pictures firstly set <div id="slides"> mentioned above. divs appended "#slides", image carrier div becomes ".slidejs-control" indexnum++; }); }, error: function (msg) { alert("hata oluştu."); } }); //and goes add together class images within .slidejs-control $(".slidesjs-control", $element).css({ position: "relative", left: 0 }); $(".slidesjs-control", $element).children().addclass("slidesjs-slide").css({ position: "absolute", top: 0, left: 0, width: "100%", zindex: 0, display: "none", webkitbackfacevisibility: "hidden" });
//this original, non-modified slide div
<div id="slides"> <img src="img/example-slide-1.jpg" alt="photo by: missy s link: http://www.flickr.com/photos/listenmissy/5087404401/"> </div>
and modified script version
<div class="container"> <div style="overflow: hidden; display: block;" id="slides"> <div style="overflow: hidden; position: relative; width: 1170px; height: 657.191px;" class="slidesjs-container"><div style="position: relative; left: 0px; width: 1170px; height: 657.191px;" class="slidesjs-control"> . . . <img slidesjs-index="0" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 0;" class="slidesjs-slide" src="img/example-slide-1.jpg" alt="photo by: missy s link: http://www.flickr.com/photos/listenmissy/5087404401/"> . . . . </div> </div> </div> </div>
the ".slidejs-control" div created next line stands right before $.ajax code..
$(".slidesjs-container", $element).wrapinner("<div class='slidesjs-control'>", $element).children(); //ajaxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx $.ajax({ type: "post", url: "default.aspx/resimler", data: "{}", datatype: "json",
the problem is, doesn't render , set images -which dynamically created- slide show. when add together images manually html file, puts them slide show.
i need help here, may cause that?? see there dynamically added pictures below manually added ones in developer tools, not modified , putted slide show.
thank you!
i solved problem next way:
instead of ajax, moved each loop .html file .aspx file...
but want utilize .html problem still here...
jquery ajax append external
No comments:
Post a Comment