У меня есть эта работа в моем блоге (и кратко о том, как это работает, здесь ).Я пропущу базовую установку photoswipe, которую вы можете получить из их уроков.Вот код, который я использовал для доступа к flickr:
<script type="text/javascript" language="javascript"
src="http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&
api_key=[YOUR APRI KEY]&photoset_id=[YOUR PHOTOSETID]&format=json&
extras=original_format"></script>
Поместите его в свой документ в соответствующем месте.Для меня это просто разделение тела.
Более сложная часть ниже - некоторый javascript для обработки JSON-ленты из flickr.Это было адаптировано из более старого учебника viget.com .Обратите внимание, что я адаптировал его, чтобы установить переменную для обнаружения сетчатки по сравнению с дисплеями без сетчатки, а также для автоматического подсчета количества фотографий, возвращаемых с flickr.Создайте файл с помощью приведенного ниже сценария и создайте ссылку на него на своих страницах PhotoSwipe.
function jsonFlickrApi(rsp) {
//detect retina
var retina = window.devicePixelRatio > 1 ? true : false;
//makes sure everything's ok
if (rsp.stat != "ok"){
return;
}
//count number of responses
var num = rsp.photoset.photo.length;
//variables "r" + "s" contain
//markup generated by below loop
//r=retina, s=standard
var r = "";
var s = "";
//this loop runs through every item and creates HTML that will display nicely on your page
for (var i=0; i < num; i++) {
photo = rsp.photoset.photo[i];
//create url for retina (o=original, bt=big thumb) and standard (st=standard thumb,
//so= flickr "large")
o_url = 'http://farm'+ photo.farm +'.staticflickr.com/'+ photo.server +'/'+
photo.id +'_'+ photo.originalsecret +'_o.jpg';
bt_url = 'http://farm'+ photo.farm +'.static.flickr.com/'+ photo.server +'/'+
photo.id +'_'+ photo.secret +'_q.jpg';
st_url = 'http://farm'+ photo.farm +'.static.flickr.com/'+ photo.server +'/'+
photo.id +'_'+ photo.secret +'_s.jpg';
so_url = 'http://farm'+ photo.farm +'.static.flickr.com/'+ photo.server +'/'+
photo.id +'_'+ photo.secret +'_b.jpg';
r += '<li><a href="'+ o_url +'"><img alt="'+ photo.title +'" src="'+ bt_url +'" title="Click to view '+ photo.title +' full size"/></a></li>';
s += '<li><a href="'+ so_url +'"><img alt="'+ photo.title +'" src="'+ st_url +'" title="Click to view '+ photo.title +' full size"/></a></li>';
}
//should be self explanatory
if (retina){
q = '<div id="MainContent"><ul id="Gallery" class="gallery">'+ r +' </ul></div>'
}
else{
q = '<div id="MainContent"><ul id="Gallery" class="gallery">'+ s +' </ul></div>'
}
//this tells the JavaScript to write everything in variable q onto the page
document.writeln(q);
}
Вот и все.Он записывает содержимое q туда, куда вы поместили выше <script> на страницу.q содержит либо эскиз и изображение «сетчатки», либо «стандартный» эскиз и изображение.Это немного грязно здесь и там, но работает отлично.
Это должно быть довольно тривиально, чтобы настроить под ваши конкретные потребности и / или удалить обнаружение сетчатки и т. Д.