jShowOff jQuery Content Rotator Plugin

I recently implemented jShowOff on the Western Oregon University's website. jShowOff is a jQuery content rotator plugin which allows you to use any form of html within a <div> tag. With jShowOff we are now able to have multiple links within each slide that rotates. The jShowOff also gives us the capability to navigate through the slides. This feature allows people to quickly navigate to the slide that they would like. Also, if they find that the rotating slides are distracting, they can pause it.

The jShowOff plugin comes with jquery.jshowoff.min.js and jshowoff.css. I was able to go in and change the css so that the links were the color I wanted and placed on top of the image to the right. Here is a link to where you can download this plugin and see demos, http://ekallevig.com/jshowoff/.

The jShowOff is styled to have numbers for the navigation. In order to get the numbers to go away and just have little balls show up, in the css you will need to add/change the font-size and line-height to 1px in the .jshowoff p.jshowoff-slidelinks style and the .jshowoff-slidelinks a, .jshowoff-controls a style. By changing the margins you can have it appear on-top of the image instead of below. If you want to change the effect and speed of the rotating slides you can do that in the jquery.jshowoff.min.js file. The jShowOff has lots of options so you can customize your rotating slideshow to be exactly how you want it.

There is one bug I am still trying to figure out. The style of the play/pause, next, and previous links get pulled from your overall a style, which makes it tough if you want your links within the rotating slides to be different than the rest of your page. Hopefully I will be able to figure this out so I can implement this on webpages within the site.

click on the banner to see Western's homepage in action

Setting Up My Blog

Today, I setup my blog. I designed my own background image in Photoshop using different brushes that I downloaded from Brusheezy (http://www.brusheezy.com/ lots of great brushes to choose from for FREE, which is always nice). I created multiple layers in Photoshop, and used the brushes on several of them, some with color overlays and others with gradient overlays. I then masked a few layers to get the gradient feel. When I was finished with the background image, I implemented my own CSS to get the exact look I wanted.