gnomeweb-wml r6335 - in trunk: . www.gnome.org/projects/cheese www.gnome.org/projects/cheese/data/shadowbox/css www.gnome.org/projects/cheese/data/shadowbox/images www.gnome.org/projects/cheese/data/themes/cheese
- From: dgsiegel svn gnome org
- To: svn-commits-list gnome org
- Subject: gnomeweb-wml r6335 - in trunk: . www.gnome.org/projects/cheese www.gnome.org/projects/cheese/data/shadowbox/css www.gnome.org/projects/cheese/data/shadowbox/images www.gnome.org/projects/cheese/data/themes/cheese
- Date: Tue, 23 Sep 2008 13:15:51 +0000 (UTC)
Author: dgsiegel
Date: Tue Sep 23 13:15:51 2008
New Revision: 6335
URL: http://svn.gnome.org/viewvc/gnomeweb-wml?rev=6335&view=rev
Log:
enhance the css and javascript of the tour
Added:
trunk/www.gnome.org/projects/cheese/data/shadowbox/css/shadowbox.css (contents, props changed)
trunk/www.gnome.org/projects/cheese/data/shadowbox/images/loading.gif (contents, props changed)
Modified:
trunk/ChangeLog
trunk/www.gnome.org/projects/cheese/Makefile.am
trunk/www.gnome.org/projects/cheese/data/themes/cheese/document.screen.css
trunk/www.gnome.org/projects/cheese/tour.html
Modified: trunk/www.gnome.org/projects/cheese/Makefile.am
==============================================================================
--- trunk/www.gnome.org/projects/cheese/Makefile.am (original)
+++ trunk/www.gnome.org/projects/cheese/Makefile.am Tue Sep 23 13:15:51 2008
@@ -78,11 +78,13 @@
shadowboximagesdir = $(pagedir)/data/shadowbox/images
shadowboximages_DATA =\
+ data/shadowbox/images/loading.gif \
data/shadowbox/images/loading-light.gif \
$(NULL)
shadowboxcssdir = $(pagedir)/data/shadowbox/css
shadowboxcss_DATA =\
+ data/shadowbox/css/shadowbox.css \
data/shadowbox/css/shadowbox-light.css \
$(NULL)
Added: trunk/www.gnome.org/projects/cheese/data/shadowbox/css/shadowbox.css
==============================================================================
--- (empty file)
+++ trunk/www.gnome.org/projects/cheese/data/shadowbox/css/shadowbox.css Tue Sep 23 13:15:51 2008
@@ -0,0 +1,216 @@
+/**
+ * The CSS for Shadowbox.
+ *
+ * This file is part of Shadowbox.
+ *
+ * Shadowbox is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation, either version 3 of the License, or (at your option)
+ * any later version.
+ *
+ * Shadowbox is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Shadowbox. If not, see <http://www.gnu.org/licenses/>.
+ *
+ * @author Michael J. I. Jackson <mjijackson gmail com>
+ * @copyright 2007 Michael J. I. Jackson
+ * @license http://www.gnu.org/licenses/lgpl-3.0.txt GNU LGPL 3.0
+ * @version SVN: $Id: shadowbox.js 150 2007-12-04 18:42:03Z michael $
+ */
+
+/*_________________________________________________________________ Overlay */
+#shadowbox_overlay {
+ visibility: hidden;
+ position: absolute;
+ display: block;
+ margin: 0;
+ padding: 0;
+ top: 0;
+ left: 0;
+ z-index: 998;
+}
+
+/*_______________________________________________________________ Container */
+#shadowbox_container {
+ position: fixed;
+ height: 0px;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ top: 0;
+ left: 0;
+ z-index: 999;
+ text-align: center; /* centers in quirks and IE */
+}
+
+/*_______________________________________________________________ Shadowbox */
+#shadowbox {
+ display: none;
+ visibility: hidden;
+ margin: 0 auto;
+ position: relative;
+ font-family: 'Lucida Grande', Tahoma, sans-serif;
+ text-align: left; /* reset left alignment */
+}
+
+/*___________________________________________________________________ Title */
+/*
+HTML snapshot:
+<div id="shadowbox_title">
+ <div id="shadowbox_title_inner">Title Here</div>
+</div>
+*/
+#shadowbox_title {
+ height: 25px;
+ padding: 0;
+ overflow: hidden;
+}
+#shadowbox_title_inner {
+ height: 16px;
+ font-size: 16px;
+ line-height: 16px;
+ white-space: nowrap;
+ padding: 5px 0 4px 8px;
+ color: #fff;
+ text-transform: lowercase;
+}
+
+/*____________________________________________________________________ Body */
+/*
+HTML snapsnot:
+<div id="shadowbox_body">
+ <div id="shadowbox_body_inner">
+ <img src="my_image.jpg" id="shadowbox_content" height="350" width="580">
+ </div>
+ <div id="shadowbox_loading">
+ <img src="images/loading.gif" alt="loading"></div>
+ <span><a href="javascript:Shadowbox.close();">Cancel</a></span>
+ </div>
+</div>
+*/
+#shadowbox_body {
+ position: relative;
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+ border: 2px solid #fff;
+ background-color: #000;
+}
+#shadowbox_body_inner {
+ position: relative;
+ overflow: hidden;
+}
+#shadowbox_loading {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 10000px; /* overflow:hidden will clip this */
+ width: 100%;
+ background-color: #222;
+}
+#shadowbox_loading img {
+ float: left;
+ margin: 10px 10px 0 10px;
+}
+#shadowbox_loading span {
+ float: left;
+ margin-top: 16px;
+ font-size: 10px;
+ text-transform: lowercase;
+}
+#shadowbox_loading span a,
+#shadowbox_loading span a:link,
+#shadowbox_loading span a:visited {
+ color: #fff;
+}
+
+#shadowbox_content.html { /* make html content scrollable */
+ height: 100%;
+ width: 100%;
+ overflow: auto;
+}
+
+/*_________________________________________________________________ Toolbar */
+/*
+HTML snapshot:
+<div id="shadowbox_toolbar">
+ <div id="shadowbox_toolbar_inner">
+ <div id="shadowbox_nav_close">
+ <a href="javascript:Shadowbox.close();"><span class="shortcut">C</span>lose</a>
+ </div>
+ <div id="shadowbox_nav_next">
+ <a href="javascript:Shadowbox.next();"><span class="shortcut">N</span>ext</a>
+ </div>
+ <div id="shadowbox_nav_previous">
+ <a href="javascript:Shadowbox.previous();"><span class="shortcut">P</span>revious</a>
+ </div>
+ <div id="shadowbox_counter">
+ <a href="javascript:Shadowbox.change(0);">1</a>
+ <a href="javascript:Shadowbox.change(1);" class="shadowbox_counter_current">2</a>
+ <a href="javascript:Shadowbox.change(2);">3</a>
+ </div>
+ </div>
+</div>
+*/
+#shadowbox_toolbar {
+ margin: 0;
+ padding: 0;
+ height: 20px;
+ overflow: hidden;
+}
+#shadowbox_toolbar_inner {
+ height: 20px;
+ color: #fff;
+}
+#shadowbox_toolbar_inner div {
+ padding-top: 4px;
+ padding-bottom: 2px;
+ font-size: 10px;
+ height: 10px;
+ line-height: 10px;
+}
+#shadowbox_toolbar_inner div span.shortcut {
+ text-decoration: underline;
+ font-weight: bold;
+ text-transform: lowercase;
+}
+#shadowbox_toolbar_inner div a {
+ text-decoration: none;
+ color: #fff;
+}
+#shadowbox_nav_close,
+#shadowbox_nav_previous,
+#shadowbox_nav_next {
+ float: right;
+ padding-right: 10px;
+}
+#shadowbox_counter {
+ float: left;
+ padding-left: 10px;
+}
+#shadowbox_counter a {
+ padding: 0 4px 0 0;
+}
+#shadowbox_counter a.shadowbox_counter_current {
+ text-decoration: underline;
+ font-weight: bold;
+}
+
+/*________________________________________________________________ Messages */
+div.shadowbox_message {
+ text-align: center;
+ padding: 10px;
+}
+div.shadowbox_message a:link,
+div.shadowbox_message a:visited {
+ text-decoration: none;
+ color: #bed333;
+}
+div.shadowbox_message a:hover,
+div.shadowbox_message a:focus {
+ text-decoration: underline;
+}
Added: trunk/www.gnome.org/projects/cheese/data/shadowbox/images/loading.gif
==============================================================================
Binary file. No diff available.
Modified: trunk/www.gnome.org/projects/cheese/data/themes/cheese/document.screen.css
==============================================================================
--- trunk/www.gnome.org/projects/cheese/data/themes/cheese/document.screen.css (original)
+++ trunk/www.gnome.org/projects/cheese/data/themes/cheese/document.screen.css Tue Sep 23 13:15:51 2008
@@ -204,7 +204,15 @@
.tour-item
{
- min-height: 200px;
+ width: 48%;
+ float:left;
+ margin-left: 1%;
+ margin-right: 1%;
+}
+
+.clearboth
+{
+ clear: both;
}
#warningbox
Modified: trunk/www.gnome.org/projects/cheese/tour.html
==============================================================================
--- trunk/www.gnome.org/projects/cheese/tour.html (original)
+++ trunk/www.gnome.org/projects/cheese/tour.html Tue Sep 23 13:15:51 2008
@@ -9,7 +9,7 @@
<meta name="description" content="Cheese" />
- <link rel="stylesheet" media="all" href="data/shadowbox/css/shadowbox-light.css"/>
+ <link rel="stylesheet" media="all" href="data/shadowbox/css/shadowbox.css"/>
<script type="text/javascript" src="data/shadowbox/js/yui-utilities.js"></script>
<script type="text/javascript" src="data/shadowbox/js/shadowbox-yui.js"></script>
<script type="text/javascript" src="data/shadowbox/js/shadowbox.js"></script>
@@ -17,7 +17,7 @@
window.onload = function(){
var options = {
handleUnsupported: 'remove',
- loadingImage: 'data/shadowbox/images/loading-light.gif'
+ loadingImage: 'data/shadowbox/images/loading.gif'
};
Shadowbox.init(options);
};
@@ -54,152 +54,154 @@
<div id="bottom">
- <div id="left" style="padding-left: 1%;">
+ <div class="tour-item">
+ <h2>Cheese!</h2>
+ <div class="imager">
+ <a title="Cheese!" rel="shadowbox[tour]" href="data/screenshots/cheese-2.24.0-main.jpg">
+ <img src="data/tour/cheese-main.jpg" alt="icon" />
+ </a>
+ </div>
+ <p>
+ Cheese is an program for the Gnome Desktop which allows you to take
+ photos, videos, and anything else you can think of with your webcam.
+ <br/>
+ Just start it up
+ and shoot! Gather all of your friends around, have some fun! Share
+ your taken photos and videos with 'em!
+ </p>
+ </div>
- <div class="tour-item">
- <h2>Cheese!</h2>
- <div class="imager">
- <a rel="shadowbox" href="data/screenshots/cheese-2.24.0-main.jpg">
- <img src="data/tour/cheese-main.jpg" alt="icon" />
- </a>
- </div>
- <p>
- Cheese is an program for the Gnome Desktop which allows you to take
- photos, videos, and anything else you can think of with your webcam.
- <br/>
- Just start it up
- and shoot! Gather all of your friends around, have some fun! Share
- your taken photos and videos with 'em!
- </p>
- </div>
-
- <div class="tour-item" style="min-height: 275px;">
- <h2>Add Cheesy Effects</h2>
- <div class="imagel">
- <a rel="shadowbox" href="data/screenshots/cheese-2.24.0-effects.jpg">
- <img src="data/tour/cheese-effects.jpg" alt="icon" />
- </a>
- </div>
- <p>
- Sick and tired of looking at the same face over and over again,
- want to be something else? Cheese allows
- you to add many different effects to photos, even multiple at a time! There are
- heaps of effect combinations to choose from that will keep you smiling.
- Morph yourself into Hulk or a nice pink alien, or even pile up effects in
- order to obtain the most amazing results!
- </p>
- </div>
-
- <div class="tour-item">
- <h2>Go to Hollywood</h2>
- <div class="imager">
- <img src="data/tour/cheese-video.jpg" alt="icon" />
- </div>
- <p>
- Cheese does not only allow you to take great photos, it also allows you to take
- videos. Effects, sharing, and everything that you can do with photos you can
- also do with videos as well. Instead of preparing for that one
- moment, invite some friends, record your session and laugh about it afterwards.
- So Mr. Kubrick, go ahead and present us your new
- Hollywood-movie! Or do you want to be a music star and record the
- video to your new song?
- </p>
- </div>
-
- <div class="tour-item">
- <h2>Kiosk/Fullscreen mode</h2>
- <div class="imagel">
- <a rel="shadowbox" href="data/screenshots/cheese-2.24.0-fullscreen.jpg">
- <img src="data/tour/cheese-fullscreen.jpg" alt="icon" />
- </a>
- </div>
- <p>
- Did you ever want to set up a computer with Cheese on it in the
- lobby of your office? Did you ever want to have Cheese running at a
- party with a lot of people? This and much more is just a click
- away: enter the fullscreen mode and enjoy Cheese on the whole
- display! Attention: If you try this at a party, this can lead to
- Cheese-affection, which means that everybody will be standing in front
- of your webcam and not drinking your beer anymore ;)
- </p>
- </div>
-
- </div>
-
- <div id="right" style="padding-right: 1%;">
-
- <div class="tour-item">
- <h2>3... 2... 1... Cheese!</h2>
- <div class="imager">
- <a rel="shadowbox" href="data/screenshots/cheese-2.24.0-countdown.jpg">
- <img src="data/tour/cheese-countdown.jpg" alt="icon" />
- </a>
- </div>
- <p>
- The countdown widget will let you get into
- position, or wreck everything, before the photo that you want is
- taken. The visual countdown will appear at the bottom of the image,
- and will give you time to press the take photo button, and
- get ready! So if you need to put your eye makeup on, be fast, you
- just have 3 seconds!
- </p>
- </div>
-
- <div class="tour-item">
- <h2>Share your Photos and Videos</h2>
- <div class="imagel">
- <a rel="shadowbox" href="data/screenshots/cheese-2.24.0-share.jpg">
- <img src="data/tour/cheese-share.jpg" alt="icon" />
- </a>
- </div>
- <p>
- Finished taking photos and movies? Then go ahead and share your files to your
- friends and family! You can export them to F-Spot, put them on Flickr, mail
- them or use them as your account photo in GNOME. You can also save them to your
- disk to do anything you want with them, the possibilities are endless.
- With nautilus-sendto installed, you even have further
- possibilieties to share your photos and movies!
- Cheese makes it super easy to share yor photos and videos.
- </p>
- </div>
-
- <div class="tour-item" style="min-height: 275px;">
- <h2>Addicted to webcams?</h2>
- <div class="imagel">
- <img src="data/tour/cheese-prefs.jpg" alt="icon" />
- </div>
- <p>
- You have several webcams? You can't stop taking photos of yourself
- and your friends? The only reason you have USB-Ports is to attach
- Webcams?<br/>
- With Cheese 2.24, you now can switch between your installed webcams
- with just one click! Just open the shiny new preference dialog and
- choose your favoured webcam. You can also set the resolution of
- your webcam there! So, get all your webcams out of your locker,
- attach them to your computer and play with them!
- </p>
- </div>
-
- <div class="tour-item">
- <h2>Endless Possibilities</h2>
- <div class="imager">
- <a rel="shadowbox" href="data/screenshots/cheese-2.24.0-countdown.jpg">
- <img src="data/tour/cheese-about.jpg" alt="icon" />
- </a>
- </div>
- <p>
- Don't stop there, find out what you can do with Cheese today! Install
- Cheese and have fun, send us your funniest photos and videos, share
- your fun with others. If you want more features or have some great
- ideas what we could do to make Cheese even rock more, do not hesitate
- to contact us or to fill a bug at our bug tracking website.
- </p>
- </div>
+ <div class="tour-item">
+ <h2>3... 2... 1... Cheese!</h2>
+ <div class="imager">
+ <a title="3... 2... 1... Cheese!" rel="shadowbox[tour]" href="data/screenshots/cheese-2.24.0-countdown.jpg">
+ <img src="data/tour/cheese-countdown.jpg" alt="icon" />
+ </a>
+ </div>
+ <p>
+ The countdown widget will let you get into
+ position, or wreck everything, before the photo that you want is
+ taken. The visual countdown will appear at the bottom of the image,
+ and will give you time to press the take photo button, and
+ get ready! So if you need to put your eye makeup on, be fast, you
+ just have 3 seconds!
+ </p>
+ </div>
- <div style="position: absolute; right: 1em; margin-top: 105px; font-size: 0.85em; font-style: italic;">
- Text by Joshua Henderson and daniel g. siegel
- </div>
+ <br class="clearboth">
+
+ <div class="tour-item">
+ <h2>Add Cheesy Effects</h2>
+ <div class="imagel">
+ <a title="Add Cheesy Effects" rel="shadowbox[tour]" href="data/screenshots/cheese-2.24.0-effects.jpg">
+ <img src="data/tour/cheese-effects.jpg" alt="icon" />
+ </a>
+ </div>
+ <p>
+ Sick and tired of looking at the same face over and over again,
+ want to be something else? Cheese allows
+ you to add many different effects to photos, even multiple at a time! There are
+ heaps of effect combinations to choose from that will keep you smiling.
+ Morph yourself into Hulk or a nice pink alien, or even pile up effects in
+ order to obtain the most amazing results!
+ </p>
</div>
+
+ <div class="tour-item">
+ <h2>Share your Photos and Videos</h2>
+ <div class="imagel">
+ <a title="Share your Photos and Videos" rel="shadowbox[tour]" href="data/screenshots/cheese-2.24.0-share.jpg">
+ <img src="data/tour/cheese-share.jpg" alt="icon" />
+ </a>
+ </div>
+ <p>
+ Finished taking photos and movies? Then go ahead and share your files to your
+ friends and family! You can export them to F-Spot, put them on Flickr, mail
+ them or use them as your account photo in GNOME. You can also save them to your
+ disk to do anything you want with them, the possibilities are endless.
+ With nautilus-sendto installed, you even have further
+ possibilieties to share your photos and movies!
+ Cheese makes it super easy to share yor photos and videos.
+ </p>
+ </div>
+
+ <br class="clearboth">
+
+ <div class="tour-item">
+ <h2>Go to Hollywood</h2>
+ <div class="imager">
+ <img src="data/tour/cheese-video.jpg" alt="icon" />
+ </div>
+ <p>
+ Cheese does not only allow you to take great photos, it also allows you to take
+ videos. Effects, sharing, and everything that you can do with photos you can
+ also do with videos as well. Instead of preparing for that one
+ moment, invite some friends, record your session and laugh about it afterwards.
+ So Mr. Kubrick, go ahead and present us your new
+ Hollywood-movie! Or do you want to be a music star and record the
+ video to your new song?
+ </p>
+ </div>
+
+ <div class="tour-item">
+ <h2>Addicted to webcams?</h2>
+ <div class="imagel">
+ <img src="data/tour/cheese-prefs.jpg" alt="icon" />
+ </div>
+ <p>
+ You have several webcams? You can't stop taking photos of yourself
+ and your friends? The only reason you have USB-Ports is to attach
+ Webcams?<br/>
+ With Cheese 2.24, you now can switch between your installed webcams
+ with just one click! Just open the shiny new preference dialog and
+ choose your favoured webcam. You can also set the resolution of
+ your webcam there! So, get all your webcams out of your locker,
+ attach them to your computer and play with them!
+ </p>
+ </div>
+
+ <br class="clearboth">
+
+ <div class="tour-item">
+ <h2>Kiosk/Fullscreen mode</h2>
+ <div class="imagel">
+ <a title="Kiosk/Fullscreen mode" rel="shadowbox[tour]" href="data/screenshots/cheese-2.24.0-fullscreen.jpg">
+ <img src="data/tour/cheese-fullscreen.jpg" alt="icon" />
+ </a>
+ </div>
+ <p>
+ Did you ever want to set up a computer with Cheese on it in the
+ lobby of your office? Did you ever want to have Cheese running at a
+ party with a lot of people? This and much more is just a click
+ away: enter the fullscreen mode and enjoy Cheese on the whole
+ display! Attention: If you try this at a party, this can lead to
+ Cheese-affection, which means that everybody will be standing in front
+ of your webcam and not drinking your beer anymore ;)
+ </p>
+ </div>
+
+ <div class="tour-item">
+ <h2>Endless Possibilities</h2>
+ <div class="imager">
+ <a title="Endless Possibilities" rel="shadowbox[tour]" href="data/screenshots/cheese-2.24.0-countdown.jpg">
+ <img src="data/tour/cheese-about.jpg" alt="icon" />
+ </a>
+ </div>
+ <p>
+ Don't stop there, find out what you can do with Cheese today! Install
+ Cheese and have fun, send us your funniest photos and videos, share
+ your fun with others. If you want more features or have some great
+ ideas what we could do to make Cheese even rock more, do not hesitate
+ to contact us or to fill a bug at our bug tracking website.
+ </p>
+ </div>
+
+ <br class="clearboth">
+
+ <div style="float: right; font-size: 0.85em; font-style: italic;">
+ Text by Joshua Henderson and daniel g. siegel
+ </div>
+
</div><!-- bottom -->
</div><!-- body -->
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
