Du côté de chez Xuan

En fait, ca marche nickel, sauf que j'ai toujours du mal avec les grosses fleches permettant davancer ou reculer dans un groupe de photos...

Je vais sûrement intégrer ça à mon Blog version summer 2007

Trop cool xuxu, demain de change mes rel ;)
Merci !

On perd une fonctionnalité intéressante de certaines version de ligthbox: la navigation clavier...

A quand l'intégration des touches "P", "N", "X" ou alors
"->", "

J'y ai pensé ce matin ^^.

Je vais my atteler dès ce soir .

Ben en fait il me plait bien ce petit script

Salut,

je découvre le site et le script.

Concernant le script ça me parait vraiment très bien et je pense que je vais m'y pencher assez longuement histoire de tester une alternative au script lightbox.

A propos de la navigation clavier, il reste un petit souci. Quand le script est enclenché on ne dispose pas de la fonctionnalité canonique du passage de lien en lien par la touche tab. C'est sans doute solutionnable, pour lightbox j'avais réussi à le faire, et ce serait un plus.

Il reste aussi la question de l'obstruction aux commentaires/descriptions/textes associés aux images que constitut l'utilisation de l'attribut title comme support de ceux ci, en situation de js inactif si navigation clavier par exemple. Là aussi cela me semble tout à fait solutionnable.

J'en reparlerai donc si tu veux bien quand je me serai acclimaté à ton script

Bonjour à tous, j'ai lu la licence, et me permet donc de vous donner une url où vous pourrez récupérer une version modifiée de la version 1.7 : http://laruiss.org/splash.image.zip
avec notamment :

- Séparation de l'html, du js et des css dans des répertoires différents ;
- Séparation des propriétés CSS IE-only (les 'filter') dans un fichier à part qui ne sera lu que par les navigateurs IE ;
- Internationalisation des textes (précédent, suivant, commencer le diaporama, etc.) ;
- Compatibilité avec les navigateurs plus anciens (n'implémentant pas les méthodes getAttribute() et setAttribute() des éléments DOM, ou n'implémentant pas document.getElementById() ) et utilisation de l'attribut 'class' au lieu de l'attribut 'rel' ;
- Uniformisation du formattage et simplification du code .js
- Ajout d'un commentaire en bas de la photo avec le contenu de l'attribut title de l'élément 'a'

A bientôt

Laruiss, tu n'as pas une page de présentation de ton fork sur ton site?

Voilà voilà ! Vos désirs sont des ordres, mon cher Thanh !

http://www.laruiss.org/splash.image.so/

@

Si je n'ai pas porté d'attention à ton message, c'est qu'il est arrivé à un moment où d'autres choses bien plus préoccupantes hantaient mon esprit.

Mes proches comprendront, les autres peut être.
En tous cas, bravo pour ton travail, et bonne continuation.
@

Hehe, je comprends tout à fait moi-même.

Très heureux et honoré que tu aies visité ma page...

(Sympa d'avoir corrigé l'url, d'ailleurs, et rajouté le '/' que j'avais oublié)

Finalement, j'ai gardé l'attribut rel, vu que rel est une propriété d'un élément DOM 'a' en javascript.

@ plus

P.S. : Je prépare un script PHP qui lira le contenu d'un répertoire 'originals' de façon récursive, et créera à partir des images qu'il contient les thumbnails dans le répertorie 'thumbs', des images d'une hauteur de 500 pixels dans le répertoire 'images', et générera le index.html qui ira bien. Si ça intéresse des gens, j'accélérerai le développement...

J'avais également commencé un script similaire ici, http://gallery.chez-xuxu.net/, que je n'ai jamais vraiment fini ...
Ton script intéressera surement du monde.
Bon développement.

Bonjour,

Je débute en CSS, HTML et tout ce qui va avec .

J'ai testé votre travail et franchement bravo.
J'ai réussi à intégrer cela dans des pages que je suis en train de créer.
Cela fonctionne bien sous FF mais pas sous IE6 .

Si vous pouviez m'aider, car là je galère vraiment.

