jCarousel

A collection of book cover images or custom product images can be displayed in the form of a carousel. In Drupal, a carousel is a type of ‘view’. The jCarousel module is enabled upon request. If you wish to create a carousel on your site, please contact us with a request to enable the JCarousel module.

PREPARE TO CREATE YOUR jCAROUSEL VIEW FOR BOOK COVERS

One of the easy ways to create a carousel of book covers it to first create a book list of all the books, and then pull the cover images of those books into a carousel.            

1. Create the booklist - instructions to create a book list can be found here: Creating Booklists
2. Retrieve the NID (node ID) of the page containing your booklist - you will need it for step 25 of creating your view. This can be done by navigating to ‘Content’ and selecting ‘Edit’ for the page that contains your booklist. While viewing the page in ‘edit’ mode look at the URL and make note of the NID. Example: node/151/edit

CREATE YOUR jCAROUSEL VIEW FOR BOOK COVERS

NOTES:

1. When making changes make sure the ‘Apply’ buttons say “Apply (this display)” only. If the ‘Apply’ button says “Apply (all displays)” the changes you make will alter every display (Month, Week, Year, etc) of the view.
2. As you edit the view, we highly recommend you save your 'view' after every step, especially when you see this message come up:  “* All changes are stored temporarily. Click Save to make your changes permanent. Click Cancel to discard the view.”

Navigate to: Structure > Views > Add new view

1. Fill in ‘View Name’ - Example: Recommended Summer Reading
2. Fill in Description - Example: Carousel view of recommended summer reading
3. Set the Show Content of type to Page (or content of choice)
4. Uncheck ‘Create A Page’
5. Select ‘Create A Block’
6. Confirm your ‘Block Title’ has filled in automatically from the View name
7. Set the ‘Display format’ to ‘jCarousel’ of ‘fields’
8. Set the ‘Items per page’ to 5 - (leaving it blank will load all items)
9. Select Continue and Edit
10. Click on ‘Block’ under ‘Display Name’
11. Enter name and description -  Example: (Recommended Summer Reading Block, Block for providing carousel of recommended summer reading) - click Apply
12. Under ‘Format’ click on the ‘settings’ link that appears next to ‘Fields’
13. Select ‘Content: Title’ and ‘Hide empty fields’
14.  Apply (this display)
15. Under ‘Fields’ select ‘Add’
16. Search for and select ‘Content: Books’
17. Apply (this display)
18. Configure the field:
    1. Uncheck ‘Create a label’
    2. Set the formatter to ‘Product reviews - Cover Image Only’
    3. Expand ‘Multiple Field Settings’ and uncheck ‘Display all values in the same row’
    4. Apply (this display)
19. Under Fields select ‘Content: Title’
20. Select ‘Exclude from display’
21. Apply (this display)
22. Under 'Filter Criteria’ select ‘Add’
23. Search for and select ‘Content: Nid’ - Apply (this display)
24. Configure the filter:
    1. Set the ‘Operator’ to ‘Is equal to’
    2. Set the ‘Value’ to the ‘NID’ you previously made note of from your booklist page. Example: 151
    3. Apply (this display).
25. Under ‘Pager’ confirm it is set to  ‘Display all items | All items’
26. Select ‘Settings’ next to ‘jCarousel’ under Format
27. Change the wrap content to your preferred method - Example: Circular
28. Apply (this display)
29. Save

You can now enable the block on your site by navigating to Structure > Blocks and configuring it to be placed in a suitable region.

PREPARE TO CREATE YOUR jCAROUSEL VIEW FOR CUSTOM PRODUCTS

A simple way to display your custom products is to use a jCarousel to display their images.

1. Create your custom products - If you’re not familiar with creating custom products please review: Creating Custom Products
2. Add Taxonomy to your custom products - If you’re not familiar with Taxonomy please review: Understanding and Using Taxonomy

CREATE YOUR jCAROUSEL VIEW FOR CUSTOM PRODUCTS

NOTES:

1. When making changes make sure the ‘Apply’ buttons say “Apply (this display)” only. If the ‘Apply’ button says “Apply (all displays)” the changes you make will alter every display (Month, Week, Year, etc) of the view.
2. As you edit the view, we highly recommend you save your 'view' after every step, especially when you see this message come up:  “* All changes are stored temporarily. Click Save to make your changes permanent. Click Cancel to discard the view.”

Navigate to: Structure > Views > Add new view

1. Fill in ‘View Name’ - Example: Mugs
2. Fill in Description - Example: Carousel view of mugs
3. Uncheck ‘Create A Page’
4. Select ‘Create A Block’
5. Confirm your ‘Block Title’ has filled in automatically from the View name
6. Set the ‘Display format’ to ‘jCarousel’ of ‘fields’
7. Set the ‘Items per page’ to be blank - this will allow all items added to the book list to be pulled in.
8. Select Continue and Edit
9. Click on ‘Block’ under ‘Display Name”
10. Enter name and description - Example: (Mugs Block, Block for providing carousel of mugs) - click Apply
11. Under ‘Fields’ select ‘Add’
12. Search for and select ‘Content: Image’
13. Apply (this display)
14. Configure the field:
    1. Uncheck Create Label
    2. Select your preferred ‘Image Style’ - Example: Thumbnail (100x100)
    3. Set the ‘Link image to’ content
    4. Expand ‘Multiple Field settings’ and uncheck ‘Display all values in the same row’
    5. Apply (this display)
15. Under Fields select ‘Content: Title’
16. Select ‘Exclude from display’
17. Apply (this display)
18. Under ‘Filter Criteria’ select ‘Add’
19. Search for and select ‘Content: Has taxonomy term’
20. Apply (this display)
21. Configure the filter:
    1. Select the ‘Vocabulary’ you previously created for your custom product Example: Mug
    2. Set the ‘Selection type’ to ‘Dropdown’
    3. Apply
    4. Set the ‘Operator’ to ‘is one of’
    5. Choose the ‘terms’ from the selected vocabulary for the items you want to pull into this view - Example: All Mugs
    6. Apply (this display)
22. Under ‘Pager’ confirm it is set to  ‘Display all items | All items’
23. Select ‘Settings’ next to ‘jCarousel’ under Format
24. Change the wrap content to your preferred method - Example: Circular
25. Apply (this display)
26. Save

You can now enable the block on your site by navigating to Structure > Blocks and configuring it to be placed in a suitable region.