Photo4Me jQuery Plugin

Following on from the beta release of the WordPress plugin would seem more people are using other providers to show off their photography. To try and make things easier I decided to create a jQuery plugin that does all the basics the WordPress plugin does except it’s a little more technical to setup and won’t have caching nor any other “nice features” such as a slider etc.

I have also included functionality that show’s a loading bar while the plugin is loading the photographs so that the user is aware something is happening.

How it looks

Why so bare?

I’ve made it possible so that with a little CSS knowledge you can tweak if needed the generated html to fit in with any design. Following the K.I.S.S model will allow the plugin to be used out of the box on quite a high percentage of users.

How can I customise it?

Plugin options

Default Code

(function() { jQuery('#photo4Me').getMyPhotos({numberPhotos:5, userId : 14016}); })();

This shows 5 of my images as my Photo4MeId is 14016. Sorry for lack of photographs I rarely use photo4me now.

Pragmatically this is all that needs changed for the plugin to retrieve photographs.

CSS changes

If you know CSS then you’ll be able to tweak any of the following Id/Classes to work with your websites design

.photo4Mecontainer = This holds the listing of the photographs

#photo4Me = The Id of the unsorted list.

#photo4Me li a = Styling of links within the list.

#photo4Me img = Styling of the images within the list.

@-moz-keyframes throbber-loader = This line and anything after is a CSS loader. While the jQuery plugin is retrieving your photographs it will show the user progress bars.

How can I install it?

Weebly

Demo : http://siphilp.weebly.com/store/c1/Featured_Products.html

Install it

Select Site you wish to add the jQuery solution to

Select Embed Code:

Paste the following (changing the userId and number of photographs) :

	<style>
	.photo4Mecontainer{width:100%;word-wrap:break-word;display:block;}
	.photo4Me-li a{text-align:center;margin-top:12px;clear:left;}
	.textwidget a {border-bottom: none;}
	#photo4Me{display:inline;list-style:none;}
	#photo4Me li a{display:inline;width:71px;float:left;}
	#photo4Me a{text-decoration:none !Important;}
	#photo4Me a:hover{text-decoration:none !Important;}
	#photo4Me img{-moz-border-radius:500px;-webkit-border-radius:500px;border-

	radius:500px;width:65px;height:65px;box-sizing:border-box;padding:5px}
	@-moz-keyframes throbber-loader{0%{background:#dde2e7}10%{background:#6b9dc8}40%{background:#dde2e7}}@-

	webkit-keyframes throbber-loader{0%{background:#dde2e7}10%{background:#6b9dc8}40%{background:#dde2e7}}

	@keyframes throbber-loader{0%{background:#dde2e7}10%{background:#6b9dc8}

	40%{background:#dde2e7}}.throbber-loader:not(:required){-moz-animation:throbber-loader 2000ms 300ms

	infinite ease-out;-webkit-animation:throbber-loader 2000ms 300ms infinite ease-out;animation:throbber-

	loader 2000ms 300ms infinite ease-out;background:#dde2e7;display:inline-block;position:relative;text-

	indent:-9999px;width:.9em;height:1.5em;margin:0 1.6em}.throbber-loader:not(:required):before,.throbber-

	loader:not(:required):after{background:#dde2e7;content:'\x200B';display:inline-

	block;width:.9em;height:1.5em;position:absolute;top:0}.throbber-loader:not(:required):before{-moz-

	animation:throbber-loader 2000ms 150ms infinite ease-out;-webkit-animation:throbber-loader 2000ms 150ms

	infinite ease-out;animation:throbber-loader 2000ms 150ms infinite ease-out;left:-1.6em}.throbber-

	loader:not(:required):after{-moz-animation:throbber-loader 2000ms 450ms infinite ease-out;-webkit-

	animation:throbber-loader 2000ms 450ms infinite ease-out;animation:throbber-loader 2000ms 450ms infinite

	ease-out;right:-1.6em}
	</style>

	<script type="text/javascript" src="http://dev.siphilp.co.uk/jquery/photo4me-

	plugin/jquery.photo4me.js"></script>
	<div class="photo4Mecontainer">
	<h2>Photo4Me Gallery</h2>
	<div class="throbber-loader" id="p4meloader">Loading…</div>
	<ul id="photo4Me"></ul>
	</div>

	<script type="text/javascript">
	(function() { jQuery('#photo4Me').getMyPhotos({numberPhotos:8, userId : 14016}); })();
	</script>

view raw

jquery-plugin-photo4me

hosted with ❤ by GitHub

Into:

Done

Adding to WordPress

There is a WordPress plugin but if you prefer you can easily add it in via a widget 🙂

Navigate to Appearance -> Wigets -> Select text/html widget -> drag to where you want it -> post above code

Installing into Clikpic

I need to setup a 30 day trial to look into this (Will sign-up soon). If anyone from Clikpic can help please contact me :).

How can I give feedback or ask for help?

You can contact me through my contact form, or twitter. 🙂

If you’d like to help develop the plugin please get in touch. If you’d like to donate towards development time then that’s also possible :).

Possible Issues

Getting jQuery not Defined Error. Means your site isn’t using jQuery. Just add the following:

Future Actions

Right now I am hosting the javascript file for the plugin, this might change in the future. You can grab this file and upload it to your hosting from GitHub (make sure you update the “src” attribute).