teckstack / 500px-api-test

Simple trick to get user photos using 500px api.

500PX-API-Test

---

Simple code to fetch and display data using 500PX API. If you are a photographer this trick may save little money that you spend on hosting.

Because you upload your photos on 500px.com site, in your profile, and access to display the same on your personal portfolio site.

But the main purpose is to save time in uploadoading the same photographs on multiple sites.

Full Article:
http://teckstack.com/create-portfolio-with-500px-apis

View Demo:
http://teckstack.github.io/500PX-API-Test/

Steps:

1. Goto https://500px.com
2. If you already have an account, please login or else create one for the access
3. Now go to "Settings" link from Profile dropdown:
   https://500px.com/settings
4. Under settings, click on "Applications" and here you have to register your app:
   https://500px.com/settings/applications
5. Make sure to configure all URLs correctly
6. Now you will see "JavaScript SDK Key". Copy that key and replace that in below Script. DO NOT SHARE!

HTML

<section id="main-content" class="col-md-9">
	<h2>A Demo</h2>
    <div id="grid"></div>
</section>

Include 500px.js file before below script. We are going to fetch data from Deval Jayswal.

Script

<script src="js/500px.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<script>
  $(function() {
      _500px.init({
          sdk_key: '1234567890123456789012345678901234567890'	//replace with your 500px js sdk key
      });

      // Get my user id
      _500px.api('/users', function(response) {
          var me = "DevJayswal";
          var siteurl = "http://500px.com/photo/"

          // Get my favorites
          _500px.api('/photos', {
              feature: 'user',
              username: me,
              total_items: 5000
          }, function(response) {
              if (response.data.photos.length == 0) {
                  alert('Nothing found! Please refresh...');
              } else {
                  $.each(response.data.photos, function() {
                      $('#grid').append('<article class="post col-md-3 col-sm-4 col-xs-12 panel panel-default"><h3>' + this.name + '</h3><a href="' + siteurl + this.id + '" target="_blank"><img src="' + this.image_url + '"></a></article>');
                  });
              }
          });
      });
  });
</script>