Author: gilles.vincent@gmail.com
Date: Sat Jul 15 10:34:18 2006
New Revision: 4007
Log:
Mise à jour du plugin pour lightbox v2.
- on peut grouper des images (cf. exemple du portolio) et naviguer entre elles
- ajout d'effets de transition
- ça reste compatible avec la v1
Added:
_plugins_/lightbox/css/
_plugins_/lightbox/css/lightbox.css
_plugins_/lightbox/howto.html
_plugins_/lightbox/images/
_plugins_/lightbox/images/blank.gif (with props)
_plugins_/lightbox/images/close.gif (with props)
_plugins_/lightbox/images/closelabel.gif (with props)
_plugins_/lightbox/images/image-1.jpg (with props)
_plugins_/lightbox/images/loading.gif (with props)
_plugins_/lightbox/images/next.gif (with props)
_plugins_/lightbox/images/nextlabel.gif (with props)
_plugins_/lightbox/images/prev.gif (with props)
_plugins_/lightbox/images/prevlabel.gif (with props)
_plugins_/lightbox/js/
_plugins_/lightbox/js/effects.js
_plugins_/lightbox/js/lightbox.js
_plugins_/lightbox/js/prototype.js
_plugins_/lightbox/js/scriptaculous.js
Removed:
_plugins_/lightbox/close.gif
_plugins_/lightbox/lightbox.css
_plugins_/lightbox/lightbox.js
_plugins_/lightbox/loading.gif
_plugins_/lightbox/overlay.png
Modified:
_plugins_/lightbox/article.html
Modified: _plugins_/lightbox/article.html
--- _plugins_/lightbox/article.html (original)
+++ _plugins_/lightbox/article.html Sat Jul 15 10:34:18 2006
@@ -11,8 +11,10 @@
<!-- Lien vers le backend pour navigateurs eclaires -->
<link rel="alternate" type="application/rss+xml" title="<:syndiquer_site:>" href="#URL_PAGE{backend}" />
-<script type="text/javascript" src="#CHEMIN{lightbox.js}"></script>
-<link rel="stylesheet" href="#CHEMIN{lightbox.css}" type="text/css" media="screen" />
+<script type="text/javascript" src="#CHEMIN{lightbox}/js/prototype.js"></script>
+<script type="text/javascript" src="#CHEMIN{lightbox}/js/scriptaculous.js?load=effects"></script>
+<script type="text/javascript" src="#CHEMIN{lightbox}/js/lightbox.js"></script>
+<link rel="stylesheet" href="#CHEMIN{lightbox}/css/lightbox.css" type="text/css" media="screen" />
<!-- Ceci est la feuille de style par defaut pour le code genere par SPIP -->
<link rel="stylesheet" href="[(#CHEMIN{spip_style.css}|direction_css)]" type="text/css" media="all" />
@@ -78,8 +80,8 @@
<BOUCLE_documents_portfolio(DOCUMENTS) {id_article}
{mode=document} {extension IN png,jpg,gif} {par date}
{doublons}>
- [<a href="#URL_DOCUMENT" type="#MIME_TYPE"
- onclick="location.href='[(#URL_ARTICLE|parametre_url{id_document,#ID_DOCUMENT})]#documents_portfolio';return false;"[title="(#TITRE|couper{80}|texte_backend)"]>(#LOGO_DOCUMENT||image_reduire{0,60}|inserer_attribut{alt,[(#TITRE|couper{80}|texte_backend)]})</a>]
+ [<a href="#URL_DOCUMENT" type="#MIME_TYPE" rel="lightbox[documents_portfolio]"
+ [title="(#TITRE|couper{80}|texte_backend)"]>(#LOGO_DOCUMENT||image_reduire{0,60}|inserer_attribut{alt,[(#TITRE|couper{80}|texte_backend)]})</a>]
</BOUCLE_documents_portfolio>
</div>
</B_documents_portfolio>
Removed: _plugins_/lightbox/close.gif
Binary file - no diff available.
Added: _plugins_/lightbox/css/lightbox.css
--- _plugins_/lightbox/css/lightbox.css (added)
+++ _plugins_/lightbox/css/lightbox.css Sat Jul 15 10:34:18 2006
@@ -0,0 +1,104 @@
+#lightbox{
+ position: absolute;
+ top: 40px;
+ left: 0;
+ width: 100%;
+ z-index: 100;
+ text-align: center;
+ line-height: 0;
+ }
+
+#lightbox a img{ border: none; }
+
+#outerImageContainer{
+ position: relative;
+ background-color: #fff;
+ width: 250px;
+ height: 250px;
+ margin: 0 auto;
+ }
+
+#imageContainer{
+ padding: 10px;
+ }
+
+#loading{
+ position: absolute;
+ top: 40%;
+ left: 0%;
+ height: 25%;
+ width: 100%;
+ text-align: center;
+ line-height: 0;
+ }
+#hoverNav{
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ z-index: 10;
+ }
+#imageContainer>#hoverNav{ left: 0;}
+#hoverNav a{ outline: none;}
+
+#prevLink, #nextLink{
+ width: 49%;
+ height: 100%;
+ background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
+ display: block;
+ }
+#prevLink { left: 0; float: left;}
+#nextLink { right: 0; float: right;}
+#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
+#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
+
+
+#imageDataContainer{
+ font: 10px Verdana, Helvetica, sans-serif;
+ background-color: #fff;
+ margin: 0 auto;
+ line-height: 1.4em;
+ }
+
+#imageData{
+ padding:0 10px;
+ }
+#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
+#imageData #caption{ font-weight: bold; }
+#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
+#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }
+
+#overlay{
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 90;
+ width: 100%;
+ height: 500px;
+ background-color: #000;
+ filter:alpha(opacity=60);
+ -moz-opacity: 0.6;
+ opacity: 0.6;
+ }
+
+
+.clearfix:after {
+ content: ".";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+ }
+
+* html>body .clearfix {
+ display: inline-block;
+ width: 100%;
+ }
+
+* html .clearfix {
+ /* Hides from IE-mac \*/
+ height: 1%;
+ /* End hide from IE-mac */
+ }
+
\ No newline at end of file
Added: _plugins_/lightbox/howto.html
--- _plugins_/lightbox/howto.html (added)
+++ _plugins_/lightbox/howto.html Sat Jul 15 10:34:18 2006
@@ -0,0 +1,63 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<head>
+
+ <title>Lightbox JS v2.0 | Test Page</title>
+
+ <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
+
+ <script src="js/prototype.js" type="text/javascript"></script>
+ <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
+ <script src="js/lightbox.js" type="text/javascript"></script>
+
+ <style type="text/css">
+ body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }
+ </style>
+
+</head>
+<body>
+
+
+<h1><a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox JS <em>v2.0</em></a></h1>
+<p><a href="http://www.huddletogether.com">by Lokesh Dhakar</a></p>
+
+<h2>Example</h2>
+
+<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
+
+
+
+
+<h2>How to Use:</h2>
+<h3>Part 1 - Setup</h3>
+<ol>
+<li>Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.
+<pre><code><script type="text/javascript" src="js/prototype.js"></script>
+<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
+<script type="text/javascript" src="js/lightbox.js"></script>
+</code></pre>
+</li>
+<li>Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
+<pre><code><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
+</code></pre>
+</li>
+<li>Check the CSS and make sure the referenced <code>prevlabel.gif</code> and <code>nextlabel.gif</code> files are in the right location. Also, make sure the <code>loading.gif</code> and <code>closelabel.gif</code> files as referenced near the top of the <code>lightbox.js</code> file are in the right location.</li>
+</ol>
+<h3>Part 2 - Activate</h3>
+<ol>
+<li>Add a <code>rel="lightbox"</code> attribute to any link tag to activate the lightbox. For example:
+<pre><code><a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
+</code></pre>
+<em>Optional: </em>Use the <code>title</code> attribute if you want to show a caption. </li>
+<li>If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
+<pre><code><a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
+<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
+<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
+</code></pre>
+No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!</li>
+</ol>
+
+
+</body>
+</html>
Added: _plugins_/lightbox/images/blank.gif
Binary file - no diff available.
Propchange: _plugins_/lightbox/images/blank.gif
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Added: _plugins_/lightbox/images/close.gif
Binary file - no diff available.
Propchange: _plugins_/lightbox/images/close.gif
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Added: _plugins_/lightbox/images/closelabel.gif
[... 3998 lines stripped ...]
