Nov 28 2012
Nov 28
Lullabot logo

Lullabot has trained thousands of Drupal developers & guided the development of some of the largest Drupal websites.

May 17 2012
May 17

Building a slideshow with Views Slideshow 3 and jQuery Cycle

Posted on: Thursday, May 17th 2012 by Sheila Mullins

The Views Slideshow module makes it easy to build a slideshow, once you know all the requirements to set it up. Views slideshow 3.x is only compatible with Views 3.x. It also depends on two other modules: Ctools (not needed for Drupal 7) and Libraries API.

The other key ingredient is the Jquery Cycle plugin, which needs to be downloaded to a libraries folder. Download the plugin from here (latest version) or here (older versions available). The views slideshow project page recommends using version 2.88, and says you will need the jquery_update module in order to use the latest version. I didn't find any initial problems using version 2.999.5 without jquery_update. Whichever version you download, rename the js file to jquery.cycle.all.js (or jquery.cycle.all.min.js if you grabbed a minimized file). If there isn't one already, create a libraries directory in sites/all, and a directory called jquery.cycle in libraries. Drop the js file in there so that you have: sites/all/libraries/jquery.cycle/jquery.cycle.all.js .

Now you should see Slideshow, alongside Grid, HTML list, Table, etc..., as one of the style (Drupal 6) or format (Drupal 7) options in your views. There are flexible formatting options in the settings. The ones I most often customize are the pager and control widgets. Configure Top Widgets or Bottom Widgets depending on where you want to place them.

The Controls widget provides the "previous", "pause" and "next" links. These are just text but can be replaced by images with some css.

The Pager widget is the one to use if you want to have either thumbnails or an icon to represent each of the slides in the slideshow. You can choose whether the slideshow jumps to the represented slide when you click on the thumbnail or icon. To set up the thumbnails, you have to choose which field to display as the pager. I often want to show a generic image, like a dot, just to represent the number of slides in the show. That's where the result counter comes in handy. There is a field available to all views, in the Global group, called "Global: View result counter". It simply outputs the position of the view result. So if I add that field and choose it as the field to use for my pager widget, then I get a list of numbers below (or above) my slideshow. Again, with a little css, the numbers can be replaced with a background image.

There is also a Slide Counter, in case you want to display something like "Slide 5 of 24".

That's it for the basics of creating a views slideshow.

Jul 03 2009
Jul 03

Replacing FPSS with Views Slideshow in Drupal – Tutorial

Posted by Jeffrey Scott -TypeHost Web Development | Friday, July 3rd, 2009
, ,

I have been using FrontPage SlideShow from JoomlaWorks on a number of sites, and would recommend it as a good CSS/PHP route to building a featured slide section that links to promoted content, articles, blog posts, groups, etc. One problem is that it is not free, the cost is around $35 for a license to use it on 5 to 10 domains. A second problem is highlighted by the example of releasing an installation profile for Drupal. We can release all of the code under GPL for the project except for FPSS. So, I began working on a conversion of our FPSS slides into Views Slideshow views.

The easiest way is to create a new content type, for example “slide,” and disable comments, post information, front page promotion, etc. Decide which size you would like to standardize all the images at, and then create a simple div structure with the image only as content. You can create a “views slideshow” view, sort only the “slide” content type, save it as a block or create a panels views block and embed it on a panels page. Use block or panels permissions to control the display. This is fine if you are using only images or banners made in photoshop that combine text and images, but if you want the to be text editable, viewable by search engines, and style-able by CSS, you will need to build a more complex template for your “slide” content type.

TUTORIAL:

1. Goto admin “content types” – create new content type “slide”
+ disable comments, attachments, and front page promotion in the content type form
+ goto themes “configure” – disable display post information for slides
+ you may want to disable the WYSYWIG editor (if any) on the slide node create form.
+ FCKeditor Global Profile: admin/settings/fckeditor/editg
—> visibility settings, add to exclude: node/add/slide
+ set the permissions – or skip if you only want admin to be creating this content type

2. Create a new slide – use a consistent template for this content type to build Views Slideshow displays
+ you can use html, css, php, etc. to create a custom template
+ we are looking to replace the FPSS template we are using now, and will give the template + css as a sample

Template:
+ paste in slide node create form – edit the links & paths to be consistent with your information

<div id="viewslide">
        <div id="slideleft">
                <div id="slidetop">
                        <h2><a href="http://webdevnews.net/articles/second-life">Prototype of a Sustainable Virtual Reality</a></h2>
                </div>
                <div id="slidenote">
                        <p>Avatar: Elusyve Jewell</p>
                </div>
                <div id="slidedesc">
                        <p>Unlike any other site on the web, Second Life has transformed the internet into an immersive, 3-D virtual world, a collectively authored mindscape navigated by cyberpunk avatars. How long until the VR goggles appear and we log our first sessions on the holodeck? A look at the future evolution of Second Life. <a href="http://webdevnews.net/articles/second-life">Read more</a>.</p>
                </div>
        </div>
        <div id="slideright"><a href="http://webdevnews.net/articles/second-life"><img width="520" height="206" src="http://webdevnews.net/files/secondlife.jpg" alt="Second Life" /></a></div>