Merci

Stéphane

bonjour,

Juste enervant le fait que les swf s'affiche au dessus !!!

Très bonne remarque.
Cela fera partie de la prochaine mise à jour .

Stéphane, donne-nous une url pour qu'on puisse voir ce qui ne va pas...

Désolé d'avoir répondu aussi tardivement, j'étais en WE en Alsace .

http://webplaza.pt.lu/stepesth/exemples.html

Merci de votre aide.

PS: Cela fonctionne sous IE7 mais pas IE6 ??

Stéphane

Salut,

Félicitations pour ton script que j'ai testé car je cherchais un lightbox like avec un code plus simple afin de modifier le seul truc qui me genâit dans lightbox : placer la croix de fermeture en haut à droite au dessus de l'image plutôt qu'en bas.

Bref j'ai pris ton script, j'ai modifié un peu le dom pour que ta croix de fermeture apparaisse avant l'image, et non pas par dessus, mais je me suis rendu compte d'un truc c'est que si la page contient un flash il passera par dessus le splash, alors qu'avec lightbox ca ne se produit pas, le flash est bien caché en dessous.

Donc voilà si jamais tu veux faire cette amélioration ;)

Merci pour cette remarque.
Je l'ajoute à la queue liste de modifications.

Merci et @

Merci Xuxu pour ton travail. J'vais l'utiliser pour mon nouveau projet. ;)

Very nice Script! First I found in the Net. Was kind a complicated to understand the french comments, i'am german and speak german/english only. I "improofed" the script a little, so no its able to resize the image to maximum screen area. Here is the Code:

// ------------------------------------------------------------------------
// | Affichage des image en plein écran
// ------------------------------------------------------------------------
// | Javascript
// |
// | @author Xuan Nguyen
// | @version 1.78
// | Last update 2007/05/31
// |
// | Licensed under the Creative Commons Attribution 3 License - http://creativecommons.org/licenses/by-sa/3.0/
// ------------------------------------------------------------------------

//Distance en pixel entre le haut de l'image et le top.
var margin_top = 10;
//Distance en pixel entre la droite de l'image et le right si l'image dépasse du body initial.
var margin_right = 10;
//Distance en pixel entre le bas de l'image et le bottom si l'image dépasse du body initial.
var margin_bottom = 10;
//Distance en pixel entre la gauche de l'image et le right si l'image dépasse du body initial.
var margin_left = 10;
// Tableau comprenant les groupes d'images
var splash_groups = new Array();
// Tableau comprenant les liens splashed
var splash_as = new Array();
// Tableau comprenant les titles des liens
var splash_titles = new Array();
//Variable contenant le timeout
var slide_timeout;
//Variable contenant le timeout de la disparition de la notification de play/pause
var slide_timeout_notification;
//Durée timeout pour le slide
var slide_timeout_value = 4000;
//Groupe courant
var current_group;
//Position actuelle de l'image dans le groupe
var current_position;
//Flag is true si slide
var is_sliding = false;


//NEW-START
// This Variable contains the Porporition the Image has to be resized for maximum view
var imageproportion;
//NEW-END

