61 jQuery Image and gallery plugins

Presenting list of 61 jQuery plugins for galleries and slideshows. All of them are different and you can choose from them depending on the project you are working on.

If you come across any plugin which I have  not included here, please take a moment to add it in comments. I will update the post. The list is in alphabetical order.

1gallery

Continue reading

Simple way to search Flickr API using PHP

Flickr provides a large number of API methods which you can use to search for images, contacts, comments, notes etc.
This post will show the use of one simple method flickr.photos.search to search images using PHP. We will send a REST request and will ask for a JSON response. Though this method allows you to search using tags, text, date and others parameters, we will restrict to the use of only tags in this example. You are free to add other paramters.

First of all you will need an api_key which is mandatory to use with flickr api. Go to http://www.flickr.com/services/apps/create/ and get one. We are ready to jump into code now.

First define the search parameters and create the URL to which the request will be sent.

$api_key = "YOUR_API_KEY_HERE";
$tag = 'flower,bird';
$perPage = 25;
$url = 'http://api.flickr.com/services/rest/?method=flickr.photos.search';
$url.= '&api_key='.$api_key;
$url.= '&tags='.$tag;
$url.= '&per_page='.$perPage;
$url.= '&format=json';
$url.= '&nojsoncallback=1';

Assign your api key to variable $apiKey. $tag is the tag name you want to search for. You can enter more then 1 tag separated by commas. $perPage is the number of results in a single response.
Assign these variable to corresponding keys in URL and set the format to json. nojsoncallback = 1 will give us raw json instead of wrapping it up in a callback function.

Now try to get the results from flickr. Once response JSON is received, use json_decode to convert it to an object so that we can iterate on it and get values.

Continue reading

19 Things NOT To Do When Building a Website

Here is a very useful post I found today. 19 mistakes to avoid while designing websites. Although, I am no expert on designing but I have found myself making some of these mistakes then and now.

Some of my favorites from the list are:

  • If your website does not work in Firefox, welcome to 2007 DUMBASS.
  • If your site needs a search engine for users to find information, it’s time to start over and fire the guy who came up with the site map (and those slick drop downs on your nav)

and most important (for me at least)

  • Just because a technology is new, or you just discovered it does not make it suitable to put on a business website, JUST BECAUSE you can. – Absolutely right – I did this with AJAX.

Do read the full post on Josiah Cole’s blog.

FAQ: Specifying css page breaks after or before elements for printing

While printing web pages you can specify the browser to insert page breaks before or after certain elements. This can be handy for printing documents like tickets, vouchers where information must be grouped and displayed on separate pages.

There are 2 CSS properties which can be used to insert page breaks in HTML while printing. These are page-break-after and page-break-before.

For example, consider a page with following html:


	
		
	
	
		<p>First paragraph</p>
		

Second Paragraph

Third Paragraph

page-break-after

If you want page break after a particular element add the following css to it.

page-break-after:always

This will force the following element to print in a new page. If it is applied to second paragraph in above html, third paragraph will be printed on a new page.

page-break-before

If you want page break before a particular element add the following css to it.

page-break-before:always

This will insert a page break just before current element, hence printing it on a new page. If it is applied to second paragraph in above html, second paragraph itself will be printed on a new page.

Full reference for these properties can be seen at W3.org

5 must have firefox addons for every web developer

Being a web developer there are some tools which I need and use on daily basis. Here are 5 such addons I think every web developer should install on their firefox.

1- Web developer toolbar

Home: http://chrispederick.com/work/web-developer/

Install: https://addons.mozilla.org/en-US/firefox/addon/60

Web Developer Toolbar

This addon adds a toolbar and a menu to firefox. The toolbar contains several mini tools in it to perform various tasks. It has 11 built in menus for different tasks like cookies, css, forms, html, images and many others. You can read a review of web developer toolbar here.

2- JSONView

Home: http://benhollis.net/blog/2009/02/24/jsonview-view-json-documents-in-firefox/

Install: https://addons.mozilla.org/en-US/firefox/addon/10869

JSON is becoming more popular day by day as a data exchange format. JSONView allows you to view json documents in the browser itself without having to open in any text editor and format it. Local files can also be seen if they have .json extension. It formats the document nicely and also provides options to collapse/expand nodes too (just like XML).
In case of invalid json it reports an error.

3- Fireftp

Home: http://fireftp.mozdev.org/

Install: https://addons.mozilla.org/en-US/firefox/addon/684

You will not have to open a separate ftp client if you use this. To open Fire FTP, go to Tools -> Fire FTP on firefox menu bar. It opens an easy to use interface in a new tab. You can create multiple accounts and you will get all the features that you expect from a ftp client.

From the site: “Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SFTP, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and much more!”

Continue reading