Join our HiFi mailing list to receive the latest news & updates

Simple Gallery from Media Tab


This snippet is for dropping at the beginning or ending of your page content.  It pulls images from the media tab and automatically creates a gallery.  Thumbnails are generated for you.  It uses CSS transitions for animation so it looks great on mobile devices and tables.


jQuery 1.4.4 or greater is required for the javascript.



{% if %}
    <ul class="simple-gallery">
    {% for image in %}
        <li id="image-{{ loop.index }}">
            <img src="{{ image.url|imagesize({width: 600, height: 540, crop: false, quality: 90}) }}" alt="{{ image.title }}">
            <span>{{ image.title }}</span>
    {% endfor %}
    <div class="simple-gallery-thumbs">
    {% for image in %}
        <a data-image="#image-{{ loop.index }}">
            <img src="{{ image.url|imagesize({width: 55, height: 35, crop: false}) }}" alt="{{ image.title }}">
    {% endfor %}
{% endif %}


.simple-gallery {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    width: 100%;
    height: 450px;
    .simple-gallery li {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        -webkit-transition: all 800ms;
        -moz-transition: all 800ms;
        -o-transition: all 800ms;
        -webkit-transition: all 800ms;
        transition: all 800ms;
    .simple-gallery li.selected {
        opacity: 1;
    .simple-gallery li img {
        display: block;
        width: 100%;
    .simple-gallery li span {
        position: absolute;
        bottom: 5px;
        right: 0;
        padding: 2px 20px 2px 5px;
        color: white;
        background: rgba(0,0,0,.7);

.simple-gallery-thumbs {
    width: 100%;
    margin-top: 10px;
    overflow: hidden;
    .simple-gallery-thumbs a {
        display: inline;
        float: left;
        margin: 0 5px 5px 0;
        cursor: pointer; cursor: hand;
        opacity: .3;
        -webkit-transition: all 500ms;
        -moz-transition: all 500ms;
        -o-transition: all 500ms;
        -webkit-transition: all 500ms;
        transition: all 500ms;
    .simple-gallery-thumbs a.selected {
        opacity: 1;
    .simple-gallery-thumbs a.hover {
        opacity: .8;
        .simple-gallery-thumbs a img {
            display: block;



    $('.simple-gallery li').eq(0).addClass('selected');
    $('.simple-gallery-thumbs a')
            var imgid = $(this).data('image');
            return false;



To install this snippet, first copy in or include the CSS and Javascript.  If you want IE support, be sure to use the include IE stylesheet.  Then you just need to drop the template into any file you want this to be enabled.  It is nice to add to posts so that it is easy to create galleries at the end of your blog posts.

To change the image or thumbnail dimensions, just adjust the imageresize call in the templates and adjust the necessary css.


  1. There are no comments yet.