// -----------------------------------------------------------------------------------
// Affiche l'image concernée en plein écran
function splash_image(a) {
//On récupère l'indice
obj_body = document.getElementsByTagName('body').item(0);
//Ini la variable current_group le groupe de cette image si celle ci est groupée
rel_attr = new String(a.getAttribute('rel'));
val = rel_attr.replace('splash.image|', '');
splash_id = (a.getAttribute('class')) ? new String(a.getAttribute('class').match(new RegExp(/splash[0-9] $/))) : '';
if (val != 'splash.image' && splash_groups[val].length > 0) {
current_group = val;
current_position = in_array(splash_groups[val], splash_id);
}
else {
current_group = current_position = '';
}
if (!document.getElementById('splash_screen')) {
//Création du fond
obj_splash_screen = document.createElement('a');
obj_splash_screen.setAttribute('id', 'splash_screen');
obj_splash_screen.setAttribute('title', 'Close the splash');
array_page_size = getPageSize();
obj_splash_screen.style.width = '100%';
obj_splash_screen.style.height = array_page_size[1] 'px';
obj_splash_screen.onclick = function() { splash_bye(); return false; }
obj_body.appendChild(obj_splash_screen);

//Création du container image et du loading
obj_content = document.createElement('div');
obj_content.setAttribute('id', 'image_content');
obj_content.style.width = '200px';
obj_content.style.height = '200px';
obj_content.className = 'ajax-loading';
obj_body.appendChild(obj_content);

//Positionnement
array_page_scroll = getPageScroll();
array_page_size = getPageSize();
obj_content.style.top = array_page_scroll[1] margin_top 'px';
obj_content.style.left = array_page_size[0]/2-(parseInt(obj_content.style.width)/2) 'px';
}
else {
obj_splash_screen = document.getElementById('splash_screen');
obj_content = document.getElementById('image_content');
obj_content.removeChild(document.getElementById('splash_img'));
obj_content.className = 'ajax-loading';
}

//Supprime le title_content
if (document.getElementById('title_content')) {
obj_title = document.getElementById('title_content');
//Supprime la navigation si elle existe
if (document.getElementById('splash_previous')) {
obj_title.removeChild(document.getElementById('splash_previous'));
obj_title.removeChild(document.getElementById('splash_next'));
if (document.getElementById('splash_notification')) { obj_content.removeChild(document.getElementById('splash_notification')); }
what = (is_sliding) ? 'splash_pause' : 'splash_play';
obj_title.removeChild(document.getElementById(what));
}
obj_body.removeChild(obj_title);
}

//Charge l'image
ini_image(a);
}

// -----------------------------------------------------------------------------------
// Charge l'image
function ini_image(a) {
//Objet image pour récupérer la taille de l'image
img = new Image();
img.src = a.href;

//Si l'image n'est pas encore chargée
if (!img.complete) {
img.onload = function() {
image_display(a);
}
}
//Si l'image a déjà été chargée une fois
else {
image_display(a);
}
}

// -----------------------------------------------------------------------------------
// Affiche l'image
function image_display(a) {
obj_body = document.getElementsByTagName('body').item(0);
obj_content = document.getElementById('image_content');
obj_splash_screen = document.getElementById('splash_screen');

//Création image
obj_image = document.createElement('img');
obj_image.setAttribute('id', 'splash_img');
obj_image.onclick = function() { splash_bye(); return false; }
obj_content.appendChild(obj_image);


//NEW-START
// Load Image
obj_image.setAttribute('src', a.href);

//Calculate Maximum Image-Size (the 69 in the End has to be calculatet somehow...)
imageproportion = obj_image.height / (arrayPageSize[3] - (margin_top margin_bottom 69));
if (imageproportion < (obj_image.width / (arrayPageSize[2] - margin_left - margin_right))){
imageproportion = obj_image.width / (arrayPageSize[2] - margin_left - margin_right);
};
//NEW-END

//Resize du container de l'image
//INSERTED imageproportion
obj_content.style.width = img.width/imageproportion 'px';
//INSERTED imageproportion
obj_content.style.height = img.height/imageproportion 'px';

//Replacement du container de l'image
array_page_scroll = getPageScroll();
array_page_size = getPageSize();
obj_content.style.top = array_page_scroll[1] margin_top 'px';
//INSERTED imageproportion
obj_content.style.left = array_page_size[0]/2-(parseInt(img.width/imageproportion)/2) 'px';

//On affiche l'image
obj_content = document.getElementById('image_content');
obj_content.className = '';
//TIS LINE MOVED UP
obj_image.style.display = 'block';
//NEW-START
obj_image.height = obj_image.height/imageproportion;
//NEW-END

//Création container title
obj_close = document.createElement('a');
obj_close.setAttribute('id', 'splash_close');
obj_close.onclick = function() { splash_bye(); return false; }
obj_content.appendChild(obj_close);

//Création container title
obj_title = document.createElement('div');
obj_title.setAttribute('id', 'title_content');
obj_body.appendChild(obj_title);
obj_title.style.width = (isie()) ? obj_content.offsetWidth 'px' : img.width/imageproportion 'px';
obj_title.style.top = array_page_scroll[1] margin_top (parseInt(obj_content.style.height)) 20 'px';
obj_title.style.left = array_page_size[0]/2-(parseInt(obj_content.style.width)/2) 'px';

//Libellé position
str_position = (current_group != '') ? 'Bild ' (current_position 1) ' von ' splash_groups[current_group].length ' :' : '';
obj_text = document.createTextNode(str_position);
obj_title.appendChild(obj_text);

//Description
obj_description = document.createElement('div');
obj_description.setAttribute('id', 'splash_description');
obj_title.appendChild(obj_description);
splash_id = (a.getAttribute('class')) ? new String(a.getAttribute('class').match(new RegExp(/splash[0-9] $/))) : '';
obj_text = document.createTextNode(splash_titles[splash_id]);
obj_description.appendChild(obj_text);

//Resize le fond si l'image est trop grande
array_page_size = getPageSize();
total_width = margin_left parseInt(obj_content.style.width) margin_right;
if (total_width > array_page_size[0]) { obj_splash_screen.style.width = total_width 'px'; obj_content.style.left = margin_left 'px'; obj_title.style.left = margin_left 'px'; };
//INSERTED imageproportion
total_height = margin_top parseInt(obj_content.style.top) parseInt(obj_image.height/imageproportion) parseInt(obj_title.offsetHeight) margin_bottom;
if (total_height > array_page_size[1]) { obj_splash_screen.style.height = total_height 'px'; };

//Initialise la navigation si l'image fait partie d'un groupe
ini_nav(a);
}

