Office of Web Technologies & Content Coordination

New Titles Carousel

This tutorial will show you how to turn a new titles list into this:



NOTE: Please be aware that this tool will only work on pages hosted on the domain www.library.illinois.edu.If you are managing your content through the CMS, you won't be able to see your list functioning when you preview the page (cms.library.illinois.edu). You'll need to save your work, publish your page, and then view it from the www.library.illinois.edu address.

  1. Create your own New Titles List. Select the appropriate options for your unit, and then click the "Create RSS Link" button. Make sure to copy and save the RSS link somewhere handy (for instance, into a notepad document). You can even leave the New Titles window open for now and come back to copy the RSS link when you need it for step 3.
  2. Copy the code below:

    <div id="library_ugl_new_books_list_container"></div>
    <div>
    <script type="text/javascript"><!--
    var bookRSS = "http://www.library.illinois.edu/newtitles/view.php?type=rss&units=19&dateFixed=month&sort=callno";
    var bookTitle = "New Books Title";
    var numImages = 10;
    // --></script>
    <script src="http://www.library.illinois.edu/carousel/bookcarousel.js" type="text/javascript"></script>
    </div>
  3. If you want the carousel to appear on a library page within the CMS, go to edit that page.
  4. Click on the "Edit HTML Source" icon.
  5. Determine where on the page you want the carousel to appear and paste the copied code there.
  6. Now we'll need to edit some of that code we just pasted in.
  7. Look at the line reading "var bookRSS ="
  8. Replace the URL that appears there with the RSS link you created in Step 1. Note: Make sure that you leave the opening and closing quotation marks (") and that you finish the line with the semicolon (;)
  9. Look at the line reading "var bookTitle ="
  10. Replace the "New Books Title" text here with the text you would like to be displayed in the link above your New Books Carousel. Again, make sure to type or paste this content in between the quotes, and end with the semicolon
  11. Look at the line reading "var numImages ="
  12. Change the number "10" to however many book covers you want displayed at once. This will directly effect the overall width of the new book carousel. Note: You don't want to have any quotes around the number here, but you still need to end with a semicolon.