Last updated March 23, 2011. Created by guigui_nyc on June 2, 2010.
Edited by NonProfit. Log in to edit this page.
Here is another (advanced) tutorial of the views slideshow module based on ThumbnailHover mode. It will also illustrate some nice features available with view attachment displays.
Unfortunatly, there is no live example for this tutorial since we decided we would not publish our customer list but here is what it looks like: http://drupal.org/node/815612
Features
It's basically a nice way of showcasing products or customers. In our case, we wanted to let the visitor discover the ads of our customers: when the page is rendered, the view auto rotates between each client's ad with a nice fade effect and there are 2 very nice features that can't be seen on this screenshot:
- when you mouse over each brand, the image of the ad replaces the current one.
- when you click on the industries on the right, it filters the brands related to the selected industry (the Apparel industry list of customer is displayed by default thanks to attachment display settings explained below.
Prerequisite
- 1 content type dedicated to this slideshow that I called Customer.
- This content type has 1 cck image field to store the ad.
- Mandatory Assigment of customer nodes to an Industry taxonomy
- Imagecache preset to display my node images with fixed dimensions
This tutorial is based on a page view using slideshow as style for the left side of the page, and an attachment view renders the right side of the screen (this is not a block, just a floated div).
View setup
Let's first build the view without the attachment which is only used to filter by industry
create a new view and under
Default basic settings
under Style choose slideshow:
mode ThumbnailHover
List type: ordered list
no grouping
Hover breakout: full node
Timer delay:5000
Initial fade delay:-2000
speed:400
Pause: yes when hovering the node
Pager event:hover
control:none
image counter:none
effect:fade
Row style: fields (will only apply to our node title in our case)
Items to display: unlimited
pager:none
ajax:yes
Header and page path: whatever
Fields and sorting
node:title (no option, just remove label)
node:title ascending
Filters
the usual filters: node published, node type Customer
=> you should now have a working view.
Layout the page
2 more things to do:
Layout the thumbnail
this is not done with the view templates but with the customer node template (because the thumbnailHover slideshow will show you the node just like you would see it from a direct link. I basically defined a template that displays the image with fixed dimensions (thanks to imagecache) above a background image for the frame.
adjust the CSS for the view to display the node list nicely
Main CSS characteristics: 3 main divs to layout (#views_slideshow_thumbnailhover_main_1 on the left, #views_slideshow_thumbnailhover_breakout_teasers_1 in the middle, div.attachment on the right)
- give a %width for each of them, float left the first 2 and right the attachment
- change the cursor to pointer for the middle div so that visitors understand they can mouse over the node titles to show a different ad
part2: add an ATTACHMENT VIEW for the Industries
change the PAGE display to add a view argument
-add new argument for field: taxonomy term
-Action to take if argument is not present: Provide default argument
-default argument type: fixed entry, default value: Apparel & Accessories (my first Industry term)
-Optional: Under validator, add the following pHP code:
$pattern = "/%26/";
$handler -> argument = preg_replace($pattern,"&", $argument);
return true;==> This is to handle the special character & in the taxonomy terms - if you don't do that, then the link on taxonomy term such as Media & Movies doesn't work
-Action to take if argument doesn't validate: display empty text (just in case..)
add a new ATTACHMENT display
-Fields, filter and sort: no change
-Attachment settings:
-inherit argument:YES (inherit its arguments from the parent display ie the PAGE view)
-Inherit exposed filter:NO (we don't have exposed filter)
-position:after
-Attach to:page
-ARGUMENTS:OVERRIDE taxonomy:term settings
and here is the trick:
-Under action to take if argument is not present,choose: summary, sort ascending
-under validator option, choose PHP with the following code: return FALSE;
-Action to take if argument doesn't validate: summary, sort ascending
-under style, choose LIST
==> when there is no argument, we still want to display all industries and count them (there is no argument when the page is first displayed)
==> also, even if there is an argument (the user clicked on an Industry) we still want the list of Industry to stay as is so we force the argument to not validate using return code FALSE) - the view will still refresh the left side of the screen (the PAGE view) thanks to the argument settings defined at the PAGE level
Conclusion
I Hope this can give you a better idea about how slideshow ThumbnailHover works: it took me a while to understand that it renders the nodes according to the node template and not depending on the view settings in displayed fields..