“Swipe Aid”: Using Swipebox to Create a Side-Swipeable Image Gallery for Finding Aids

Digitization projects generate images of archives content – images which allow users to browse the archives online and plan their research visit. Integration of digitized content with finding aids is thus desirable, and has been explored from a range of technical approaches. Previous projects have integrated digitized images both dynamically and statically, and at both the individual and the aggregate level. For examples: the Southern Historical Collection at the University of North Carolina – Chapel Hill uses a JavaScript function to dynamically match finding aid container lists against digitized content each time the finding aid is loaded.[1] The script uses collection and container numbers for match points.[2] Meanwhile, Duke University’s Rare Books, Manuscripts, and Special Collections Library statically integrated thumbnail images for digitized materials with their respective container list entries, by adding image file paths to EAD encoding.[3] Jane Zhang and Dayne Mauney found digitized content represented at both the item and the folder level.[4] Meanwhile, numerous finding aids provide collection-level links to related digital collections.

The Swipe Aid Project provides another technical solution for the integration of digitized content with a finding aid, specifically aimed at mobile environments. This solution uses a free, open-source JavaScript library (Swipebox) to deliver a multi-device-friendly image gallery within the finding aid. The below project description provides a step-by-step explanation of how Swipebox is used to create a finding aid image gallery. This is followed by a summary of initial feedback, which demonstrates the importance of a finding aid image gallery, as well as desired functionality and further areas for development. This article contributes to the growing body of literature on “next-generation” finding aids by presenting a simple solution to the integration of digitized content for mobile environments.

Project Description

The Swipe Aid image gallery is created with Swipebox – a JavaScript library and jQuery plugin for mobile- tablet- and desktop-friendly image galleries with side-swipe functionality.[5] Swipebox was specifically chosen for this project because of 1) its side-swipe functionality, which creates a quick and addicting experience for the finding aid user; 2) its multi-device capability, which increases interaction with the finding aid; and, 3) its simplicity. Swipebox relies on HTML attributes for its behavior, which is fitting for archival metadata.

An explanation of how Swipebox is used to create an image gallery for finding aids is given below. This explanation assumes that the finding aid EAD source file is transformed into an HTML document for display on the Web.

The HTML finding aid calls the jQuery and Swipebox scripts and the Swipebox CSS:

<script src="lib/jquery-2.0.3.js"></script>

<script src="src/js/jquery.swipebox.js"></script>

<link rel="stylesheet" href="src/css/swipebox.css">

Links are given a “swipebox” class, which is bound to the swipebox function:

<script type="text/javascript">

;( function( $ ) {

$( '.swipebox' ).swipebox();

} )( jQuery );

</script>

Thus, when a user clicks on a link with the “swipebox” class, it launches the image gallery. Note that the title attribute in these links creates an image caption.

There are two ways of creating links and invoking the Swipebox function:

  1. Use on-page images as links, which individually launch the image gallery when clicked:[6]
    <a href=http://www.example.com/image.jpg class=”swipebox” title=”caption”>
    <img src=”http://www.example.com/image.jpg”></a>

    This approach is logical when images and/or XLinks to image files are already included in the finding aid data.

  2. Use an array of images, and launch the gallery through a single link.[7] When this is done, the array is included with the binding script above:
    <script type="text/javascript">
    $( document ).ready(function() {
    
      /* Basic Gallery, as in the function above */
      $( '.swipebox' ).swipebox();
    
      /* Dynamic Gallery, using an array */
      $( '#gallery' ).click( function( e ) {
      e.preventDefault();
      $.swipebox( [
      { href : 'http://www.example.com/image1.jpg', title : 'caption text' },
      { href : 'http://www.example.com/image2.jpg', title : 'caption text' }
      ] );
      } );
    });
    </script>

    This approach is logical when images are being newly embedded into the finding aid
    and/or when data is messy.

The Swipebox functionality can be built into an EAD-to-HTML XSLT, if links to digitized versions are part of the EAD source file. But, if this data is not available, images can be manually curated, and intentionally inserted after transformation of the EAD source file to an HTML document. The Swipe Aid Project took the latter approach.

A demonstration can be found at http://www.allisonjai.com/hurston/swipebox.html. This demonstration features images from the Zora Neale Hurston Papers, Special and Area Studies Collections, George A. Smathers Libraries, University of Florida, Gainesville, Florida. Some items from the Hurston papers have been digitized, and are available through the University of Florida Digital Collections (UFDC).[8] This project exported image URLs, metadata URLs, and titles for objects in UFDC, and transformed this data into an array for the Swipebox image gallery:

