'www/sites/kphotoalbum'

[prev in list] [next in list] [prev in thread] [next in thread] 

List:       kde-commits
Subject:    www/sites/kphotoalbum
From:       Tobias Leupold <tobias.leupold () web ! de>
Date:       2015-05-27 21:11:29
Message-ID: E1Yxibp-0003LJ-Ka () scm ! kde ! org
[Download RAW message or body]

SVN commit 1427661 by tleupold:

Adding a bit of JS magic to the 3-Minute-Tour ;-)


 M  +44 -49    documentation/3minutetour/index.php  
 A             fancybox (directory)  
 AM            fancybox/blank.gif  
 AM            fancybox/fancybox_loading.gif  
 AM            fancybox/fancybox_loading@2x.gif  
 AM            fancybox/fancybox_overlay.png  
 AM            fancybox/fancybox_sprite.png  
 AM            fancybox/fancybox_sprite@2x.png  
 A             fancybox/jquery-1.10.1.min.js  
 A             fancybox/jquery.fancybox.css  
 AM            fancybox/jquery.fancybox.pack.js  
 M  +14 -1     index.php  
 M  +5 -1      shared/header.php  
 M  +19 -0     styles/default.css  


--- trunk/www/sites/kphotoalbum/documentation/3minutetour/index.php #1427660:1427661
@@ -1,73 +1,68 @@
-<?php require "{$_SERVER['DOCUMENT_ROOT']}/shared/header.php"; ?>
+<?php
+$additionalHeaders = <<<END
+<script type="text/javascript" src="/fancybox/jquery-1.10.1.min.js"></script>
+<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
+<link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox.css" \
media="screen" />  
-<h2>3 Minute Tour</h2>
+<script type="text/javascript">
+$(document).ready(function() {
+    $(".fancybox").fancybox({
+        helpers : { title : { type : 'inside' }},
+        beforeShow: function(){
+            this.title = '<div \
class="myTitle">'+$(this.element).next('p').html()+'</div>'; +        }
+    });
+});
+</script>
 
-<table class="tabulka">
 
-<tr>
+END;
 
-<td><a href="browser-overview.jpg" title="Zoom screenshot"><img \
src="browser-overview_small.jpg" alt="Browser overview screenshot" /></a></td> \
+require "{$_SERVER['DOCUMENT_ROOT']}/shared/header.php"; +?>
 
-<td>The main feature of KPhotoAlbum is its browser. It allows you to browse through \
the annotations you've made on your images. The default categories in KPhotoAlbum are \
<em>Persons</em>, <em>Locations</em>, and <em>Keywords</em>. Does these categories \
not match your needs, then you may add new categories yourself.</td> +<h2>3 Minute \
Tour</h2>  
-</tr>
+<div id="threeminutetour">
 
-<tr>
+<a href="browser-overview.jpg" class="fancybox" rel="3minutetour"><img \
src="browser-overview_small.jpg" alt="Browser overview screenshot" /></a> +<p>The \
main feature of KPhotoAlbum is its browser. It allows you to browse through the \
annotations you've made on your images. The default categories in KPhotoAlbum are \
<em>Persons</em>, <em>Locations</em>, and <em>Keywords</em>. Does these categories \
not match your needs, then you may add new categories yourself.</p>  
-<td><a href="browser-persons.jpg" title="Zoom screenshot"><img \
src="browser-persons_small.jpg" alt="Browser persons screenshot" /></a></td> +<hr />
 
-<td>In the browser, you may choose a category, this will show all the items of that \
category. When you've chosen an item from a category, you will again be back at the \
main page of the browser, this time, however, <em>in scope</em> of your current \
selection, meaning you will only see information about those images matching the item \
chosen in the category. In the screen shot, I've just chosen <em>Persons</em>.</td> \
+<a href="browser-persons.jpg" class="fancybox" rel="3minutetour"><img \
src="browser-persons_small.jpg" alt="Browser persons screenshot" /></a> +<p>In the \
browser, you may choose a category, this will show all the items of that category. \
When you've chosen an item from a category, you will again be back at the main page \
of the browser, this time, however, <em>in scope</em> of your current selection, \
meaning you will only see information about those images matching the item chosen in \
the category. In the screen shot, I've just chosen <em>Persons</em>.</p>  
-</tr>
+<hr />
 
-<tr>
+<a href="back-in-browser.jpg" class="fancybox" rel="3minutetour"><img \
src="back-in-browser_small.jpg" alt="Back in browser screenshot" /></a> +<p>In the \
screen shot at the left you see the result of choosing the person <em>Jesper</em> \
from my image database. First, notice that you actually see the current scope in the \
status bar. Next, notice how the counts for categories and images has changed, as a \
result of us now being in the scope of Jesper (i.e. only viewing images with Jesper \
on).</p>  
-<td><a href="back-in-browser.jpg" title="Zoom screenshot"><img \
src="back-in-browser_small.jpg" alt="Back in browser screenshot" /></a></td> +<hr />
 
