Tiled photo gallery library is the photo gallery application of my own photography page www.sertanyaman.com which I started writing in 2012 using Javascript and today share with other developers in my github repository (https://github.com/sertanyaman/Tiled-photogallery).

It is a responsive, animated jquery photo gallery script which arranges your photos in tiled rows, supports photo previews, infinite scroll, swipe navigation for mobile devices, video embedding, CSS3 animations and ajax server side image loading.

For a demo of how it works, check: http://www.sertanyaman.com/PhotoGallery.cshtml?mode=vitrine

Installing

Download the script, its CSS file example files from the GitHub page of the script. Example already includes the 3rd scripts but if you want to use latest ones, add the 3rd party plugins listed for the script in the GitHub page. My example does not contain the visual Studio generated project folders of “packages” and “bin” for compatibility reasons.  Create a new ASP.NET Website (Razor) project in your Visual Studio, remove any template files VS might add for you (including web.config) and add-replace the files in the project folder with the ones you get from my example. In case they are not up to date, replace the photgallery.js and css files in the example with the ones you downloaded from the ‘src’ folder. Now you should be able to run the example for Tiled Photo Gallery.

Customizing

You need to write a server-side ajax photo feeder (PhotoFeeder.cshtml in example) for infinite scrolling and thumbnail loading and a photo loader (PhotoLoader.cshtml in example) for loading full sized photos when you click on the thumbnails or navigating for scipt to work properly.

Alternatively you can modify the script to work in non-dynamic HTML pages and add all your photos like shown in the template, which I will not cover in that article.

Parameters

The parameters for the library are loaded in the header of the document

     <script>
        var loading = false;
        var page = @page;
        var pagetotal = @pagetotal;
        var maxphotos = @maxphotos;
        var albumid = @albumid;
        var categoryid = @categoryid;
        var galleryid = @galleryid;
        var tagname = "";
        var youtubeembed = "@((String)App["youtubeembed"])";
        var feedurl = "/PhotoFeeder.cshtml";
        @if (Request.Url.Query != "")
        {
            @: feedurl+= "@Request.Url.Query" ;
        }
        var mode = "@mode";
    </script>
  • page denotes the current page for the infinite scrolling feature. Initial default value is 1.
  • pagetotal is the total number of pages, you calculate it by diving number of photos in your photo album to maxphotos value
  • maxphotos is the maximum number of photos per page, used for infinite scrolling. After that number of photos are loaded, loading of new images stop until you trigger infinite scrolling by scrolling down.
  • albumid, galleryid, categoryid, tagname are used for navigation in the example project, you do not need to use them for the script to work.
  • youtubeembed is the prefix for embedded youtube video url. Used for video embedding in the gallery.
  • feedurl is the url for the photofeeder. Next line in code just passes any query string used in the main page to the feed url.
  • mode is the display mode of the photo gallery. By default it displays photos as thumbnails in a photoalbum but there is an option display them as photo album gallery as well. I include the album gallery templates in the Custom helper of the example.

Photo feeder

Photo feeder is the ajax provider for new thumbnails as the gallery script requests new thumbnails from infinite scroll feature. Initially number of thumbnails stated in maxphotos variable is loaded from the page itself. Feeder is only used by the script for infinite scroll.

@{
    int page = Request.Form["page"].AsInt();
    int maxphotos = Request.Form["maxphotos"].AsInt();
    string mode = Request.QueryString["mode"];
}

@{
    //Do your own database query using on the parameters given above (including page) and display them using custom helpers

    switch (mode)
    {
        case "album":
            <text>@CustomHelpers.DrawAlbums(maxphotos)</text>
            break;

        default:
            <text>@CustomHelpers.DrawThumbnails(maxphotos)</text>
            break;
    }
}

This code is taken from the example, to be able to feed the gallery with new thumbnails, you need to generate yourself a SQL query string using the page variable given and send the new thumbnails for those in response.

Photo loader

Photo loader is used for loading full sized photos and extended photo information for photo preview popup. If you click on the thumbnails, this is called by the photo gallery script to load full image popup when user clicks on the thumbnail, or navigates in the full image popup.
This ajax provider should return a json in the format below containing full size photo and extended photo information of the given photo (from given photo id parameter) :

{
"path":"/Photos/0/Photo.jpg",
"name":"Test viewer",
"hits":"188",
"description":"desc photo",
"camera":"NIKON D7200",
"lens":"Nikon 300mm f4 PF",
"focal":"420mm",
"aperture":"f8",
"shutter":"1 / 1600",
"iso":"1800",
"datetaken":"20 - 4 - 2016",
"place":"Netherlands",
"albumid":"0",
"albumname":"My Album",
"hasstock":"0",
"videoid":""
}

Loading videos

Loading videos is possible by returning the Youtube videoid from your photo loader code or passing videoid parameter to “DrawPhotoBox” custom helper in the example. Then your thumbnail receives a play icon and will embed your video automatically if you open the image popup.

 

 

[adinserter block=”11″]

Leave a Reply