Saturday, 13 April 2013

Pimax 1.0 - show all Picasa/G+ albums and images on your website - Jquery plugin


Check out PhotoMax 1.0 - for Google+, Facebook & Instagram photos!

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.







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/Google+ 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


The description of all variables is shown below -



googleUserName
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
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.

If this is not supplied, only the default "Albums" tab will be displayed.
pathToLoadingImage
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)

If this is not supplied, no loading image is shown.
pimaxColumns
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
The width of the Pimax widget.

If this is not supplied, width of Pimax defaults to 640px.
pimaxWidgetHeight
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.

Other functionalities:

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

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

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

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

2. Include plugins

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!


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.


Thanks!

52 comments:

  1. I got this working in blogger using the dynamic theme. However, when you click album link, then album cover, it loads the blog's homepage, rather than the contents of the album.

    Any ideas on how to fix that?

    Thanks.

    ReplyDelete
    Replies
    1. can you please let me know your blog URL or picasa album URL ... and also tell me on which album are you clicking ..?

      Another thing your album must have public access check this in your G+ account...

      Delete
    2. I'm a web designer(and photographer) and just went ahead and starting the painful process of creating a unique blogger theme instead of using the "Dynamic View" theme. It was just way to buggy all around. This script seems to work just fine on the theme I'm working on(based off of the Simple Theme).

      With the Google Plus intergration into Picasa & Blogger, I can't help but move my Wordpress/Flickr to Blogger/Picasa/Plus. It's free, works well, and it will really stream-line my workflow a little better.

      This is a beautiful plugin, and I'm sure I'll be back with some suggestions later. Right now I gotta keep hammering out the core theme.

      Thanks, and keep up the good work.

      Delete
    3. Cool, let me know if you need anything!

      Delete
  2. I finally got around to exploring this Pimax a little further and I have a feature request, but I don't know if it is possible.

    I'd like to see an option to show number of comments per photo or album.
    Also, maybe just out-right show the google+ lightbox(instead of your custom one) when photo is clicked. I think this can be done, if you can figure out how to automate the url.

    Example of what could happen when a photo is clicked: https://plus.google.com/photos/106068371304824526771/albums/profile/5773905409327871458

    Thanks.

    ReplyDelete
  3. Is there a way to show "Albums" by default? Rather than some other albumName?

    ReplyDelete
    Replies
    1. Add the below line in your script tag .. This will select the albums tab by default -

      $(window).load(function(){$('#picasa-albums').click();});

      Delete
  4. Also, there is an issue that is not the scripts fault, but needs improvement if possible. With this plugin, it will show the "Scrapbook Photos", which Google no longer offers, but cannot be deleted. If you visit your Google Plus page, that album will not be listed, but will be listed by the plugin. In most cases, it will be blank. Is it possible to add it as a "hidden" album, so that user's don't see it?

    ReplyDelete
    Replies
    1. Sure, I will address this with your comment requirement .. in the next update of the plugin!

      Delete
    2. Any progress on a solution for this?

      Delete
    3. Can u please share your G+ album link; since I do not have those scrapbook images .. need to see an account that does; to fix this.

      Thanks
      (web.codehandling@gmail.com)

      Delete
    4. You will not see it in G+, as Google removed this feature(was around the beginning of G+). I believe it was originally a Picasa feature, which you can find information on it by googling "Picasa Scrapbook".

      Anyhow,

      You currently can see it showing up on my page here: http://www.xarpixels.com/p/photography.html .

      Before Picasa Web albums was redirected to Google+, you could see it there too.

      However, you currently cannot see it showing up on my Google+ photo area: https://plus.google.com/photos/106068371304824526771/albums .

      FYI, to prove I'm not the only user that has this issue with scrpbook album showing up, this user also has one: 101052845941647002594

      And there are others. It just seems only those who used Picasa has them.

      Delete
    5. I think I have found a solution to the problem that requires nearly nil effort on your part. You can visit your picasa album using this URL: https://picasaweb.google.com/lh/myphotos?noredirect=1 without being redirected to Google+ Photos. From there simply delete the "Scrapbook" and "Profile Photos" albums and the problem is solved. All I ask is to share this information for others who encounter the same issues as I. Thanks.

      Delete
    6. Actually you cannot do away with the "Profile Photos" album. It will just keep coming back when you add a profile photo. For those that just want to show certain albums, the "Profile Photos" always show up regardless. It would be nice to have a way NOT to show this album. I tried using CSS "pimax-img-tnail-box:first-of-type {display:none}", but that broke the grid layout of all the albums. Any other ideas?

      Delete
  5. This is an awesome plugin! The slideshow function isn't working very well on my mobile devices (images showing up to large). Here is where I have it set up: www.alextafoya.com/photos/ . Thanks so much for your work!

    ReplyDelete
    Replies
    1. You need to add the loader.gif file in your photos folder ..
      Your images are quite large in size; the loader.gif is present in the download package

      Delete
  6. Jake,

    I like your script a lot.

    I would like some options to hide some of the details:
    - hide image size: pimax-img-size (this can already be done using CSS)
    - hide image title: pimax-img-list-title (this is a span, so cannot be hidden using CSS ?!? is it possible to hide this by using a jQuery script afterwards ?)
    - hide image resolution: pimax-img-list-views (also a span)
    - hide picUploaded
    So I'd like to just show just the images, without the additional details.

    Additionally I would like to use this script on a Dutch website, but now it uses all English terms:
    - Albums
    - Showing album:
    - 1 month ago
    Could these terms in a next version also by replaced by some kind of options ? In that way one could translate these terms, without the need to change the script.

    I tried to unpack the script, but that left some undefined's in the source. Eventually my changes broke the slideshow, so that was not way to go forward.

    I do not know the license of this script (if it has one), but adding a non-packed source version of this script to the download would be really nice.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  7. Firstly the script looks awesome and I'd sure love to have it replace my current albums section on my site but at the moment it lacks a little something for me.
    If I may humbly make a suggestion or two possibly for Pimax 2.0?:
    After clicking on the album title in the demo version using my photos the album name changes to show a generic code I'm assuming comes from google, would it be possible to keep showing the album title instead?
    It also shows the filename at the moment, can it be made to show the photo captions instead either in the album view or after clicking through to the photo?

    ReplyDelete
    Replies
    1. Sure we are working on all configuration options for this plugin and we will be rolling out the new plugin in our tool - Cloudsmith.

      Please bare with us for a week or two.

      Delete
  8. Hi!! Very nice work!! Thanks alot!!

    But also I want to use it in a spanish web site, is there any way to translate this plugin?? If so i can help you to translate it to spanish!!

    Thanks!!

    ReplyDelete
  9. Run into another problem that I'm not sure there is a fix for it. I moved all javascript files to the bottom of my document for faster page loading. However, it breaks the script because it can't be initialized before the script is loaded(obviously). Anyway to work around this?

    ReplyDelete
  10. if you can add load more features in the right
    PIMAX 1.0

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Is there a way to exclude some specific albums and hide "Albums" tab?

    ReplyDelete
  13. Is there a way for users to go through the album using arrows when they are in single photo mode. Currently it takes them back to the album view where they have to select another picture to view

    ReplyDelete
  14. Hello

    I would like to ask if there's a problem with the plugin or with the connection to picasa.
    Three weeks ago everything were ok, but today the plugin is always "loading", even in the demo version happens the same thing.

    Thanks in advance

    ReplyDelete
  15. Hi, I'm testing this out and it initially worked, but now I'm only getting the image placeholders, rather than the images loading. They are still clickable links. Any thoughts? Also, are you planning any updates to pimax? I'm having trouble changing the background color of the div, too.

    ReplyDelete
  16. Yes, a new version of Pimax will be out soon :)

    ReplyDelete
  17. Hi,

    is there any option to exclude or hide some albums? i would show three sites for the albums from 2013,2014 and 2015. actually it shows all albums with this options on the site.

    regards,
    Reinhold

    ReplyDelete
    Replies
    1. Selective album display will be provided in the next version and will be published in the next 1 or 2 weeks.

      Delete
    2. Hi,

      thanks for the information.

      Reinhold

      Delete
    3. Hi,

      when will you release the new version?

      regards,
      Reinhold

      Delete
    4. In the next week Famax 2.0 will be released. and after that Pimax 2.0.

      So basically in the second week of Feb, Pimax should be live.

      Apologies for the delay, but we received so many requests and features for Youmax and Famax; we had to pick them first. You might wanna check them out :)

      Delete
    5. Hi,

      thanks for the information. The new Youmax script is already in use on our webpage. it is really simple to use and it works perfect. Great job :)

      regards,
      Reinhold

      Delete
    6. Hi,

      ok the second week of february is not really realistic at this time :) hmm second week of march??? :)

      regards Reinhold

      Delete
    7. I really appreciate your patience Sir. Also, having received a lot of requests from people, we have kept a blueprint of Pimax ready.

      This week we are launching Famax 4.0 (with some really cool features). Lets add a one week buffer and make that third week of March max. We should have Pimax launched by then :)

      Again, thank you for your interest and time.

      Cheers
      Jake

      Delete
  18. This comment has been removed by the author.

    ReplyDelete
  19. Can you tell me the steps to add this to a Blogger blog to add pictures from Picasa web albums.

    ReplyDelete
  20. Guys, check out the new and premium version of Pimax 2.0!
    http://www.codehandling.com/2015/03/pimax-20-embed-google-plus-picasa-album.html

    ReplyDelete
  21. Hello!
    All works fine, I want to ask, if I would like to translate/change content of description words like "showing album" etc. to another language, is it possible? How is it possible?

    Thanks!

    ReplyDelete
  22. Guys, check out the new and premium version of Pimax 2.0!

    ReplyDelete
  23. ♠ To get a success, your courage must be greater than your fear. judi poker
    ♠ Success is not measured by wealth, success is an achievement that we want bandar poker
    ♠ Think big, and act now.agen poker
    ♠ The formulas of a success are a hard work and never give up.Agen poker online
    ♠ We can succeed if we learn from mistakes.poker online
    ♠ Tomorrow is a mystery and today is a gift. domino online
    ♠ An action is the foundation of a success.Agen Poker terpecaya

    ReplyDelete