-<td>In the screen shot at the left you see the result of choosing the person \
<em>Jesper</em> from my image database. First, notice that you actually see the \
current scope in the status bar. Next, notice how the counts for categories and \
images has changed, as a result of us now being in the scope of Jesper (i.e. only \
viewing images with Jesper on).</td> +<a href="browser-result.jpg" class="fancybox" \
rel="3minutetour"><img src="browser-result_small.jpg" alt="Browser result screenshot" \
/></a> +<p>If you had a specific image of Jesper in mind, 725 images may still be \
quite a bit too many, so you may simply continue browsing, choosing another person, a \
place etc. You may continue browsing to any depth, so you may e.g. in the end only \
show images taken in Las Vegas with both Jesper and Anne Helene present. The result \
of this may be seen on the left.</p>  
-</tr>
+<hr />
 
-<tr>
+<a href="datebar.jpg" class="fancybox" rel="3minutetour"><img \
src="datebar_small.jpg" alt="Datebar screenshot" /></a> +<p>Besides browsing based on \
categories it is also possible to use the date bar at the bottom of the screen to \
limit the scope to a certain date range. Such range limit may be seen on the left. \
The date bar supports multiple resolutions, so each unit may be a year, a month, a \
week, a day, two hours, or 10 minutes.</p>  
-<td><a href="browser-result.jpg" title="Zoom screenshot"><img \
src="browser-result_small.jpg" alt="Browser result screenshot" /></a></td> +<hr />
 
-<td>If you had a specific image of Jesper in mind, 725 images may still be quite a \
bit too many, so you may simply continue browsing, choosing another person, a place \
etc. You may continue browsing to any depth, so you may e.g. in the end only show \
images taken in Las Vegas with both Jesper and Anne Helene present. The result of \
this may be seen on the left.</td> +<a href="image-config.jpg" class="fancybox" \
rel="3minutetour"><img src="image-config_small.jpg" alt="Image config screenshot" \
/></a> +<p>To be able to browse based on categories, you have to tell KPhotoAlbum \
about those categories. You do so from the image configuration dialog, which you may \
see on the left. In the image configuration dialog, you may set properties for a \
single image at a time, or for a range of images (that way you may specify that all \
images from your latest party was all taken in Las Vegas). The dialog has been \
optimized for easy usage, so often it is possible to annotate more than 100 images in \
10 minutes. An example of this optimization are the line edits above the list boxes. \
In those line edits, typing will be completed them from the list box. You can see \
that in the Location line edit where I've so far only typed an \
<strong>E</strong>.</p>  
-</tr>
+<hr />
 
-<tr>
+<a href="thumbnail-view.jpg" class="fancybox" rel="3minutetour"><img \
src="thumbnail-view_small.jpg" alt="Thumbnail view screenshot" /></a> +<p>Once you \
have annotated all your images, you may start your journey down memory lane. When you \
have narrowed your view to a set of images you wish to see, simply select <em>view \
images</em> in the browser window. This will bring up the thumbnail view which you \
may see on the left. From the thumbnail view you may select a set of images, and \
choose <em>view images</em> from the menu bar, or simply click on an image to view \
it.</p>  
-<td><a href="datebar.jpg" title="Zoom screenshot"><img src="datebar_small.jpg" \
alt="Datebar screenshot" /></a></td> +<hr />
 
-<td>Besides browsing based on categories it is also possible to use the date bar at \
the bottom of the screen to limit the scope to a certain date range. Such range limit \
may be seen on the left. The date bar supports multiple resolutions, so each unit may \
be a year, a month, a week, a day, two hours, or 10 minutes.</td> +<a \
href="html-generation.jpg" class="fancybox" rel="3minutetour"><img \
src="html-generation_small.jpg" alt="HTML Generation screenshot" /></a> \
+<p>KPhotoAlbum generates HTML pages which are easy to navigate and which can be read \
by everybody despite their monitor size. The pages supports different resolutions, so \
your mom on a slow line do not have to wait minutes to download 2272x1704 images, \
that she would had to scroll around on forever to find you on her 800x600 monitor. On \
the other hand your friends with fast Internet can download the full resolution \
images for printing.</p>  
-</tr>
+</div>
 
-<tr>
-
-<td><a href="image-config.jpg" title="Zoom screenshot"><img \
                src="image-config_small.jpg" alt="Image config screenshot" \
                /></a></td>
