SlickGallery API Tutorial
Every SlickGallery installation comes with an inbuilt API, with which you can embed the pictures you've uploaded to the gallery, to other sites, such as your blog's sidebar. In this tutorial we are going to take a look at how to use the API and what it is capable of.
What is SlickGallery's API?
An API is a special programmable interface, which allows you to request data from an application. In our case, this is to allow developers to easily extract the images from their gallery and show them outside SlickGallery's user interface. The API itself is primarily targeted at experienced web developers, however a special jQuery plugin was developed, which makes it really easy to embed your photos anywhere you please.
How to use the plugin?
First you need to include the jQuery library itself and the SlickGallery Plugin in the page you want your pictures to be shown on.
<!-- Including the jQuery library and the slickgallery plugin --> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.slickgallery.js"></script>
You can find the SlickGallery jQuery plugin in the /assets/api/ folder of your SlickGallery directory structure. After including it you can use it in the following manner:
$(document).ready(function(){
$('#galleryHolder').slickGallery({
url : "http://yourisite.com/SlickGallery/", // The address of your gallery
albumid : 50, // You can optionally specify an album id
rpp : 25 // Results Per Page
});
});
You just need to run the plugin against a galleryHolder div (a regular div, in which you want your images to be displayed). You also need to specify your gallery URL as a parameter, and the plugin will do the rest.
There are a couple of optional parameters you can pass to the plugin, organized in the table below:
| Parameter | Required | Default Value | Description |
|---|---|---|---|
| url | yes | - | The URL of your SlickGallery installation. |
| albumid | no | - | If you'd like to only show images from a certain album, provide its id as the value of albumid. You can find the id by looking at the address when your album is opened in SlickGallery. |
| rpp | no | 10 | Results Per Page - how many images you'd like to be shown per page. The maximum value is 100. |
| page | no | 1 | The page with results you want to show. |
| imgWidth | no | 80 | The width of the thumbnail images. |
| imgHeight | no | 60 | The height of the thumbnail images. |
| callback | no | - | This parameter takes a function, which is called when the response from SlickGallery is received. You can use it to override the default behavior of the plugin without messing with the code. The SlickGallery response is passed in a JSON format as the first and only parameter of the function. To be used only by experienced jQuery developers. |
How to use the API?
If you are an experienced developer, and you like to get your hands dirty from time to time, you'd probably want to work directly with SlickGallery's API. The jQuery plugin can be a nice reference for you to see how the API functions. It is based on JSONP and is easy to use.
Your JSONP requests must be send to http://yourisite.com/SlickGallery/assets/api/, where http://yourisite.com/SlickGallery/ is the address of your gallery. You must include a parameter for the name of the callback JavaScript function. You can also pass a number of additional parameters:
| Parameter | Required | Default Value | Description |
|---|---|---|---|
| callback | yes | - | Name of your JavaScript callback function. |
| albumid | no | - | Use it if you want to limit the returned images to a single album. |
| rpp | no | 10 | Results Per Page - how many images you'd like to be shown per page. The maximum value is 100. |
| page | no | 1 | The page with results that is returned. |
A request to the following URL:
http://yoursite.com/SlickGallery/assets/api/?callback=myfunc&rpp=2&page=2&albumid=1
Would yeld the following result:
myfunc({
"pics": [{
"id" : 27,
"imgBig" : "uploads/b/70928edb0e07b6aa-30a347f2cb373ae8.jpg",
"imgSmall" : "uploads/s/70928edb0e07b6aa-30a347f2cb373ae8.jpg",
"imgMid" : "uploads/m/70928edb0e07b6aa-30a347f2cb373ae8.jpg",
"title" : "themask",
"description" : "",
"href" : "?album=1&zoom=27"
},
{
"id" : 26,
"imgBig" : "uploads/b/16697dc6f1e469a4-dbe34f8696810a86.jpg",
"imgSmall" : "uploads/s/16697dc6f1e469a4-dbe34f8696810a86.jpg",
"imgMid" : "uploads/m/16697dc6f1e469a4-dbe34f8696810a86.jpg",
"title" : "thailand",
"description" : "This is from my trip to Thailand!",
"href" : "?album=1&zoom=26"
}]
});