// -----------------------------------------------------------------------------------
// Affiche la navigation si l'image fait partie d'un groupe
function ini_nav(a) {
clearTimeout(slide_timeout);
obj_title = document.getElementById('title_content');

//Check si l'image fait partie d'un groupe
rel_attr = new String(a.getAttribute('rel'));
val = rel_attr.replace('splash.image|', '');

if (splash_groups[val] && document.getElementById('splash_img')) {
//Création de l'objet splash_previous
obj_previous = document.createElement('a');
obj_previous.setAttribute('id', 'splash_previous');
obj_previous.setAttribute('title', 'Jump to the previous image');
obj_previous.onmouseover = function() { obj_previous.className = 'over'; }
obj_previous.onmouseout = function() { obj_previous.className = ''; }
obj_previous.onclick = function() { splash_previous(); }
obj_title.appendChild(obj_previous);

//Création de l'objet splash_next
obj_next = document.createElement('a');
obj_next.setAttribute('id', 'splash_next');
obj_next.setAttribute('title', 'Jump to the next image');
obj_next.onmouseover = function() { obj_next.className = 'over'; }
obj_next.onmouseout = function() { obj_next.className = ''; }
obj_next.onclick = function() { splash_next(); }
obj_title.appendChild(obj_next);

//Création de l'objet slide_play
var obj_play = document.createElement('a');
if (!is_sliding) {
obj_play.setAttribute('id', 'splash_play');
obj_play.setAttribute('title', 'Start the slide');
}
else {
obj_play.setAttribute('id', 'splash_pause');
obj_play.setAttribute('title', 'Pause the slide');
}
obj_play.onclick = function() { splash_pause(); }
obj_play.onmouseover = function() { obj_play.className = 'over'; }
obj_play.onmouseout = function() { obj_play.className = ''; }
obj_title.appendChild(obj_play);

//
if (is_sliding) { slide_timeout = window.setTimeout(splash_next, slide_timeout_value); }
}
}

// -----------------------------------------------------------------------------------
// To previous image
function splash_previous() {
current_position = (current_position-1 < 0) ? splash_groups[current_group].length-1 : current_position-1;
splash_image(splash_as[splash_groups[current_group][current_position]]);
}

