Among the OOTB views offered in SharePoint, the boxed view is the one I find the most elegant. I like to use it on a home page, to display announcements for example.
However, there is one drawback with this view: it is not very flexible, and in particular, it forces the display of items in two columns.
jQuery to the rescue!
I have created a live demo to show how the boxed view can be tweaked with the help of some client side JavaScript. You can see the result on the home page of my demo site:
http://www.pathtosharepoint.com
In this example, I have chosen to display a list as scrolling news. If you press the “Next” button, or wait for 6 seconds, the list will move to the next announcement. Each announcement has the original “boxed” look.
Once again, I am relying on jQuery here. This time I am using a carousel plugin called jCarousel lite. Note that the same plugin is also included in this page, where I display feeds from SharePoint blogs.
I still need to work on the script. In particular, there are several carousel plugins available for jQuery, and I haven’t yet figured out which one works best with SharePoint. Stay tuned!
Path to SharePoint... and Beyond! 
Sounds really good and relevant to some work I’m doing. Will be very interested to see the script when you are done.
Cheers,
Chris
Thanks Chris! Feel free to send me more detailed feedback and/or specific use cases I could work on.
Christophe,
Another very cool add-on! Can you point me to some basic code (hopefully simple) to make a Boxed View into a single column with a flat list, not connected to a library of photos, etc.?
Pingback: Boxed views: one column only « Path to SharePoint
Where is the demo? How can I implement this? Many thanks.
Pingback: Links for February 13, 2009 « Steve Mullen’s Blog
Demos: follow the links on the post. There is one on the home page of my SharePoint demo site.
To implement this, you need to proceed in two steps:
1/ Change the view into an unordered list (“li” tags)
2/ Apply one of the jQuery carousel plugins
I’ll publish my own script when I feel it is ready for prime time.
For the life of me, I can’t get the view back as an unordered list. I tried to implement the GetListItems SOAP call, but lost all of my formatting for the Boxed One Column view…..any tips Christophe?
Many thanks for your site!! I’ve learned a lot (and implemented even more!!)
Sweet!
How do you get the announcement to look like you do on your demo site, with the “They said it couldn’t be done…” statement in it. It looks like it is pointing to an announcements list named About and you mention using the box style but I cannot get the exact look with the border and different background color.
The closest I can get is just the border with a white background.
Right, it is pointing to the About list. I used the “newsletter, no lines” style and border only for the chrome. I have selected the Granite theme on the site.
HI Chris,
is it ready for prime time yet? 🙂
Also if you already have or know if it exist, silverlight player which can stream video from ms media server webpart?
it would be great if we can have this control showing thoumb nails at the bottom of the player and we can pick and choose the vdo by scrolling the thumb nails.
Hows this for a challeneg :)?
TIA.
PS: i love all the work you have done so far and I will thank you for that.
If you are looking for the code to make the boxed view a single column, I published it here:
https://pathtosharepoint.wordpress.com/2009/02/12/boxed-views-one-column-only/
As for the scrolling effect, no progress. There are new jQuery plugins for scrolling published every month, and I didn’t find the time to catch up with the recent ones.
I have done some work on videos, but not using Silverlight. One issue is that videos in wmv format display a black screen until you press the play button, and I don’t know how to address this. The flv format for example is more friendly.
Hi, it works against “Boxed, no labels” style. How can you get it to work with “Boxed” (with labels)?
It looks like your home page has changed recently using the tabs rather than the scrolling feature you had in the past. Do you still have a demo of this in another location?
Thanks for all the useful information you provide on your site! I follow your blog regularly.
I have put this on hold as I have yet to find a flexible scroller/carousel jQuery plugin. The plugin should accept the rich content usually found in announcements (hyperlinks and images for example). Recommendations are welcome!
Love the new scrolling news ticker (using jScrollable?) — looking forward to your tips and tricks on implementation!! 🙂
Thanks for all you do for us, Christophe!!
Great stuff – have you happened to figure out how to make the boxed view display more than two items side to side in a row?
Really could use a solution that allows you to use the Boxed View with Labels to display 3, 4 or 5 items side by side? Any luck with that?
I’ll look into it (and sorry Jason, I missed your comment). Displaying 4 items in a row (i.e. merging two rows from the default boxed view) should not be too difficult with a technique similar to the one I used in the following post:
https://pathtosharepoint.wordpress.com/2009/02/12/boxed-views-one-column-only/