display photos w/ jquery externally
thob
Registered Users Posts: 7 Beginner grinner
Hi,
I like to display keyword-based photos on a website by using jquery. It works wonderful with Flickr and I wonder how to get similar results with SmugMug.
Here is what I use with Flickr (jquery is already loaded)
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=gruner+veltliner&s=int&format=json&jsoncallback=?", function(data) {
var target = "#flickr-div";
for (i = 0; i <= 8; i = i + 1) {
var pic = data.items;
var liNumber = i + 1;
$(target).append("<a title='" + pic.title + "' href='" + pic.link + "'><img src='" + pic.media.m.replace("_m.jpg", "_s.jpg") + "' /></a>");
}
});
});
</script>
Here is the webpage, it's a monitoring page for "Grüner Veltliner" the famous Austrian grape variety (Flickr already integrated)=> http://burg.cx/pages/gruner-veltliner-online
How would I do this with SmugMug?
I like to display keyword-based photos on a website by using jquery. It works wonderful with Flickr and I wonder how to get similar results with SmugMug.
Here is what I use with Flickr (jquery is already loaded)
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=gruner+veltliner&s=int&format=json&jsoncallback=?", function(data) {
var target = "#flickr-div";
for (i = 0; i <= 8; i = i + 1) {
var pic = data.items;
var liNumber = i + 1;
$(target).append("<a title='" + pic.title + "' href='" + pic.link + "'><img src='" + pic.media.m.replace("_m.jpg", "_s.jpg") + "' /></a>");
}
});
});
</script>
Here is the webpage, it's a monitoring page for "Grüner Veltliner" the famous Austrian grape variety (Flickr already integrated)=> http://burg.cx/pages/gruner-veltliner-online
How would I do this with SmugMug?
0
Comments
http://wiki.smugmug.net/display/API/Home
I found this also when looking for feeds, but I don't think this is what you want:
http://wiki.smugmug.net/display/SmugMug/Feeds+Examples
Want faster uploading? Vote for FTP!
Hmm, is this a proper JSON url then http://api.smugmug.com/services/oembed/?url=http://www.smugmug.com/keyword/gr%C3%BCner%20veltliner#1383330602_3GhtN6h&format=json&jsoncallback=?
Want faster uploading? Vote for FTP!
http://msphoto.smugmug.com
http://twitter.com/tasmanic
i ended up with this working json-based script
<script type="text/javascript" charset="utf-8">
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=grünerveltliner&s=int&format=json&jsoncallback=?", function(data) {
$.each(data.items, function(i,item) {
if ( i == 9 ) return false;
var curImage = item.media.m;
var myThumb = curImage.replace("_m", "_s");
$("<img class=\"thumb left\"/>").attr("src", myThumb).appendTo("#flickr-div")
.wrap("<a href='" + item.media.m.replace("_m", "_z") + "' rel='prettyPhoto[ue]' title='" + item.title + "' class='vtip'></a>");
});
});
</script>
How would I use an RSS feed from SMugMug to get there? Where and how would I parse it. I'm not a developer so I actually understand the working code above only 50% or so ;-)