// -----------------------------------------------------------------------------------
// To next image
function splash_next() {
current_position = (current_position 1 == splash_groups[current_group].length) ? 0 : current_position 1;
splash_image(splash_as[splash_groups[current_group][current_position]]);
}

// -----------------------------------------------------------------------------------
// Pause the slide (ou pas)
function splash_pause() {
if (!is_sliding) {
is_sliding = true;
document.getElementById('splash_play').setAttribute('id', 'splash_pause');
document.getElementById('splash_pause').setAttribute('title', 'Pause the slide');
current_position = (current_position == splash_groups[current_group].length) ? 0 : current_position;
slide_timeout = window.setTimeout(splash_next, slide_timeout_value/4);
}
else {
is_sliding = false;
document.getElementById('splash_pause').setAttribute('id', 'splash_play');
document.getElementById('splash_play').setAttribute('title', 'Start the slide');
clearTimeout(slide_timeout);
}
}

// -----------------------------------------------------------------------------------
// Notification d'action
function notification() {
clearTimeout(slide_timeout_notification);
obj_content = document.getElementById('image_content');
if (!document.getElementById('splash_notification')) {
//Création du petit icone playing/paused
obj_slide = document.createElement('a');
obj_slide.setAttribute('id', 'splash_notification');
obj_slide.setAttribute('title', 'Sliding (ou pas)');
obj_content.appendChild(obj_slide);
obj_slide.style.top = (parseInt(obj_content.style.height)/2)-25 'px'; //25 car largeur de l'image play/pause divisée par 2
obj_slide.style.left = (parseInt(obj_content.style.width)/2)-25 'px'; //25 car hauteur de l'image play/pause divisée par 2
obj_slide.style.width = '50px'; // 50 largeur de l'image play/pause
obj_slide.style.height = '50px'; // 50 hauteur de l'image play/pause
}
else {
obj_slide = document.getElementById('splash_notification');
}
if (is_sliding) {
obj_slide.className = 'playing';
}
else {
obj_slide.className = 'paused';
slide_timeout_notification = setTimeout(splash_notification_bye, 2000);
}
}

// -----------------------------------------------------------------------------------
// Slide notification
function splash_notification_bye() {
if (document.getElementById('image_content')) {
obj_content = document.getElementById('image_content');
obj_content.removeChild(document.getElementById('splash_notification'));
}
clearTimeout(slide_timeout_notification);
}

// -----------------------------------------------------------------------------------
// Au revoir Splash
function splash_bye() {
clearTimeout(slide_timeout);
clearTimeout(slide_timeout_notification);
is_sliding = false;
obj_body = document.getElementsByTagName('body').item(0);
obj_body.removeChild(document.getElementById('splash_screen'));
obj_body.removeChild(document.getElementById('image_content'));
if (document.getElementById('title_content')) { obj_body.removeChild(document.getElementById('title_content')); }

}

// -----------------------------------------------------------------------------------
// Check la touche clavier enfoncé
function key_check(e) {
if (document.getElementById('splash_img')) {
clearTimeout(slide_timeout);
what = (e == null) ? event.keyCode : e.which;
if (in_array(new Array(27, 38, 46, 88), what) >= 0) { //Esc, Suppr, flèche haut, x
splash_bye();
return false;
}
if (splash_groups[current_group]) {
if (in_array(new Array(13, 32, 40), what) >= 0) { //Entrée, espace, flèche bas
splash_pause();
notification();
return false;
}
if (in_array(new Array(33, 37, 109), what) >= 0) { // Page Up , flèche gauche, -
splash_previous();
return false;
}
if (in_array(new Array(34, 39, 107), what) >= 0) { // Page Down, flèche droite,
splash_next();
return false;
}
}
}
}

