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.

Concretly

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;
$(document).ready(function(){
    gallery = $("#photo-list").unitegallery({
        gallery_theme: "tiles",
        tile_enable_textpanel:true,
        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;"
        })
        new_image.hide()
            .one('load', function() {
                temp_img.attr("src", data.original);
                gallery.resetZoom();
            })
            .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

References

 

Comments

  • HaroWagiob

    HaroWagiob on 10/09/2017 5:34 a.m. #

    Lasix (Furosemide) 40 Mg <a href=http://genericviabuy.com>viagra online</a> Baclofene Douleur Priligy Customer Reviews

  • HaroWagiob

    HaroWagiob on 10/13/2017 3:33 p.m. #

    Cephalexin Side Effects Dogs Amoxicillin Capsules Images Levitra Conseil <a href=http://levitrial.com>cialis and levitra</a> Propecia Once A Week Generic Viagra Online Uk

  • Migumype

    Migumype on 11/02/2017 1:24 p.m. #

    Endocarditis Prophylaxis With Cephalexin Prix Viagra Levitra Cialis <a href=http://howmuchisvia.com>viagra</a> Priligy Si Trova In Farmacia Keflex Anerobes Cealis

Post your comment

Comment as . Log out.