3

I am working with photoswipe and seen the examples available but there's nothing dynamic there.

Has anyone managed to get photoswipe grabbing images from Flickr or other feed or know of any examples anywhere?

Here's the examples url:

[http://www.photoswipe.com/latest/examples/04-jquery-mobile.html][1]
Satch3000
  • 47,356
  • 86
  • 216
  • 346

2 Answers2

2

I created a script that uses the Flickr API and Photoswipe to show a flickr set as a slideshow. It's not fully polished yet, but very simple and usable. Just enter your flickr api key and set id, and it does the rest.

https://github.com/lyoshenka/photoswipe-flickr

Alex Grin
  • 8,121
  • 6
  • 33
  • 57
1

I have this working on my blog (and blogged about how it works briefly here). I'll skip over the basic installation of photoswipe, which you can get from their tutorials. Here's the code I used to access 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>

Place this in your document in the appropriate spot. For me, that's just in a body div.

The more complicated part is below -- some javascript to handle the JSON feed from flickr. This was adapted from an older tutorial from viget.com. Note that I've adapted it to set a variable to detect retina vs non-retina displays and also to automatically count the number of photos returned from flickr. Create a file with the script below and link to it on your PhotoSwipe page(s).

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); 
}

That's basically it. It writes the contents of q into wherever you placed the above <script> into the page. q contains either a 'retina' thumbnail and image or a 'standard' thumbnail and image. Its a little kludgy here and there, but works fine.

It should be pretty trivial to customize to your specific needs and/or remove retina detection, etc.

Ajay Pillarisetti
  • 85
  • 1
  • 6