instagram 福利
If you're still rocking an iPhone and fancy taking a photo every now and then, you'd be crazy not to be using an app called Instagram. With Instagram you take the photos just as you would with your native iPhone camera app, but Instagram provides a number of image filters to enhance the appearance of the image you've taken. You can make your photo look brighter, darker, "older", and much more. The photo is saved both on Instagram's service and your local phone.
如果您仍然时不时摇摆iPhone并喜欢拍照，那么不使用名为Instagram的应用程序会让您发疯。 使用Instagram，您可以像使用本机iPhone相机应用程序一样拍摄照片，但是Instagram提供了许多图像滤镜以增强所拍摄图像的外观。 您可以使照片看起来更亮，更暗，“更旧”等等。 照片被保存在Instagram的服务和您的本地电话上。
Like any other service, Instagram also provides an API which allows you to get image, user, tag, and other account information. Christopher Beloch has taken the time to provide a simple set of MooTools classes which act as a wrapper for Instagram's web API. This post will show you how to use Instagram's API, Instagram for MooTools, and some simple CSS and JavaScript to create a very simple photo gallery with which you can view all of your photos at once.
像其他任何服务一样，Instagram还提供了一个API，可让您获取图像，用户，标签和其他帐户信息。 Christopher Beloch花了一些时间提供一组简单的MooTools类，这些类充当Instagram Web API的包装器。 这篇文章将向您展示如何使用Instagram的API，适用于MooTools的Instagram以及一些简单CSS和JavaScript创建一个非常简单的照片库，您可以使用该照片库一次查看所有照片。
You must have an Instagram account to view the demo; there's currently no way for me to open my account for viewing only. Also note that Instagram provides a server-side implementation for OpenAuth; this post will focus on client side only. Lastly, this post's focus is using Instagram for MooTools (authentication, pulling photos, etc.); not creating the most shocking photo gallery ever.
您必须具有Instagram帐户才能观看演示； 目前，我无法打开自己的帐户以供查看。 还要注意，Instagram为OpenAuth提供了服务器端实现； 这篇文章将只侧重于客户端。 最后，本文的重点是将Instagram用于MooTools(身份验证，提取照片等)； 没有创建有史以来最令人震惊的相册。
OpenAuth和创建“应用程序” (OpenAuth and Creating "Apps")
Instagram subscribes to the OpenAuth method of verification that applications like Facebook and Twitter use. To create an Instagram usage client, click here. There are two important piece of information which you'll need to remember from this page: a ClientID which will be used to log into your OpenAuth account, and a RedirectURI which the user will be redirected to once they log in. Creating the app is very simple and you should be through it in a minute -- just remember to save the generated ClientID and RedirectURI you chose.
Instagram订阅了诸如Facebook和Twitter之类的应用程序使用的OpenAuth验证方法。 要创建Instagram使用客户端， 请单击此处 。 您需要在此页面上记住两条重要的信息：一个ClientID(将用于登录到您的OpenAuth帐户)和RedirectURI，该用户在登录后将被重定向到该URL。创建应用程序是非常简单，您应该在一分钟内完成操作-只需记住保存选择的生成的ClientID和RedirectURI。
包括用于MooTools和依赖项的Instagram (Including Instagram for MooTools and Dependencies)
Instagram for MooTools is available on the JavaScript treasure chest MooTools Forge. This set of classes requires MooTools Core and More's Request.JSONP. The basic photo gallery I create will use More's Element.Delegation, but this class isn't required to use Instagram for MooTools. There are multiple classes available with Instagram For MooTools, but the quick photo gallery will only use Base (required for all subclasses) and User (which allows for retrieval of user media).
MooTools的Instagram可以在 JavaScript宝藏 MooTools Forge 。 这组类需要MooTools Core和More的Request.JSONP 。 我创建的基本照相馆将使用More's Element.Delegation ，但是此类不需要将Instagram用于MooTools。 Instagram对于MooTools有多个可用的类，但是快速照片库将仅使用Base(所有子类都需要)和User(允许检索用户媒体)。
在登录 (Logging In)
My page which will host the photo gallery will require authentication to request images. To make sure the user has proper authorization, we'll use this snippet of JavaScript:
我托管照片库的页面需要进行身份验证才能请求图像。 为了确保用户具有适当的授权，我们将使用以下JavaScript代码段：
// Basic settings
var clientId = "YOUR_CLIENT_ID";
var redirectUrl = "http://test.local/instagram.html";
// Create an instance of Instagram with user capabilities
var user = new Instagram({
client_id: clientId,
redirect_uri: redirectUrl
});
// If there's no hash, they aren't logged in
if(!window.location.hash) {
window.location = user.getAuthURL();
}
The code above defines the ClientID and RedirectURI which were provided by Instagram, creates and instance of Instagram, and checks the window.location.hash to make sure an access token is present. If not, the user is sent to Instagram's sign-in page for this app. When the user signs in, they will be redirected to your RedirectURI with an access_token properties in the hash.
上面的代码定义了Instagram提供的ClientID和RedirectURI ，创建了Instagram的实例，并检查window.location.hash以确保存在访问令牌。 如果没有，则将用户发送到该应用程序的Instagram登录页面。 当用户登录时，他们将通过哈希中的access_token属性重定向到您的RedirectURI 。
简单的图库布局 (Simple Photo Gallery Layout)
The photo gallery layout will be two columns: the first column containing the caption and large version of the image retrieved from the service, the second containing clickable thumbnails. The large image will be fixed to the top left, the thumbnails will scroll during page scroll. Here's our basic CSS:
图片库布局将分为两列：第一列包含标题和从服务中检索到的图像的大版本，第二列包含可单击的缩略图。 大图像将固定在左上方，缩略图将在页面滚动时滚动。 这是我们的基本CSS：
#mediaHolderLoading {
border-radius: 8px;
background: #222;
color: #fff;
padding: 5px 10px;
font-family: Monaco, Courier, Monospace;
font-size: 12px;
z-index:200;
}
#mediaHolder.noPhotos #mediaHolderLoading {
background: inherit;
color: #f00;
}
#mediaHolder.noPhotos #largeImageHolder {
display:none;
}
#largeImageHolder {
width: 612px;
height: 612px;
position: fixed;
top: 24px;
left: 27px;
padding:10px;
background: #eee;
}
#caption {
font-size:18px;
color:#444;
}
#thumbHolder {
margin-left: 650px;
margin-top: -5px;
opacity: 0;
padding:10px;
background: #eee;
}
#thumbHolder a {
width: 150px;
height: 150px;
padding: 0 20px 20px 0;
display: inline-block;
}
#thumbHolder img {
display:block;
}
#thumbHolder img:hover {
display:block;
-webkit-transform: rotate(-3deg) scale(1.1);
-moz-transform: rotate(-3deg) scale(1.1);
-o-transform: rotate(-3deg) scale(1.1);
-ms-transform: rotate(-3deg) scale(1.1);
transform: rotate(-3deg) scale(1.1);
}
And the HTML it will style:
以及它将样式化HTML：
<div id="mediaHolder">
<span id="mediaHolderLoading">Loading your photos...</span>
<div id="largeImageHolder">
<img src="" id="largeImage" />
<span id="caption"></span>
</div>
<div id="thumbHolder"></div>
</div>
Nothing groundbreaking or overly complex. Again, this is going to be a very simple gallery.
没有什么开创性或过于复杂。 同样，这将是一个非常简单的画廊。
使用Instagram for MooTools检索图像 (Using Instagram For MooTools to Retrieve Images)
Assuming we're now logged in and authenticated, we can make our move to retrieve images. The getMedia method of our Instagram instance will send a JSONP request to Instagram to retrieve all of the authenticated user's photos:
假设我们现在已经登录并通过身份验证，就可以开始检索图像了。 我们的Instagram实例的getMedia方法将向JSON发送JSONP请求，以检索所有通过身份验证的用户的照片：
// Makes a JSONP request to go get media
user.getUserMedia();
Before we send that request for images, however, we need to set up a listener for when those images are returned. After the browsing the Instagram.User and Instagram.Base source, I discovered the event to listen for is the mediaData event.
但是， 在发送该图像请求之前 ，我们需要为何时返回这些图像设置一个侦听器。 浏览Instagram.User和Instagram.Base源代码后，我发现要监听的事件是mediaData事件。
// Add listener for instagram data reception
user.addEvent("mediaData", function(userPhotos) {
// If there are items received
if(userPhotos.data.length) {
// Do something
}
else {
// Show "no images" message
}
});
The userPhotos var will provide an array with or without images based on the contents of your account. Iterate through the array to work with the result. The addEvent pattern is used throughout the Instagram classes; be sure to look around to find the proper event to listen to though, as it's not always apparent.
userPhotos var将根据您帐户的内容提供一个包含或不包含图像的数组。 遍历数组以处理结果。 在整个Instagram类中都使用addEvent模式。 请确保环顾四周以找到合适的事件来收听，因为这并不总是很明显。
画廊创作 (Gallery Creation)
Now that we can receive and managed the result, it's time to use basic MooTools JavaScript code to build the thumbnails and delegate clicks to show the larger image:
现在我们可以接收和管理结果了，是时候使用基本的MooTools JavaScript代码构建缩略图并委托单击以显示较大的图像了：
// Add listener for instagram data reception
user.addEvent("mediaData", function(userPhotos) {
// Get the media holder text
var mediaHolderLoading = document.id("mediaHolderLoading"),
mediaHolder = document.id("mediaHolder");
// If there are items received
if(userPhotos.data.length) {
// Axe the message
mediaHolderLoading.destroy();
// Get a few elements
var thumbHolder = document.id("thumbHolder"),
largeImage = document.id("largeImage"),
caption = document.id("caption");
// Create the HTML string
var html = "",
template = '<a href="{largeImage}" target="_blank" data-index={index}><img src="{thumbnailImage}" alt="{caption}" /></a>';
// For every photo received
userPhotos.data.each(function(photo, index) {
// Place caption text right on obj for easier access
photo.captionText = (photo.caption ? photo.caption.text : "");
// Append to html
html += template.substitute({
largeImage: photo.images.standard_resolution.url,
thumbnailImage: photo.images.thumbnail.url,
caption: photo.captionText,
index: index
});
});
// Set the large image and caption
largeImage.set("src", userPhotos.data[0].images.standard_resolution.url);
caption.set("html", userPhotos.data[0].captionText);
// Get the thumb holder
thumbHolder.set("html", html).fade(1);
// Add event delgation to listen for clicks
thumbHolder.addEvent("click:relay(a)", function(e, a) {
e.stop();
// Set the image
largeImage.set("src",a.get("href"));
// Get the caption
caption.set("html", userPhotos.data[a.get("data-index")].captionText);
});
}
else {
mediaHolder.addClass("noPhotos");
mediaHolderLoading.set("html", "No photos were found.");
}
});
You'll note that instead of programmatically create and inject nodes into the thumbnail holder, I use string concatenation to generate the HTML. Doing so is faster than node injection. I've also used event delegation to avoid numerous event connections.
您会注意到，我不是使用程序创建节点并将其注入到缩略图保存器中，而是使用字符串串联生成HTML。 这样做比节点注入更快。 我还使用事件委托来避免大量事件连接。
And there you have it: a quick overview of Instagram for MooTools. Christopher Beloch's work provides a great interface to Instagram's API. I look forward to seeing what you create with it!
一切就在这里：MooTools Instagram的快速概述。 Christopher Beloch的工作为Instagram的API提供了一个很好的接口。 我期待看到您用它创造的东西！
instagram 福利
扫一扫
642
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
