Ben ondertussen een heel eind verder met mijn Fotogallerij.
Ik loop tegen 2 dingen aan.
1) Omdat ik met JSON werk komt mijn volgorde van albums/foto's niet goed terug.
2) Ik wil een pagina-indeling maken voor bijvoorbeeld 15 foto's per pagina. Onderaan het script probeer ik dit te doen, maar ergens door de functieoproep MakePage en MakePageComplete werkt het script niet meer.
function loader(){
$('#list').remove();
var list = $("<section\/>")
.attr("id", "list");
var $loaderdiv = $("<div\/>")
.attr("id", "loaderdiv")
.attr("class", "loaderdiv");
var $loader = $("<img\/>")
.attr("alt", "Loading...")
.attr("id", "loader")
.attr("src", "http://www.zscwesterhoven.nl/images/ajax-loader.gif");
$('#contentframe').append(list.append($loaderdiv.append($loader)));
}
function GetAlbums(key){
loader();
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=" + key + "&user_id=133322121@N07&format=json&jsoncallback=?", function(setdata) {
$.each(setdata.photosets.photoset, function(a, set) {
var $linka = $("<a/>")
.attr("href", "http://www.flickr.com/photos/mjryall/sets/" + set.id)
.attr("title", set.title._content + ' (' + set.description._content + ')')
.attr("target", "_blank");
var $link = $("<a/>")
.attr("href", "#")
.attr("title", set.title._content + ' (' + set.description._content + ')')
.attr("onclick", "javascript:GetFotos('" + set.id + "','" + key + "','" + 1 + "');");
var $album = $('<div\/>')
.attr("class", "album");
var $albumtitle = $('<div\/>')
.attr("class", "albumtitle")
.text(set.title._content);
var $albumdescription = $('<div\/>')
.attr("class", "albumdescription")
.text(set.description._content);
var $albumphotos = $('<div\/>')
.attr("class", "albumphotos")
.text(set.photos + " foto's");
var $albumviews = $('<div\/>')
.attr("class", "albumviews")
.text(set.count_views + "x bekeken");
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=" + key + "&photo_id=" + set.primary + "&format=json&jsoncallback=?", function(albumdata) {
var $coveroverlaybottom = $('<div\/>')
.attr("class", "coveroverlaybottom");
var $coveroverlaytop = $('<div\/>')
.attr("class", "coveroverlaytop");
var $albumcover = $('<div\/>')
.attr("class", "albumcover");
var $coverimage = $('<img\/>')
.attr("src", "https://farm" + albumdata.photo.farm + ".staticflickr.com/" + albumdata.photo.server + "/" + albumdata.photo.id + "_" + albumdata.photo.secret + "_q.jpg")
.attr("alt",albumdata.photo.description._content)
.attr("class","photoalbum");
var li = $album.append($link.append($albumcover.append($coverimage)).append($coveroverlaybottom.append($albumdescription).append($albumphotos).append($albumviews)).append($coveroverlaytop.append($albumtitle)));
MakePage(li);
});
});
});
MakePageComplete();
}
function GetFotos(id,key,page){
loader();
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=" + key + "&photoset_id=" + id + "&format=json&jsoncallback=?", function(photoalbumdata) {
$.each(photoalbumdata.photoset.photo, function(b, photodata) {
var $photo = $('<div\/>')
.attr("class", "photo");
var $photocover = $('<div\/>')
.attr("class","photocover");
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=" + key + "&photo_id=" + photodata.id + "&format=json&jsoncallback=?", function(photo) {
var $photoimage = $('<img\/>')
.attr("src", "https://farm" + photo.photo.farm + ".staticflickr.com/" + photo.photo.server + "/" + photo.photo.id + "_" + photo.photo.secret + "_q.jpg")
.attr("alt","")
.attr("class","photo");
var li = $photo.append($photo.append($photocover.append($photoimage)));
MakePage(li);
});
});
});
MakePageComplete();
}
function MakePage(li){
//Hier wil ik een pagina opdeling gaan maken om de 15 foto's een <div class="pagina1...pagina2"> ofzoiets
var $link = li;
}
function MakePageComplete(){
$('#loaderdiv').remove();
$('#list').append(link);
}
Mijn testpagina: http://www.zscwesterhoven.nl/fotostest.php
Alvast bedankt voor de hulp!
