Photo section is officialy here

Photo section is officialy here

Published July 24, 2016 in Development, Photography, Web - Last update on July 24, 2016.

It's been several months now I release Flickr-Pony and implement a photo gallery on my website. I choosed Unite Gallery for displaying my photos, a nice JS library for create a wall of pics (or slider, or other). I firstly implement it fastly and all works perfectly, but, as usual, some improvements could be made.

What I did

Unite Gallery allows 2 formats of image, the thumbnail and the original. My thumbnails are generaly between 30 and 70KB and originals between 4 and 10MB. So when user select and click on a photo, he can wait a long time before get the photo.

The idea is to put a temporary image before load the original, it could be near 120KB for a fast download. Fortunately Flickr is very useful for that as they store images and resize them in many sizes for many usage. Below a list of available sizes:

  • s little square 75x75
  • q large square 150x150
  • t miniature, 100 on longest side
  • m small, 240 on longest side
  • n small, 320 on longest side
  • - medium, 500 on longest side
  • z medium 640 on longest side
  • c medium 800 on longest side
  • b big, 1 024 on longest side
  • h width 1 600
  • k width 2 048
  • o original image

My thumbnails are in size m, and I think l will be appropriate for the temporary ones.


The backend part is clearly Flickr-Pony subject, I won't write about here. I'll talk more about the frontend part and the small trick I use with Unite Gallery:

var gallery;
    gallery = $("#photo-list").unitegallery({
        gallery_theme: "tiles",
        tile_textpanel_title_text_align: "center",
    gallery.on("item_change", function(index, data){
        var temp_img = $('img[src="'+data.urlImage+'"]');
        if (temp_img.lenght == 0) return

        var new_image = $('<img>',{
            src: data.original,
            style: "display: none; margin: 0px;"
            .one('load', function() {
                temp_img.attr("src", data.original);
            .each(function() {
                if(this.complete) $(this).trigger('load');

After gallery initialization, I bind an action to photo selection:

  1. The default behavior the same: Photo (temporary one) is download and showed to user
  2. In background, original image is downloaded and set as hidden
  3. When download ends, I replace the temporary by the original and reset zoom.

Just usual JS hack...

It could be better...

Yes I know, with time I would do following things:

  • Inform user about original downloading
  • Make a fade effect between small and detailled pics
  • Detect vertical or horizontal ones, yes there's a small bug about it in 16:9 vertical photos




  • ytaletrnku

    ytaletrnku on 01/11/2018 6:32 p.m. #

    viagra online pharmacy <a href="">viagra online</a> viagra complications <a href="">buy cialis australia</a> generic cialis online

  • ltaletgeuy

    ltaletgeuy on 01/12/2018 5:40 p.m. #

    buy generic cialis online <a href="">buy cialis 20mg</a> viagra cialis and levitra <a href="">generic cialis online</a> buy cialis

Post your comment

Comment as . Log out.