</div>

CSS – paste in style.css or equivalent
+ Note: in the Drupala theme this is in blocks.css

#viewslide {
        width: 698px;
        height: 240px;
        border: 1px solid #B0B0B0;
        margin: 0;
        margin-top: 5px;
        padding: 0;
}

#slideleft {
        float: left;
        width: 154px;
        margin: 0;
        padding: 10px;
        padding-right: 0;
        border-right: 1px solid #B0B0B0;
}

#slidetop {
        width: 134px;
        margin:0;
        margin-left: 5px;
        margin-top: -10px;
        padding:0;
}

#slidetop h2 {
        font-family: Arial,Verdana,sans-serif;
        font-size: 18px;
        line-height: 18px;
        color: #0088BF;
        font-weight:normal;
        letter-spacing:-1px;
        border: none;
        background: #fff;
}
div.block div#slidetop h2 {
        height: auto;
        margin-bottom: 10px;
        margin-top: 16px;
        padding-bottom: 3px;
        padding-left: 0;
        padding-top: 0;
}
#slidetop h2 a {
        font-family: Arial,Verdana,sans-serif;
        font-size: 18px;
        line-height: 18px;
        color: #0088BF;
}
#slidetop h2 a:hover {
        color: #CC3300 !important;
}

#slidenote {
        width: 134px;
        margin: 0;
        margin-top: -10px;
        margin-left: 5px;
        padding: 0;
}

#slidenote p {
        color:#28488C;
        height: 10px;
        font-family: Arial,Verdana,sans-serif;
        font-size: 8pt;
        font-weight: bold;
        line-height: 10px;
        margin: 0;
        padding: 0;
}

#slidedesc {
        width: 134px;
        margin-right: 0;
        margin-left: 5px;
        margin-top: 5px;
        margin-bottom: 12px;
        padding: 0;
}

#slidedesc p {
        font-family: Arial,Verdana,sans-serif;
        font-size: 8pt;
        line-height: 10px;
        color: #333333;
        margin: 0;
        padding: 0;
}

#slideright {
        float: right;
        width: 532px;
        margin: 0;
        padding: 0;
}

#slideright img {
        border: 0;
        margin: 0;
        margin-left: -1px;
        padding: 16px 0;
}

IE7 CSS Fix – paste in ie7.css
+ Note: in the Drupala theme this is in fix-ie2.css

#slidetop {
        margin-top: 10px;
}
#slidedesc {
        margin-bottom: 12px;
}
div.block div#slidetop h2 {
        margin-top: 6px;
}

IE6 CSS Fix – paste in ie6.css
+ Note: in the Drupala theme this is in fix-ie.css

#slidetop {
        margin-top: 10px;
}
div.block div#slidetop h2 {
        margin-top: 6px;
}

Note: this code is cross-browser tested in FF, IE7, IE6, Safari, Opera, & Chrome. It includes theme specific CSS fixes that may not be applicable to all theme code & CSS structures. It is configured to work with the Drupala & SEO-Mix themes for the Drupala installation profile.

3. To recreate the full effect of FPSS, you will need to open the images into an editor like photoshop and add a 20px background color: #CCCCCC (fade 64%) “tab” – use Arial font, change the alignment to vertical, and add a “read more…” text snippet along the bottom corner going up the side of the image.

4. Create a few of these “slide” content type nodes (full html) using the template, then goto views and create a Views Slideshow. Settings: page / block – views slideshow list view – fields: node body, no title, sort by random, and 10 nodes by page (filter to recommended 3 in panel settings), node: published, node-type: “slide”
+ Note: Views Slideshow also has its own configuration panels for fade settings, speed, etc.

5. Embed the Views Slideshow – goto panels – “views panes” and create a views block for the view just created (D5) – embed the block in any panels page or use admin/build/blocks to display in thee regions by path
+ You may want to “Set view URL to panel URL” additionally in the views pane settings

6. Goto “taxonomy” in admin and create a vocabulary for the “slide” content type if you want to create more views and sort the slideshows for particular pages.

Summary:

FPSS comes with 7 or 8 different templates at least and has quite a few features, very few of which are replicated here. We basically needed to change from the version of FPSS we were using to an open source alternative and Views Slideshow is a great module. Drupal designers who spend some time to create templates for Views Slideshow will find them extremely useful in serving multimedia content, or as a replacement for Flash in some situations. I also like and recommend FPSS and will probably continue to use it in some sites.

Example:

viewsslideshow_ex

Views Slideshow: http://drupal.org/project/views_slideshow
fpss_example

FrontPage Slideshow: http://www.frontpageslideshow.net/

Drupal Module: http://drupal.org/project/fpss

Pings/Trackbacks

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web