-
-<td>To be able to browse based on categories, you have to tell KPhotoAlbum about \
those categories. You do so from the image configuration dialog, which you may see on \
the left. In the image configuration dialog, you may set properties for a single \
image at a time, or for a range of images (that way you may specify that all images \
from your latest party was all taken in Las Vegas). The dialog has been optimized for \
easy usage, so often it is possible to annotate more than 100 images in 10 minutes. \
An example of this optimization are the line edits above the list boxes. In those \
line edits, typing will be completed them from the list box. You can see that in the \
                Location line edit where I've so far only typed an \
                <strong>E</strong>.</td>
-
-</tr>
-
-<tr>
-
-<td><a href="thumbnail-view.jpg" title="Zoom screenshot"><img \
                src="thumbnail-view_small.jpg" alt="Thumbnail view screenshot" \
                /></a></td>
-
-<td>Once you have annotated all your images, you may start your journey down memory \
lane. When you have narrowed your view to a set of images you wish to see, simply \
select <em>view images</em> in the browser window. This will bring up the thumbnail \
view which you may see on the left. From the thumbnail view you may select a set of \
images, and choose <em>view images</em> from the menu bar, or simply click on an \
                image to view it.</td>
-
-</tr>
-
-<tr>
-
-<td><a href="html-generation.jpg" title="Zoom screenshot"><img \
                src="html-generation_small.jpg" alt="HTML Generation screenshot" \
                /></a></td>
-
-<td>KPhotoAlbum generates HTML pages which are easy to navigate and which can be \
read by everybody despite their monitor size. The pages supports different \
resolutions, so your mom on a slow line do not have to wait minutes to download \
2272x1704 images, that she would had to scroll around on forever to find you on her \
800x600 monitor. On the other hand your friends with fast Internet can download the \
                full resolution images for printing.<br /><br /></td>
-
-</tr>
-
-</table>
-
 <?php require "{$_SERVER['DOCUMENT_ROOT']}/shared/footer.php"; ?>
\ No newline at end of file
--- trunk/www/sites/kphotoalbum/index.php #1427660:1427661
@@ -1,6 +1,19 @@
 <?php
+$additionalHeaders = <<<END
+<script type="text/javascript" src="/fancybox/jquery-1.10.1.min.js"></script>
+<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
+<link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox.css" \
media="screen" /> +
+<script type="text/javascript">
+$('.fancybox').fancybox();
+</script>
+
+
+END;
+
 require "{$_SERVER['DOCUMENT_ROOT']}/shared/header.php";
 require "{$_SERVER['DOCUMENT_ROOT']}/shared/GenerateNews.php";
+
 GenerateNews(5, true, 'h4');
 ?>
 
@@ -9,7 +22,7 @@
 
 <p>I personally realized that this was not possible anymore, and especially for my \
digital images - but also for my paper images - I needed a tool to help me describe \
my images, and to search in the pile of images. This is exactly what \
<strong>KPhotoAlbum</strong> is all about.</p>  
-<a href="img/big/kphotoalbum.jpg" title="Show fullsize screenshot"><img \
src="img/kphotoalbum.jpg" alt="KPhotoAlbum screenshot" /></a> +<a class="fancybox" \
href="img/big/kphotoalbum.jpg"><img src="img/kphotoalbum.jpg" alt="KPhotoAlbum \
screenshot" /></a>  
 <p>With <strong>KPhotoAlbum</strong> it is today possible for me to find any image I \
have in less than 5 seconds, let that be an image with a special person, an image \
from a special place, or even both.</p>  
--- trunk/www/sites/kphotoalbum/shared/header.php #1427660:1427661
@@ -6,6 +6,10 @@
     $pageTitle = "KPhotoAlbum – $pageTitle";
 }
 
+if (!isset($additionalHeaders)) {
+    $additionalHeaders = '';
+}
+
 echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n\n";
 
 ?>
@@ -27,7 +31,7 @@
 <link rel="stylesheet" href="/styles/default.css" type="text/css"  media="screen, \
projection" />  <link rel="alternate" type="application/rss+xml" title="KPhotoAlbum \
News" href="http://www.kphotoalbum.org/news.rss"/>  
-</head>
+<?php echo $additionalHeaders; ?></head>
 
 <body>
 
--- trunk/www/sites/kphotoalbum/styles/default.css #1427660:1427661
@@ -333,3 +333,22 @@
     float: left;
     margin-right: 5px;
 }
+
+#threeminutetour {
+    color: white;
+}
+
+#threeminutetour a img {
+    float: left;
+}
+
+#threeminutetour p {
+    margin-left: 220px;
+}
+
+#threeminutetour hr {
+    clear: both;
+    margin-top: 1em;
+    margin-bottom: 1em;
+    visibility: hidden;
+}


[prev in list] [next in list] [prev in thread] [next in thread]
Configure | About | News | Add a list | Sponsored by KoreLogic