Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
New Books
Creating an online display to
highlight new additions to your
collection
Jaime Jones
ILS Administrator
Arizona S...
Why highlight new material?
Patron awareness
Library value
Physical shelf
Doesn’t show e-books
Limited subset of material
Not accessible to online
patrons
https://www.pinterest.c...
Virtual shelf
Electronic and print material
together
Material from all libraries
Accessible to all patrons
Provide mul...
Examples
Advantages of the carousel
Visual
Auto-scroll and manual scroll
Mobile friendly
Compact
What to display?
No serials
Items with cover images
Material types
Locations
Subject areas
Creating a display
https://bitbucket.org/curtin-library/virtual-
bookshelf
Download code repository
Substitute Covers
Creating a display
Upload bookshelf.js to your web server
If using substitute covers, also upload
substitute.css and boo...
Creating a display
<head>
...
<script src=
"//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script...
Creating a display
<head>
...
<script src=
"//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script...
Creating a display
For substitute covers, also link to the
stylesheet:
<link rel="stylesheet" type="text/css"
href="substi...
Creating a display
<body>
...
<div id="virtual-bookshelf"
style="width: 700px; height: 300px">
</div>
...
</body>
Creating a display
<script type="text/javascript">
var books = [
{
title: 'The Adventures of Sherlock Holmes',
image: 'htt...
Creating a display
<script type="text/javascript">
$(function() {
var bookshelf = new VirtualBookshelf.Carousel('#virtual-...
Getting the data
Manually generate the file
Create a process to translate the data
into the file
Pull data from system ...
Getting the data
Sierra API MySQL Database
PHP queries the MySQL DB and inserts
the data into the page
Promotion
Mini-carousels
Social media
Thank you
jaime.jones@asu.edu
Upcoming SlideShare
Loading in …5
×

New Books: Creating an online display to highlight new additions to your collection

322 views

Published on

Adding a virtual bookshelf display of new material to your library website: what to consider and a basic how-to on getting started.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

New Books: Creating an online display to highlight new additions to your collection

  1. 1. New Books Creating an online display to highlight new additions to your collection Jaime Jones ILS Administrator Arizona State University Libraries
  2. 2. Why highlight new material? Patron awareness Library value
  3. 3. Physical shelf Doesn’t show e-books Limited subset of material Not accessible to online patrons https://www.pinterest.com/pin/534591418238178326/
  4. 4. Virtual shelf Electronic and print material together Material from all libraries Accessible to all patrons Provide multiple display options
  5. 5. Examples
  6. 6. Advantages of the carousel Visual Auto-scroll and manual scroll Mobile friendly Compact
  7. 7. What to display? No serials Items with cover images Material types Locations Subject areas
  8. 8. Creating a display https://bitbucket.org/curtin-library/virtual- bookshelf Download code repository
  9. 9. Substitute Covers
  10. 10. Creating a display Upload bookshelf.js to your web server If using substitute covers, also upload substitute.css and book200.png
  11. 11. Creating a display <head> ... <script src= "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script src="bookshelf.js" type="text/javascript"></script> ... </head>
  12. 12. Creating a display <head> ... <script src= "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script src="bookshelf.js" type="text/javascript"></script> ... </head>
  13. 13. Creating a display For substitute covers, also link to the stylesheet: <link rel="stylesheet" type="text/css" href="substitute.css">
  14. 14. Creating a display <body> ... <div id="virtual-bookshelf" style="width: 700px; height: 300px"> </div> ... </body>
  15. 15. Creating a display <script type="text/javascript"> var books = [ { title: 'The Adventures of Sherlock Holmes', image: 'http://covers.openlibrary.org/b/isbn/9780688107826-M.jpg', link: 'http://en.wikipedia.org/wiki/The_Adventures_of_Sherlock_Holmes' }, /* ... more items ... */ ]; </script>
  16. 16. Creating a display <script type="text/javascript"> $(function() { var bookshelf = new VirtualBookshelf.Carousel('#virtual- bookshelf', { stream: new VirtualBookshelf.ArrayStream(books) }) }); </script>
  17. 17. Getting the data Manually generate the file Create a process to translate the data into the file Pull data from system automatically
  18. 18. Getting the data Sierra API MySQL Database PHP queries the MySQL DB and inserts the data into the page
  19. 19. Promotion Mini-carousels Social media
  20. 20. Thank you jaime.jones@asu.edu

×