[
{ href : 'http://www.example.com/image1.jpg', title : '<a href="http://www.example.com/metadata1"> Link text </a>' },
{ href : 'http://www.example.com/image2.jpg', title : '<a href="http://www.example.com/metadata2"> Link text </a>' }
]

The user may swipe or click through images from the collection, and follow caption links (from the title attribute) to the digital object metadata for further information.

In this demonstration, the image gallery is on a separate page from the main finding aid homepage. During testing, it was found that large image arrays slow page-load time – especially on mobile devices. Small image galleries can safely be embedded on a single page. Large galleries are perhaps safer on their own page.

Feedback and Future Directions

The demonstration was shared with colleagues and on social media. Feedback was informally collected through a survey that asked questions about the utility and functionality of the image gallery, as well its impact on collection promotion.[9] This feedback reveals desire for a mobile image gallery, as well as areas for further development of the tool.

When asked how they might use the image gallery in practice, respondents noted its application in the exploratory research stage. In particular, they commented on the image gallery’s ability to speed browsing and orientation to the collection. One respondent wrote, “A great tool for easy ‘flicking’. Previously looking at images took longer to look at individually. This is a time-saver and very attractive.” Currently, the respondents are turning to digital collections platforms and social media to browse digitized content. Integration directly with the finding aid streamlines their work.

When asked whether they would be more likely to share a finding aid if it included the image gallery, every respondent replied affirmatively. Their reasons were a combination of research ease and the novelty value of the gallery. Since word-of-mouth and social media promotion are important factors in collection awareness and discovery, the novelty value can impact research via promotion. That is, because the image gallery creates collection enthusiasm, it generates collection awareness, and thus, collection use.

When asked whether they wished anything was easier, different, or better about the image gallery, most respondents expressed a desire that extended metadata be available on-hover or on-touch. These responses raise two questions: What metadata, beyond the title caption, would users like quick access to? And do users realize that the title caption is a link to the full description? Future study and development will seek to better understand and address this need.

Conclusion

The Swipe Aid Project provides proof-of-concept for the use of Swipebox to generate a side-swipeable, mobile- tablet- and desktop-friendly image gallery that allows users to quickly browse digitized content from the finding aid. Initial feedback shows enthusiasm for the image gallery as both a tool to speed research and a charming collection showcase. This feedback suggests a dual purpose for the Swipe Aid image gallery: one part browsing aid, and one part promotional device.

About the Author

Allison Jai O’Dell is Metadata Librarian and Associate University Librarian at the University of Florida, George A. Smathers Libraries. Her research focuses on the application of library and archives metadata to create engaging user experiences. Learn more from her website, http://www.allisonjai.com

Notes:

1. Southern Historical Collection, University Library, The University of North Carolina at Chapel Hill, “Extending the Reach of Southern Sources: Proceeding to Large-Scale Digitization of Manuscript Collections, Final Grant Report,” (June 2009). http://www2.lib.unc.edu/dc/watson/archivalmassdigitization/download/extending_the_reach.pdf; Tracy M. Jackson, “I want to see it: A Usability Study of Digital Content Integrated into Finding Aids,” Journal for the Society of North Carolina Archivists 9, no. 2 (2012): 20-77;
2. Carolina Digital Library and Archives, “javascript for links between ContentDM and EAD.” http://styleserv.lib.unc.edu/archives/js/digitize.js
3. Richard Collier, “A Funny Thing Happened on the Way to Interactivity: A Case Study of “Enhancing” Finding Aids,” Journal for the Society of North Carolina Archivists 8, no. 1 (2010): 29-42.
4. Jane Zhang and Dayne Mauney, “When Archival Description Meets Digital Object Metadata: A Typological Study of Digital Archival Representation,” The American Archivist 76, no. 1 (Spring/Summer 2013): 174-195.
5. “Swipebox: A Touchable jQuery Lightbox.” http://brutaldesign.github.io/swipebox/
6. Demonstration here: University of Florida Digital Collections, “Russian Philately Resources.” http://ufdc.ufl.edu/rpr
7. Demonstration here: Allison Jai O’Dell, “Zora Neale Hurston Papers Finding Aid Demo.” http://www.allisonjai.com/hurston/swipebox.html
8. University of Florida Digital Collections, “Zora Neale Hurston: Florida Writer & Anthropologist.” http://ufdc.ufl.edu/znhurs/
In Archive