i use query populate gallery:
function gallerycatpopulate(url, listname, target) { var eng = false; if ((window.location.href.indexof("lang=en") > 0)) { eng = true; } // getting our list items $.ajax({ url: url + "/_api/web/lists/getbytitle('" + listname + "')/items?$select=title,english", method: "get", headers: { "accept": "application/json; odata=verbose" }, success: function (data) { completegallerycat(data, target, eng); }, error: function (data) { failuregallerycat(data, target); } }); } function completegallerycat(data, target, eng) { var items = data.d.results; var prefix = ""; var sufix = "<div class='clear'></div>"; //if (eng) // prefix = "<div class='filter selected' data-category='cat-all'>all</div>"; //else // prefix = "<div class='filter selected' data-category='cat-all'>todas</div>"; var menu = ""; var cat = ""; var title = "transporte de materiales"; console.log(title.replace(/\s/g, "_").replace(/[^\w\s]/gi, '')); (var item in items) { if (eng) cat = items[item].english; else cat = items[item].title; menu += "<div class='filter' data-category='" + cat.replace(/\s/g, "_").replace(/[^\w\s]/gi, '') +"'>"+ cat +"</div>"; } $(target).html(prefix + menu + sufix); } function failuregallerycat(data, target) { $(target).text("ocurrió un error en la carga las categorias. por favor revise la consola para más información"); } function gallerycontentpopulate(url, listname, target) { var eng = false; var querygallery = "$select=title,description,enlace,encodedabsurl,categoria/title&$expand=categoria/title$sortfield=title&sortdir=desc"; if ((window.location.href.indexof("lang=en") > 0)) { querygallery = "$select=titleenglish,descriptionenglish,enlace,encodedabsurl,categoria/english&$expand=categoria/english"; eng = true; } // getting our list items $.ajax({ url: url + "/_api/web/lists/getbytitle('" + listname + "')/items?$top=1000&" + querygallery, //url: url + "/_api/web/lists/getbycategory('office'), method: "get", headers: { "accept": "application/json; odata=verbose" }, success: function (data) { completegallerycontent(data, target, eng); }, error: function (data) { failuregallerycontent(data, target); } }); } function completegallerycontent(data, target, eng) { var items = data.d.results; //console.log(items); var menu = ""; var cat = ""; (var item in items) { if(items[item].descriptionenglish==null) items[item].descriptionenglish=""; if(items[item].description==null) items[item].description=""; if(items[item].categoria.results!= null && items[item].categoria.results!= undefined && items[item].categoria.results.length > 0){ cat =setcategories(eng,items[item].categoria.results); } if (eng){ //menu += "<div class='mega-entry " + cat + " cat-all' id='mega-entry-1' data-src='" + items[item].encodedabsurl + "' data-width='' data-height='' data-lowsize=''><div class='mega-covercaption mega-square-bottom mega-landscape-right mega-portrait-bottom mega-red'><div class='mega-title'>" + items[item].titleenglish + "</div><p>" + items[item].descriptionenglish + "</p></div><div class='mega-coverbuttons'><div class='mega-link mega-red'></div><a class=' ' rel='group' href='" + items[item].encodedabsurl + "' title='" + items[item].titleenglish + "'><div class='mega-view mega-red'></div></a></div></div>"; menu += "<div class='mega-entry " + cat + " cat-all' id='mega-entry-1' data-src='" + items[item].encodedabsurl + "' data-width='' data-height='' data-lowsize=''><div class='mega-covercaption mega-square-bottom mega-landscape-right mega-portrait-bottom mega-red'><div class='mega-title'>" + items[item].titleenglish + "</div><p>" + items[item].descriptionenglish + "</p></div><div class='mega-coverbuttons'><a class=' ' rel='group' href='" + items[item].encodedabsurl + "' title='" + items[item].titleenglish + "'><div class='mega-view mega-red'></div></a></div></div>"; }else{ //menu += "<div class='mega-entry "+ cat + " cat-all' id='mega-entry-1' data-src='" + items[item].encodedabsurl + "' data-width='' data-height='' data-lowsize=''><div class='mega-covercaption mega-square-bottom mega-landscape-right mega-portrait-bottom mega-red'><div class='mega-title'>" + items[item].title + "</div><p>" + items[item].description + "</p></div><div class='mega-coverbuttons'><div class='mega-link mega-red'></div><a class='fancybox' rel='group' href='" + items[item].encodedabsurl + "' title='"+ items[item].title +"'><div class='mega-view mega-red'></div></a></div></div>"; menu += "<div class='mega-entry "+ cat + " cat-all' id='mega-entry-1' data-src='" + items[item].encodedabsurl + "' data-width='' data-height='' data-lowsize=''><div class='mega-covercaption mega-square-bottom mega-landscape-right mega-portrait-bottom mega-red'><div class='mega-title'>" + items[item].title + "</div><p>" + items[item].description + "</p></div><div class='mega-coverbuttons'><a class='fancybox' rel='group' href='" + items[item].encodedabsurl + "' title='"+ items[item].title +"'><div class='mega-view mega-red'></div></a></div></div>"; } } $(target).html(menu); var api = $(target).megafoliopro( { filterchangeanimation: "pagebottom", // fade, rotate, scale, rotatescale, pagetop, pagebottom,pagemiddle filterchangespeed: 400, // speed of transition filterchangerotate: 99, // if ue scalerotate or rotate can set rotation (99 = random !!) filterchangescale: 0.6, // scale animation endparameter delay: 20, defaultwidth: 980, paddinghorizontal: 10, paddingvertical: 10, layoutarray: [9, 11, 5, 3, 7, 12, 4, 6, 13] // defines layout types can used in gallery. 2-9 or "random". can define more one, {5,2,6,4} first items orderd in layout 5, next comming items in layout 2, next comming items in layout 6 etc... can use simple {9} item ordered in layout 9 type. }); //console.log("entra"); // fancy box ( live box) media support //console.log("sale"); // filter function $('.filter').click(function () { $('.filter').each(function () { jquery(this).removeclass("selected") }); api.megafilter(jquery(this).data('category')); $(this).addclass("selected"); }); var categoryselected = getparameterbyname("category"); // $('[data-category="office"],[data-category="oficinas"]').click(); // aquí agarramos la primera categoria $(".filter").eq(0).trigger("click"); $("div[data-category='"+categoryselected +"']").click(); jquery(".fancybox").fancybox(); } function failuregallerycontent(data, target) { // console.log(data); $(target).text("ocurrió un error en la carga la sección parallax. por favor revise la consola para más información"); } function getparameterbyname(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new regexp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results === null ? "" : decodeuricomponent(results[1].replace(/\+/g, " ")); } function setcategories(boollang, objresult){ var cat =""; for(var item in objresult){ if(boollang) cat += replaceall(" ", "_",objresult[item].english.replace(/[^\w\s]/gi, '')) + ' '; else cat += replaceall(" ", "_",objresult[item].title.replace(/[^\w\s]/gi, '')) + ' '; } return cat; } function replaceall( find, replace,string) { return string.replace(new regexp(escaperegexp(find), 'g'), replace); } function escaperegexp(string) { return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"); } the problem don´t know why first take 1 image of each category , after images of 1 categorie, example have categories
services, home, office
in first row of images get:
firstimageservices firstimagehome firstimageoffice secondimageoffice thirdimageoffice etc... but want group categorie, be:
firstimageservices secondimageservices thirdimageservices fourimageservices etc... firstimagehome secondimagehome thirdimagehome fourimagehome etc... firstimageoffice secondimageoffice thirdimageoffice fourimageoffice etc.. how can in query group it? regards!
note: of interest in these link msdn how can apply in query sort "title"
so in first fields that: 
when pass first rows of categories want these: 
i change query for:
"$select=title,description,enlace,encodedabsurl,categoria/title&$expand=categoria/title&$orderby=title asc"; 
Comments
Post a Comment