The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

Pimax jQuery plugin : Show all Picasa/G+ albums and images on your website

Tags :

Plugin rate :

Pimax displays a photo gallery from your Picasa/G+ albums. The Public albums are pulled from your account and dsiplayed on your website. You can add a public album or add some images to your G+ account; it will be reflected on your website with this plugin!

 

You can also add tabs in Pimax for a specific albums you want to highlight. (Like I have a tab for ""cH Best"" album in my live demo!)

 

Features :
- you can customize width and height of the widget on your website. - columns for the thumbnails can be customized (Example: you can now have a 3/4/5-column layout for the pics displayed.)
- the widget itself is responsive; given a width or % for the widget, the inner contents will resize accordingly.
- parts of the plugin like header/tabs can be hidden as per requirement.

Implementation: 

HOW TO USE

The download pack contains the plugin file - pimax.min.js and the HTML file deployed in the demo pimax-albums.html

 

1. SPECIFY YOUR PICASA / GOOLE+ USER ID

Enter your Google User Id in a piece of javascript as shown below.
Ex: web.codehandling@gmail.com

You may also enter your Google+ profile URL.
Ex: http://plus.google.com/104945011440675361336

 

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
 var googleUserName = "web.codehandling@gmail.com"; 
 // or use "http://plus.google.com/104945011440675361336/photos"
  
 //optional parameters-----------------------------------------------
 var albumNames = ["cH Best","profile photos"];
 var pathToLoadingImage = "./loader.gif";
 var pimaxColumns = 3; 
 var pimaxWidgetWidth = 900;
 //var pimaxWidgetHeight = 1000;
</script>

 

 

Other functionalities:
To hide the account info header (black) of Pimax widget, add the below code in your css

1
#pimax-header{display:none !important;}

 

To hide the tabs of Pimax widget, add the below code in your css

1
#pimax-tabs{display:none !important;}

 

To specify the width of Pimax widget as a percentage(%), add the below code in your css

1
#pimax{width:100% !important;}

 

For any other specific requirement, just let me know and I will provide a hack!

 

 

2. INCLUDE PLUGIN

Include the jQuery plugin if not done already. Now, include the plugin pimax.min.js before the end of your body tag and you are done!

1
2
3
4
5
6
<body>
  ...
  ... 
  <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
  <script src="./pimax.min.js"></script>
</body>

 

 

3. CREATE A CONTAINER FOR YOUR INTERFACE

Add a div as shown below in you HTML. This div will contain the Pimax widget and display your Albums and images.

1
<div id="pimax"></div>
Options: 
googleUserName
String
This must be your picasa username (Ex: web.codehandling@gmail.com). You may also enter your Google+ profile URL. (Ex: http://plus.google.com/104945011440675361336) This is a mandatory attribute.
albumNames
Array
Provide the names of your Albums that you want to display in the tabs of Pimax UI. These Album names must be in double quotes and comma separated.(Ex: "My Album1","My Album2"). These albums in your G+ account should have public visibility.
pathToLoadingImage
String
This the path to a loading image that is used by Pimax. Basically this image is shown when the next image is loading in the lightbox. (I have provided a loading image in this download; just provide the path to that image after you upload it to your server
pimaxColumns
Integer
Default : 2 - The number of columns (for image thumbnails) to be displayed in the body of the widget. If this is not supplied, a 2-column layout will be selected and displayed.
pimaxWidgetWidth
Integer
Default : 640 - The width of the Pimax widget. If this is not supplied, width of Pimax defaults to 640px.
pimaxWidgetHeight
Integer
The height of the Pimax widget. Ideally this value should not be supplied. If this is not supplied, the Pimax widget takes the minimum height it needs to display all image thumbnails from you Google+ albums.
Screenshots

Comments

Guys, you can also try the Pimax version 2.0 -
http://www.codehandling.com/2015/03/pimax-20-embed-google-plus-picasa-album.html

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.4
Current version
1.0
Browsers compatibility
Google ChromeIE 9Mozilla FirefoxOperaSafari
Comments [1]