Problemen Fotogallerij
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
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);
}
$('#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!
Ik heb zojuist gekeken in:
Firefox: F12 > Console > all
IE: F12 > Debugger (misschien moet je op de "play" knop drukken om dingen te tracken)
Chrome: F12 > Console
Deze geven alle direct (of na een refresh als je de console hebt geopend) deze foutmelding weer...
Je script loopt vast omdat link (regel 88) ongedefineerd is.
Daarnaast: tijd om eens een stapje terug te doen. Wat ben je aan het doen: je raadpleegt continu een API voor het opvragen van informatie omtrent foto's / fotoalbums.
Hoe vaak verandert de samenstelling van de (inhoud van de) albums? Je zou de resultaten van de "vragen" die je stelt via de API ook kunnen cachen in lokale database-tabellen. Dit heeft twee voordelen:
- je kunt deze data rechtstreeks via PHP-code manipuleren in plaats van een hele zwik JavaScript te schrijven, waarbij je alles op elkaar moet afstemmen in verband met de aard van je requests (asynchroon, zie andere thread over dit onderwerp)
- je hoeft de API niet elke keer (elke page access) aan te roepen, dit zou je bijvoorbeeld op gezette tijden via een cronjob / bijbehorend "importscript" kunnen doen
Ik zou ff een bezinningsmoment inlassen om te kijken of er misschien niet een andere/eenvoudigere oplossing is voor wat je probeert te bereiken.
Je hebt inderdaad gelijk dat ik beter een cache/cronjob kan gebruiken. Dit zal ik later inderdaad ook aanpassen.
Maar toch vraag ik me af waarom het nu zo niet werkt. Ik had inderdaad gezien dat ik de foutmelding link niet gedefineerd kreeg. Maar kun je mij uitleggen wat ik hierin dan fout doe? Ik gebruik namelijk eerst MakePage dan zou hij li in link moeten zetten (dit doe ik omdat ik hier nog pagina's omheen zou willen bouwen) en daarna MakePageComplete, maar daar lijkt hij dus het variabel weer kwijt te zijn?
Of heeft dit misschien ook te maken met de reactietijd in JSON en het javascript wat gewoon doorloopt?
Zoals Thomas vermeld zou cronjobs een oplossing kunnen bieden. Het vereist wel dat je de mogelijkheid hebt om cronjobs uit te kunnen voeren op de server. In Windows kan je dit vertalen naar "Scedualed tasks". Hier kan je documentatie van vinden over het internet aangezien het besturings systeem verschillend is.
Heb je deze toegang niet, zou je een script in PHP kunnen schrijven of vinden op internet die deze functie emuleerd met behulp van een database of file aanmaakt om te kijken wanneer dit voor het laatst is gedaan.
Daarbij moet je ook toegang hebben op je webserver om URL's te openen, bij sommige webhostings staat dit uit en kan je dit ook niet aanzetten. Eventueel zou je dan nog kunnen kijken of cURL werkt op jouw webserver maar is het wat lastiger in gebruikt.
Als je buiten die boot valt zou het wel met ajax moeten en dit verwerken in een post waarbij je de gegevens upload naar je server ten koste van de user die op jouw website komt.
Kortom, het ligt volledig aan jouw situatie wat jouw "beste" oplossing is.
Gewijzigd op 31/05/2015 00:47:15 door Johan K
Ik kan inderdaad cronjobs uitvoeren, maar dan zal ik toch nog via JSON de gegevens uit de API moeten verkrijgen?
Wat ik eigenlijk meer afvraag is, wat doe ik met deze gegevens. Hoe zou ik deze weg kunnen schrijven in mijn database zodat ik alle gegevens heb die ik later nodig heb om aan de websitebezoekers te tonen?
Toevoeging op 31/05/2015 21:56:26:
Iemand die me uit kan leggen hoe ik de gegevens het beste uit de API krijg en weg kan schrijven naar een database?
Ik dacht zelf om de request voor de album lijst uit te voeren en dan per album is in mijn database kijken of deze bestaat en dan van daaruit inladen, mocht ie niet bestaan dan een request uitvoeren en in tabel wegschrijven.
Als laatste voer ik iedere 24 uur een cronjob uit die mijn albumlijst tabel leeggooid, zodat ik alles 1x per dag update.
Is dit een manier om dit in de praktijk te doen?
Gewijzigd op 31/05/2015 21:57:04 door D B