Create a Slideshow Overlay

A while back I had posted a question about creating an overlay using flex slider.  I wasn't able to figure that out, but I was able to make it happen using Views Slideshow and Views Slideshow:Cycle.  So that I can make it happen again, and just in case you'd like to do the same thing, I have documented the steps here.  I've worked through it a couple of times and I believe that I have included all of the steps.  If not, please let me know. 

The finished product can be seen at leelibraryfoundation.org.  We used photos pre-sized at 720px x 300px.

Site Building

Start with a clean (new) Drupal installation.

Create a subtheme and set it as your default

Download the following modules to yoursite/sites/all/modules:

  • Views (drupal.org/project/views
  • Views Slideshow (drupal.org/project/views_slideshow)
  • Chaos Tool Suite (drupal.org/project/ctools)
  • Libraries (drupal.org/project/libraries)

Download the jcycle.query library

  • Save Link As: yoursite/sites/all/libraries/jquery.cycle/jquery.cycle.all.js

Enable the following modules:

  • Chaos tools
  • Libraries
  • Views
  • Views UI
  • Views Slideshow
  • Views Slideshow:Cycle

Move blocks from Sidebar first to Sidebar second (Structure > Blocks)

Create two Image Styles (Configuration -> Image styles -> Add style)

Slider

  • Style name: slider
  • Click on Create new style
  • Select a New Effect:  Resize
  • Click on Add
  • Width: 720; Height: 300
  • Click on Add Effect
  • Click on Update Style

Pager

  • Style name: pager
  • Click on Create new style
  • Select a New Effect:  Scale
  • Click on Add
  • Height 60; check Allow Upscaling
  • Click on Add effect
  • Select a New Effect: Crop
  • Click on Add
  • Width: 40; Height: 40; Anchor: bottom left
  • Click on Add effect
  • Click on Update style

 

Create a content type Slide (Structure -> Content types -> Add content type)

  • Create content type
    • Name: Slide
    • Description:  Slides to be used in the slideshow.  CSS will be used to add an overlay with title and description
    • Title field label: Title
    • Publishing options: Published
    • Display settings: uncheck
    • Comment settings: closed
    • Menu settings: leave as default
    • Click Save and add fields
  • Add Slide Image field
  • Label: Slide Image
  • Type of data to store: Image
  • Click on Save
  • Field settings: leave as default and click on Save field settings
  • Slide Settings
    • Label: Slide Image
    • Required: check
    • File directory: slides
    • Maximum image resolution: 720 x 300
    • Enable Alt field: check
    • Enable Title field: check
    • Everything else is okay as is.
    • Click Save settings
  • Manage Display
    • Slide Image
      • Label: Hidden
      • Select gear to Edit style
        • Image style = slider
        • Link image to Nothing
  • Click on Update
  • Click on Save

Add Content (Select Content -> Add content -> Slide)

Create a View (Structure -> Views -> Add New View)

  • View name: Slideshow
  • Show: Content of type: Slide
  • Create a page: uncheck
  • Create a block: check
  • Block title: blank
  • Display format: Slideshow of: fields
  • Items per page: blank
  • Use a pager: uncheck
  • Click Continue & edit
  • Save the initial view
  • Add fields
    • Content: Body
      • Exclude from display
    • Content: Slide Image (for slider)
      • Create a label: uncheck
      • Formatter: Image
      • Image style: slider
      • Link image to: Nothing
    • Content: Slide Image (for pager)
      • Exclude from display
      • Formatter: Image
      • Image style: pager
      • Link image to: Nothing
  • Move Title field to below Body field and edit it
    • Content: Title
      • Link this field to the original piece of content: uncheck
      • Rewrite results (rewrite the output of this field)

<div id="transbody"></div>

<div id="transpager"></div>

<div id="trtitle">[title]</div>

<div id="trbody">[body]</div>

  • Click on Apply all displays
  • Edit slideshow settings
    • Add striping: uncheck
    • Bottom Widgets
      • Pager: check
      • Content: Slide Image: check
      • Activate slide and Pause on Pager Hover: check
      • Click on Apply all displays

Place block in highlighted region so it’s above everything else ( Structure > Blocks)

 

CSS

Add the following CSS to your custom css file

/*place slideshow even with sidebar second*/

.content {
margin-top: 0;
}

/*move slideshow to left*/

#content .section, .sidebar .section {  padding: 0 0 0 0px; }

 

/*place pager thumnails horizontally*/

.views-slideshow-cycle-main-frame-row .views_slideshow_cycle_slide .views_slideshow_slide {    float: left; }

.views-slideshow-controls-bottom .views-slideshow-pager-field-item {  float: left; margin: 10px 3px; }

 

/* for overlay on slideshow*/

#transbody {
position:absolute;
width:40%;
height:300px;
right:0%;
background-color: #333;
opacity:0.8;
}

#trtitle {
position:absolute;
right:5%;
top:25%;
color:#fff;
width:30%;
font-size:1.5em;
font-weight:bold;
}

#trbody {
position:absolute;
right:5%;
top:40%;
color:#fff;
width:30%;
font-weight:bold;
}

Add new comment