SwHTicker

INTRODUCTION

Lightweight Mootools implementation of an horizontal ticker. This is actually reproducing the flash module from the homepage of barnesandnobles.com.

FEEDBACK: Comment on post or sign up and go to the forum section: click here

EXAMPLE

Our picks this week

> See New Books Release

STEP BY STEP

1- create an element (div) with a hgroup inside. Give this div a specific id,ex:

2- copy, paste and adapt the following css:

#swHTicker div.left-arrow { font-size: 0px; line-height: 0%; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 10px solid #fff; height: 0px; width: 0px; padding:0; margin:14px; }
#swHTicker div.left-arrow:hover { border-right: 10px solid #000; cursor: pointer; }
#swHTicker div.left-arrow.selected { border-right: 10px solid #000; cursor: auto; }
#swHTicker div.right-arrow { font-size: 0px; line-height: 0%; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 10px solid #fff; height: 0px; width: 0px; padding:0; margin:14px; }
#swHTicker div.right-arrow:hover { border-left: 10px solid #000; cursor: pointer; }
#swHTicker div.right-arrow.selected { border-left: 10px solid #000; cursor: auto; }
#swHTicker div.pause { font-size: 0px; line-height: 0%; border-left: 3px solid #fff; border-right: 3px solid #fff; height: 8px; width: 2px; padding:0; margin-top:15px; }
#swHTicker div.pause:hover { border-left: 3px solid #000; border-right: 3px solid #000; cursor: pointer; }
#swHTicker div.pause.selected { border-left: 3px solid #000; border-right: 3px solid #000; cursor: auto; }
#swHTicker {width: 732px; height: 250px; background: url('images/back.jpg') no-repeat top left; }
#swHTicker img {position: relative; display:inline; margin-right:35px; cursor: pointer; -webkit-box-shadow: rgba(102, 102, 102, 0.5) 7px 7px 7px; -moz-box-shadow: rgba(102, 102, 102, 0.5) 7px 7px 7px; box-shadow: rgba(102, 102, 102, 0.5) 7px 7px 7px; }
#swHTicker hgroup {position:absolute; margin: 5px 150px; z-index:100}
#swHTicker H1 {display:inline; font-weight:bold; font-size:21px; font-family: Arial,Helvetica,sans-serif; color: white; text-shadow: 2px 2px 3px #666666; opacity: 0.9 }
#swHTicker H2 {display:inline; font-weight:bold; font-size:13px; font-family: Arial,Helvetica,sans-serif; color: white; text-shadow: 2px 2px 3px #666666; opacity: 0.9; cursor: pointer; }

-> Copy the image back.jpg and put it in a folder images if you want to use the same background image.

3- copy and include the .js files (preferably right before </body>)

-> mootools more fx scroll is needed to have a smooth scrolling effect
-> mootools more assets is needed to load pictures in the background (you can actually build and download a single js file on mootools.net)

4- PHP code

The pictures are retrieved with a JSON service that read the content of a directory on the server where the pictures are. You can setup the path to the directory and the name and location of the php JSON web service (see step 6). In our case it is called getHTickerContent.php that should be in the same directory as the html file.

5- include this after the lines included in step 4

6- (optional)

replace the 3 line of the script in step 5 by:

var swHTicker = new SwHTicker('swHTicker', {<OPTION>:<VALUE>, <OPTION>:<VALUE>...}});

where <OPTION> can be:

speed: scrolling duration (in ms), default value: 1500

delay: waiting time between 2 scrolls (in ms), default value: 300

url: URL where to get the folder content via JSON request

transition: Type of transition you want for the scrolling (see mootools doc for details)

path: Path to the folder with the images on the server (relative to the current directory)