Slideshow & co

Le
Damien
Bonjour,
Je me permets ce petit message afin d'avoir un peu d'aide sur le
script suivant : http://www.phatfusion.net/multibox/

Dans un premier temps j'aimerais pouvoir ajouter à ce dernier une
fonction de "diaporama" automatique (un bouton "lecture" qui fait
défiler les images toutes les x secondes). Malheureusement mon niveau
de connaissance en javascript étant très très sommaire je ne vois
vraiment pas comment réaliser ce genre de chose, si quelqu'un pouvait
m'éclairer ?

Dans un second temps,
les images qui constituent mon diaporama sont déclarées de la manière
suivante (la toute première image(IMG_8966.jpg) servant de lien pour
afficher les autres qui, elles sont cachées (d'où le "display:none") :


[code]

<a href="files/IMG_8966.jpg" id="mb1" class="mb" title="Image Title =
1
(jpg)"><img src="files/tIMG_8966.jpg" alt="" border="0" /></a>
<div class="multiBoxDesc mb1">This is my descrition text 1. It can
support html.</div>

<div style=" display:none">

<a href="files/IMG_6608.jpg" id="mb2" class="mb" title="Image Titl=
e
2 (jpg)"></a>
<div class="multiBoxDesc mb2">This is my descrition text 2. It can
support html.</div>

<a href="files/IMG_7210.jpg" id="mb3" class="mb" title="Image Titl=
e
3 (jpg)"></a>
<div class="multiBoxDesc mb3">This is my descrition text 3. It can
support html.</div><br />

</div>

[/code]

Vous comprendrez que ce genre de chose est valable pour une petite
quantitée d'image mais dans mon cas j'ai environ 70 images à entrer,
ce qui risque d'être plutôt long et fastidieux
C'est pourquoi je me demandais s'il n'y avait pas moyen d'écrire la
même chose mais sous forme de tableau, du genre :

[code]
new Array('files/IMG_8966.jpg', 'id', 'class', 'title', 'multiboxdesc
mb2'),
new Array('files/IMG_7210.jpg', 'id', 'class', 'title', 'multiboxdesc
mb3'),

//etc
[/code]

Mais bon là encore, mon niveau de connaissance ne me permet pas de
faire ce genre de chose (d'autant que je ne sais même pas si c'est
réalisable).

D'avance merci pour votre aide,

--
Damien
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #1088026
Bonjour,
Je me permets ce petit message afin d'avoir un peu d'aide sur le
script suivant : http://www.phatfusion.net/multibox/

Dans un premier temps j'aimerais pouvoir ajouter à ce dernier une
fonction de "diaporama" automatique (un bouton "lecture" qui fait
défiler les images toutes les x secondes). Malheureusement mon niveau
de connaissance en javascript étant très très sommaire je ne vois
vraiment pas comment réaliser ce genre de chose, si quelqu'un pouvait
m'éclairer ?...


Là il faut demander à mootools, non ?

pb : chez moi le popup se ferme très mal et laisse trainer un fantome
désagrégé du cadre noir qui continue à tout cacher la page dessous ...

Dans un second temps,
les images qui constituent mon diaporama sont déclarées de la manière
suivante (la toute première image(IMG_8966.jpg) servant de lien pour
afficher les autres qui, elles sont cachées (d'où le "display:none") :



si-dessous on peut remplacer diap.length par l'index
soit de 0 à 69 pour 70 images
mais ... bon ... serait-ce mieux ?


var diap = []
diap[diap.length] = [
'IMG_6608.jpg', // href du lien
'titre image', // title du lien
'description image' // contenu du div
]
diap[diap.length] = [
'IMG_66784.mov',
'titre mov',
'description mov'
]

function createGallery() {
var idx = 2;
var cible = document.getElementById('liste_cache');
for(var i=0; i<diap.length; i++) {
var a = document.createElement('A');
a.herf = diap[i][0];
a.id = 'mb'+idx;
a.class = 'mb'
a.title = diap[i][1];
cible.appendChild(a);
var d = document.createElement('DIV');
d.class = 'multiBoxDesc mb'+idx;
a.innerHTML = diap[i][2];
cible.appendChild(d);
idx++;
}
}
window.onload = createGallery;

[code]

<a href="files/IMG_8966.jpg" id="mb1" class="mb" title="Image Title 1
(jpg)"> <div class="multiBoxDesc mb1">This is my descrition text 1. It can
support html.</div>


<div style=" id="liste_cache" display:none">

</div>

[/code]

Vous comprendrez que ce genre de chose est valable pour une petite
quantitée d'image mais dans mon cas j'ai environ 70 images à entrer,


ce serait mieux d'avoir une routine du côté serveur ... mais bon ...
dans la mesure où ici sur cette page sans JS rien ne fonctionne ou
presque ...

--
sm

Damien
Le #1135744
On 23 fév, 19:17, SAM wrote:

Bonjour,
Je me permets ce petit message afin d'avoir un peu d'aide sur le
script suivant :http://www.phatfusion.net/multibox/

Dans un premier temps j'aimerais pouvoir ajouter à ce dernier une
fonction de "diaporama" automatique (un bouton "lecture" qui fait
défiler les images toutes les x secondes). Malheureusement mon niveau
de connaissance en javascript étant très très sommaire je ne vois
vraiment pas comment réaliser ce genre de chose, si quelqu'un pouvait
m'éclairer ?...


Là il faut demander à mootools, non ?

pb : chez moi le popup se ferme très mal et laisse trainer un fantome
désagrégé du cadre noir qui continue à tout cacher la page dessous ...

Dans un second temps,
les images qui constituent mon diaporama sont déclarées de la mani ère
suivante  (la toute première image(IMG_8966.jpg) servant de lien pou r
afficher les autres qui, elles sont cachées (d'où le "display:none") :


si-dessous on peut remplacer diap.length par l'index
soit de 0 à 69 pour 70 images
mais ... bon ... serait-ce mieux ?

var diap = []
diap[diap.length] = [
        'IMG_6608.jpg',       // href du lien
        'titre image',        // title du lien
        'description image'   // contenu du div
         ]
diap[diap.length] = [
        'IMG_66784.mov',
        'titre mov',
        'description mov'
         ]

function createGallery() {
var idx = 2;
var cible = document.getElementById('liste_cache');
for(var i=0; i<diap.length; i++) {
   var a = document.createElement('A');
   a.herf = diap[i][0];
   a.id = 'mb'+idx;
   a.class = 'mb'
   a.title = diap[i][1];
   cible.appendChild(a);
   var d = document.createElement('DIV');
   d.class = 'multiBoxDesc mb'+idx;
   a.innerHTML = diap[i][2];
   cible.appendChild(d);
   idx++;
   }}

window.onload = createGallery;

[code]

<a href="files/IMG_8966.jpg" id="mb1" class="mb" title="Image Ti tle 1
(jpg)"> <div class="multiBoxDesc mb1">This is my descrition text 1. It can
support html.</div>


<div style=" id="liste_cache" display:none">

  </div>

[/code]

Vous comprendrez que ce genre de chose est valable pour une petite
quantitée d'image mais dans mon cas j'ai environ 70 images à entrer,


ce serait mieux d'avoir une routine du côté serveur ... mais bon ...
dans la mesure où ici sur cette page sans JS rien ne fonctionne ou
presque ...

--
sm


Merci beaucoup pour cette réponse,
mais bon, suite à vos diverses remarques, je vais peut-être
m'orrienter vers une autre gallerie d'image,
puisque celle-ci ne semble pas fonctionner aussi bien que ça.

Encore Merci,

-------
Damien


Publicité
Poster une réponse
Anonyme