University of Vermont

UVM Self-help Web Guide

Photo Galleries

The Web Team currently supports several methods of creating a photo gallery, though you're welcome to try others on your own.

Add photos using Flickr

Many UVM web sites include slideshows using Flickr on their sites. The slideshows are very easy to create and maintain.

How to:

To create your Flickr slideshow, add the images that you wish to appear in a Flickr set. To get code to embed the Flickr show to a web page, just click the share menu in the upper right of any slideshow. From there, grab the embed code or click "customize this HTML" if you want to specify the size of your slideshow. Grab the code and drop it into your blog or favorite web site. Please note, only items that are viewable by anyone and marked as safe will appear in the embedded slideshow. Learn more about how to embed your Flickr stream or slideshow in the help section of the Flickr website.

Add photos using Picasa

Picasa is Google's online tool for photo management. Learn about incorporating Web albums onto your website in the Picasa info section.

Free online photo editing tool

Easy to use photo tools to edit pictures, apply photo effects, and add text.

Simple jQuery slideshow

A very simple slideshow with that fades between two or more images.

How to:
  1. In the code of your page, add the JavaScript which drives the slideshow.
     <script>
     $(function(){
       $('.slideshow img:gt(0)').hide();
       setInterval(function(){$('.slideshow :first-child').fadeOut().next('img').fadeIn().end().appendTo('.slideshow');},3000);
     });
     </script>
     
  2. Next, add the images for your show to a DIV.
     <div class="slideshow">
     	<img src="http://www.uvm.edu/www/images/05.jpg" />
     	<img src="http://www.uvm.edu/www/images/06.jpg" />
     	<img src="http://www.uvm.edu/www/images/09.jpg" />
     </div>
     
  3. You'll need to add a little CSS to keep the images in place.
     .slideshow { position:relative; width:256px; height:256px; }
     .slideshow img { position:absolute; left:0; top:0; }
     

Demo:

jQuery photo gallery using FlexSlider

FlexSlider 2 is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional, responsive image galleries for the web and mobile devices.

How to:
  1. Select a location for your gallery – this can be in your main content area or in a banner.
  2. Create the HTML:
    <!-- Place somewhere in the <body> of your page -->
    <div class="flexslider">
      <ul class="slides">
        <li>
          <img src="slide1.jpg" />
        </li>
        <li>
          <img src="slide2.jpg" />
        </li>
        <li>
          <img src="slide3.jpg" /><p class="flex-caption">Optional caption.</p>
        </li>
        <li>
          <img src="slide4.jpg" />
        </li>
      </ul>
    </div>
  3. Add the jQuery script to the page:
     <script type="text/javascript" src="/www/js/jquery.flexslider-min.js"></script>
     	
  4. Initialize FlexSlider:
     <script>
         var flexsliderStylesLocation = "/www/css/flexslider.css";
         $('<link rel="stylesheet" type="text/css" href="'+flexsliderStylesLocation+'" >').appendTo("head");
         $(window).load(function() {
     		$('.flexslider').flexslider();
     	});
     </script>
     	

    Example:

    • Lorem ipsum

      Optional caption.

    Last modified February 21 2013 11:05 AM