// -----------------------------------------------------------------------------------
// Initialise les liens concernés
function ini_splash_images() {
splash_groups = new Array();
splash_as = new Array();
splash_titles = new Array();
as = document.getElementsByTagName('a');
for (i=0; i document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}

// -----------------------------------------------------------------------------------
// Core code from - quirksmode.org
function addEvent(obj, evType, fn, useCapture){
if (obj.addEventListener) {
obj.addEventListener(evType, fn, useCapture);
return true;
}
else if (obj.attachEvent){
var r = obj.attachEvent("on" evType, fn);
return r;
}
else {
alert("Handler could not be attached");
}
}

// -----------------------------------------------------------------------------------
// Check si val est présent dans le tableau ar
// Last update 2007-04-03
// Code by Xuan NGUYEN
function in_array (ar, val) {
if (ar.length == 0) { return -1; }
for (i=0; i

Hey, it seems to be a nice work PJD, i'll take a look. Thanks for the contribution.

Xuxu, you should translate the comments into english.

Nice work PJD .

For sure i'll take time to translate the comments.

But I have to say, what I use the one from http://www.huddletogether.com/2007/04/16 ... after I found out, it does not work in Internet Explorer 6 and 7 - their code is much more complicated, there is still a little Failure in my Code for the grey Background in Internet Explorer. But resizing works there too now. Will post my Code there later.

Salut,
Just une petite remarque par rapport à splash,
Es-que quelqu'un aurait remarqué qu'il ne fonctionne
Pas avec IE v6.0 ?? Ou es-que c'est fait exprès !?
Ce serait bien qu%u2019il fonctionne sur tous les navigateurs !

IE6 ... oui je sais mais bon...
voici le msg d'erreur que j'ai au chargement de la page :
Handler could not be attached

Bonjour, je viens tout juste de tester ce script intéressant. Il semble bien fonctionner cependant serait-il possible de modifier le timer pour le loading? L'image en fait s'ouvre de suite et trop rapidement. Merci.

Actuellement il n'existe pas de moyen pour modifier le timer.
Cela peut être envisageable dans une future version .

Oué !
Manque plus qu'une arrivée et une sortie de l'image en fadding et c'est parfait.
Barvo%u2026

Bonjour à tous,

Bravo à Xuan pour tout son travail !

J'ai fait un nouveau fork de splash image v1.9 (j'en avais déjà fait un de la version 1.7)... pour qu'il marche avec des navigateurs anciens, et surtout au moins IE6 !!! J'explique sur la page dédiée pourquoi le script original ne fonctionne pas avec IE < 7.

Il est facilement internationalisable comme mon premier fork, et un petit plus : un lien direct vers l'image originale.

Plus d'info :
http://www.stormier.net/splashfork.php

Yep, il faudrait que j'appronfondisse ce problème avec IE 6 (problème de padding > 0 sur le body ...).

En tous cas bon boulot à toi.

Ne serait-il pas possible de pouvoir placer un lien d'url dans les images, comme sur le site de http://www.elleretouche.com/portfolio-retouche.php

Je pense que cela peut être un bon addon en effet.
A voir dans une prochaine mise à jour

Merci Xuxu.
C'est avec impatience que j'attends cette mise à jour.

Cordialement

Niki

Bonjour, et merci beaucoup pour ce splash, je le manie mieux que le lightbox que je n'arriver pas à faire fonctionner

Cependant j'aimerai si c'est possible afficher qu'une seule image en vignette et que les autres images s'affichent kan le splash est ouvert.

Pouvez vous me dire comment faire, je sais ke ça se fait mais je n'y arrive pas..

Merci beaucoup de m'aider !!!!

franchement ce script est génial j'ai pue le tester sur un site de galerie photo que j'ai construit. excellent travail Xuxu.
par contre je me heurte a un problème le script ne fonctionne plus quand il s'agit d'une page chargé par ajax.
Tu as une idée d'ou ca peu venir?

Après avoir rechargé en Ajax il faut ré-executer la fonction qui "ini_splash_images()" pour redéfinir les évènements onclick sur les images; ça devrait passer.

oki merci Xuxu je vias voir ca ;)

apres quelques clic et un petit copier coller ca passe ;) il est excellent ton script. Merci pour ton travail, au passage je vais poser un back link sur ma page ^^.
à plus tard.

ravi que ça marche.

@++