Difference between revisions of "Linden Lab Official:Viewer Web Widgets"
| Line 27: | Line 27: | ||
This library will pull in all the supporting content it needs -- other js files, css, and the content for each widget. It uses its own version of jQuery, and will create a separate namespace to avoid conflicts if you already have jQuery installed. | This library will pull in all the supporting content it needs -- other js files, css, and the content for each widget. It uses its own version of jQuery, and will create a separate namespace to avoid conflicts if you already have jQuery installed. | ||
= | =Widgets= | ||
==What's Hot== | ==What's Hot== | ||
| Line 38: | Line 38: | ||
This widget expects the above div to be a fixed height of 148px. It will adapt its content to 100% of the div's width, so you can make it as wide as you like. To control positioning, size, and other parameters, just style the #whats-hot-now-widget in your own page's css. | This widget expects the above div to be a fixed height of 148px. It will adapt its content to 100% of the div's width, so you can make it as wide as you like. To control positioning, size, and other parameters, just style the #whats-hot-now-widget in your own page's css. | ||
=Localization= | |||
Widget strings can be localized by adding ?lang=[de|es|fr|ja|pt] to your page's url. | |||
=Future roadmap= | |||
In the near future we plan to add widgets for each item on the current Second Life Viewer [http://viewer-login.agni.lindenlab.com/ login screen]: | |||
* Editors' Picks slideshow (the big one, top left) | |||
* Destinations main widget (with category selector) | |||
* Upcoming events | |||
* Second Life Blog | |||
Other features we plan to enable for all widgets: | |||
* Ability to set custom click function: currently the default click behavior triggers a modal notification dialog in addition to initiating a secondlife:// teleport action. We plan to enable a widget setting that can override this with a custom javascript function. | |||
Revision as of 10:28, 30 September 2011
 |
Important: Work-in-progress! Expect these widgets to change over time. Watch this page for updates. |
These viewer web widgets are a first attempt at making the current Second Life Viewer login screen features available for easy use in third-party viewers. Linden Lab provides a base javascript library which will search the DOM of a given page, populating specifically-named divs with widget content.
Basic implementation
The example below shows the simplest way to implement these widgets. Simply include the sl.widgets.js library, then include a div with both id="[the widget you want]" and class="second-life-widget".
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v1/modules/sl.widgets.js">
</script>
</head>
<body>
<div id="whats-hot-now-widget" class="second-life-widget"></div>
</body>
</html>
Version 1 of the main sl.widgets.js library currently lives here:
This library will pull in all the supporting content it needs -- other js files, css, and the content for each widget. It uses its own version of jQuery, and will create a separate namespace to avoid conflicts if you already have jQuery installed.
Widgets
What's Hot
This widget displays a thumbnail list of destinations with people (a population of 25 or less, in the last ~10 minutes). The cutoff number may change over time; 25 was chosen as a reasonable performance threshold.
With the main js library loaded, include this div in your html markup:
<div id="whats-hot-now-widget" class="second-life-widget"></div>
This widget expects the above div to be a fixed height of 148px. It will adapt its content to 100% of the div's width, so you can make it as wide as you like. To control positioning, size, and other parameters, just style the #whats-hot-now-widget in your own page's css.
Localization
Widget strings can be localized by adding ?lang=[de|es|fr|ja|pt] to your page's url.
Future roadmap
In the near future we plan to add widgets for each item on the current Second Life Viewer login screen:
- Editors' Picks slideshow (the big one, top left)
- Destinations main widget (with category selector)
- Upcoming events
- Second Life Blog
Other features we plan to enable for all widgets:
- Ability to set custom click function: currently the default click behavior triggers a modal notification dialog in addition to initiating a secondlife:// teleport action. We plan to enable a widget setting that can override this with a custom javascript function.