Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

compatibilité swf et android ?

9 réponses
Avatar
alainL
Bonjour,
J'ai utilisé un petit programme swf (dewslider) pour installer un
diaporama de qqs photos sur mon site. Ça marche sur les PC "normaux"
mais ça ne passe pas sur les tablettes sous androïd.
Est-ce normal ? Peut-on arranger la chose ?
Il est là : http://basaburua.fr/rivieres_no_kill.php , en bas de page
(avec aussi, sur Ffx, un problème de marge que je n'ai pas réussi à
régler :-( )
Merci pour vos conseils

--
AlainL

http://autourdalos.fr

9 réponses

Avatar
Mac Larinett
Le 24/01/2014 09:57, alainL a écrit :
Peut-on arranger la chose ?


ça peut aussi se faire avec 3 lignes de javascript, tu trouveras
facilement des diaporamas tout prêts, et ça tournera sur TOUTES les
plateformes.
Avatar
SAM
Le 24/01/14 13:57, Mac Larinett a écrit :
Le 24/01/2014 09:57, alainL a écrit :
Peut-on arranger la chose ?


ça peut aussi se faire avec 3 lignes de javascript,



d'autant que mon Fx ne "lit" pas non plus les beurks Flash !

tu trouveras facilement des diaporamas tout prêts,
et ça tournera sur TOUTES les plateformes.



J'aime assez (et qui est léger et indépendant de biblis additionnelles)
lytebox : <http://lytebox.com/>





Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
alainL
Merci. C'est vrai qu'il est chouette mais "léger" ?...
Je suis noyé dans le CSS et ne parviens pas à inclure le diapo dans ma
page déjà constituée (utilisant déjà deux CSS). Il s'ouvre dans une
nouvelle page . J'ai essayé de m'y retrouver dans les options mais mon
anglais scolaire du bon vieux temps ne m'aide guère :-(

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" language="javascript"
src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="base.css" >
<link rel="stylesheet" type="text/css" href="modele03.css" >
</head>

<body>
<p>essai de diapo en JS</p>
<p>blablabla</p>

<!-- la page s'ouvre, montrant les liens suivants -->

<a href="2.jpg" class="lytebox"
data-lyte-options="slide:true group:vacation" data-title="Mom and
Dad">Mom and Dad</a>
<a href="3.jpg" class="lytebox"
data-lyte-options="slide:true group:vacation" data-title="My
Sister">My Sister</a>
<a href="4.jpg" class="lytebox"
data-lyte-options="slide:true group:vacation" data-title="La
troisième">The third</a>

</body>
</html>

AlainL

http://autourdalos.fr

Le 24/01/2014 15:49, SAM a écrit :
Le 24/01/14 13:57, Mac Larinett a écrit :
Le 24/01/2014 09:57, alainL a écrit :
Peut-on arranger la chose ?


ça peut aussi se faire avec 3 lignes de javascript,



d'autant que mon Fx ne "lit" pas non plus les beurks Flash !

tu trouveras facilement des diaporamas tout prêts,
et ça tournera sur TOUTES les plateformes.



J'aime assez (et qui est léger et indépendant de biblis additionnelles)
lytebox : <http://lytebox.com/>





Cordialement,
Avatar
SAM
Le 26/01/14 15:25, alainL a écrit :
Merci. C'est vrai qu'il est chouette mais "léger" ?...



Bon ... j'utilise peut-être une vieille version moins abondante ?

Si, si, je t'assure ! Comparativement à d'autres qui ont d'abord besoin
de charger une bibli "générale" comme jQuery par exemple

jQuery dont un fichier "minimaliste" peut déjà peser 90ko
et avant de faire quoique ce soit en JS dans la page
(ce n'est qu'une bibli pour pouvoir ensuite faire des trucs soi-disant
compatibles tous navigateurs)

Je suis noyé dans le CSS et ne parviens pas à inclure le diapo dans ma
page déjà constituée (utilisant déjà deux CSS). Il s'ouvre dans une
nouvelle page .



Oui, il est probable que je ne t'ai pas bien aiguillé et que LyteBox ne
soit pas adapté à ce que tu veux faire :-/

Il semblerait qu'il faille que tu demandes à Google "js carousel"
(carousel et non pas carrousel ou carroussel)
et tu trouveras des "plugins" pour la bibli jQuery

Bon courage pour les CSS et le JS !!!

Exemples :
<http://bootstrap.twit.free.fr/tuto/carousel02a.html> (JS8ko/CSS–ko)
<http://www.owlgraphic.com/owlcarousel/demos/custom.html> (JS0ko/CSS=1ko)

http://sorgalla.com/jcarousel/
http://www.owlgraphic.com/owlcarousel/

J'ai essayé de m'y retrouver dans les options mais mon
anglais scolaire du bon vieux temps ne m'aide guère :-(



d'autant qu'il ne doit pas être prévu là que ça s'affiche dans un p'tit
coin de la page

PS:
Je doute que seulement 3 lignes de script personnel puisse suffire ...
À mon idée, il faudra aussi qques lignes de html par image à afficher


Le 24/01/2014 15:49, SAM a écrit :
Le 24/01/14 13:57, Mac Larinett a écrit :
Le 24/01/2014 09:57, alainL a écrit :
Peut-on arranger la chose ?


ça peut aussi se faire avec 3 lignes de javascript,



J'aime assez (et qui est léger et indépendant de biblis additionnelles)
lytebox : <http://lytebox.com/>







Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Mac Larinett
Le 27/01/2014 11:40, SAM a écrit :

Je doute que seulement 3 lignes de script personnel puisse suffire ...
À mon idée, il faudra aussi qques lignes de html par image à afficher




3 lignes :

for (var i = 1; i < TabImage.length; i++) {
var fonc1 = "document.images." + Imagecible + ".src=TabImage[" + i + "];";
setTimeout(fonc1, tempo * i);
}

Imagecible est l'id de l'image à changer, le tableau TabImage contient
les images du diaporama.
Avatar
SAM
Le 27/01/14 14:13, Mac Larinett a écrit :
Le 27/01/2014 11:40, SAM a écrit :

Je doute que seulement 3 lignes de script personnel puisse suffire ...
À mon idée, il faudra aussi qques lignes de html par image à afficher




3 lignes :

for (var i = 1; i < TabImage.length; i++) {
var fonc1 = "document.images." + Imagecible + ".src=TabImage[" + i
+ "];";
setTimeout(fonc1, tempo * i);
}



oui, bon ... disons que ...

mais ... ça glisse pas beaucoup
mais ... on peut pas y toucher

Imagecible est l'id de l'image à changer, le tableau TabImage contient
les images du diaporama.



Ha! il faut en plus les lignes pour déclarer les images !


On peut quand même un peu s'approcher du beurk flash au prix de qques
complications et sans trop de JavaScript (pas de biblis à rallonges)

<http://sandbox.scriptiny.com/tinyslider2/>
<http://www.scriptiny.com/2011/01/javascript-slider/>

et pour voir in situ :
<http://stephane.moriaux.pagesperso-orange.fr/truc/basabu_1>


Par regarder ce que ça pouvait donner sur une tablette (ni un phone)


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
alainL
J'ai passé l'après-midi ( il pleut chez nous :-)) ) à essayer d'adapter
des scripts en JS mais je n'y connais rien et j'ai ramé. J'avais fini
par sortir, à l'aide de SlideShow, un diapo pas trop mal mais qu'il me
restait à incorporer à ma page , au bon endroit. Ce n'était donc pas
gagné...
Mais là, c'est le top ! Un diapo qui marche au poil, placé tout prêt là
où je veux. Que demander de plus !
Je viens d' y ajouter un petit bout de php et de l'envoyer sur le
serveur à l'adresse http://basaburua.fr/no-kill3.php
J'ai testé avec Ffx, IE8, Chrome et sur mon smartphone sous androïd.
Bien partout. Juste un petit souci pour les caractères du texte sous
l'image avec Chrome: le bas des lettres est rogné.
J'ai essayé de supprimer le petit bandeau gris symbolisant les images
mais quand j'ai réussi, je n'avais plus de défilement :-(.
Un grand merci à toi

AlainL

http://autourdalos.fr

Le 27/01/2014 20:27, SAM a écrit :
Le 27/01/14 14:13, Mac Larinett a écrit :
Le 27/01/2014 11:40, SAM a écrit :

Je doute que seulement 3 lignes de script personnel puisse suffire ...
À mon idée, il faudra aussi qques lignes de html par image à afficher




3 lignes :

for (var i = 1; i < TabImage.length; i++) {
var fonc1 = "document.images." + Imagecible + ".src=TabImage[" + i
+ "];";
setTimeout(fonc1, tempo * i);
}



oui, bon ... disons que ...

mais ... ça glisse pas beaucoup
mais ... on peut pas y toucher

Imagecible est l'id de l'image à changer, le tableau TabImage contient
les images du diaporama.



Ha! il faut en plus les lignes pour déclarer les images !


On peut quand même un peu s'approcher du beurk flash au prix de qques
complications et sans trop de JavaScript (pas de biblis à rallonges)

<http://sandbox.scriptiny.com/tinyslider2/>
<http://www.scriptiny.com/2011/01/javascript-slider/>

et pour voir in situ :
<http://stephane.moriaux.pagesperso-orange.fr/truc/basabu_1>


Par regarder ce que ça pouvait donner sur une tablette (ni un phone)


Cordialement,
Avatar
SAM
Le 27/01/14 21:39, alainL a écrit :
Mais là, c'est le top ! Un diapo qui marche au poil, placé tout prêt là
où je veux. Que demander de plus !



Il ne faudra pas essayer de mettre des images de taille différente de
400/267.

Sauf à tout reprendre les css :-((

Je viens d' y ajouter un petit bout de php et de l'envoyer sur le
serveur à l'adresse http://basaburua.fr/no-kill3.php



il te reste à récupérer l'image :
http://sandbox.scriptiny.com/tinyslider2/images/icons.gif
et :
- la rendre transparente
- modifier les css en fonction de là où tu ranges ce gif

Le mieux serait de créer la tienne.
C'est une application des "portes coulissantes"
<http://ateliercss2.free.fr/PagesExercices/2009/ImgCoul.php>
<http://stephane.moriaux.pagesperso-orange.fr/internet/web_css/rollover/bouton_3_etats_css.htm>
ou plus : application des sprites (voir Google)
<http://stephane.moriaux.pagesperso-orange.fr/truc/pg-sprites/>
<http://stephane.moriaux.pagesperso-orange.fr/truc/pg-sprites/3>

J'ai testé avec Ffx, IE8, Chrome et sur mon smartphone sous androïd.
Bien partout. Juste un petit souci pour les caractères du texte sous
l'image avec Chrome: le bas des lettres est rogné.



Ha? Tiens ? oui !

dans la feuille de style, hop! augmenter la hauteur

#container {
position: relative;
background: #fff;
padding: 9px;
height: 290px; /* hauteur images + sous-titre */
}

voir ensuite chez les autres si ça ne fait pas apparaître un bout de la
vue suivante en dessous

J'ai essayé de supprimer le petit bandeau gris symbolisant les images
mais quand j'ai réussi, je n'avais plus de défilement :-(.



Le plus simple est de cacher ce truc, ou mieux, ne pas l'afficher
display: none;

.pagination {position:absolute; top:40px; right:61px; list-style:none;
height:25px; display:none; }

Si tu veux supprimer tout le div "pagination" il faut aussi modifier le
dernier script JS et mettre 'false' pour l'attribut (l'étiquette ?) 'navid'

vertical: 0,
navid: false, // ID of pagination UL
activeclass: 'current',




Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
alainL
Je viens de corriger les deux "bricoles" les plus faciles :-)
Je vais regarder ce que je peux faire avec l'image... Créer la mienne
avec Toshop (.png pour la transparence?), c'est possible. L'intégrer
proprement aussi mais plus délicat.
Voilà de quoi occuper les prochaines journées pluvieuses.
Merci encore.
Cordialement

AlainL

http://autourdalos.fr

Le 28/01/2014 00:34, SAM a écrit :
Le 27/01/14 21:39, alainL a écrit :
Mais là, c'est le top ! Un diapo qui marche au poil, placé tout prêt là
où je veux. Que demander de plus !



Il ne faudra pas essayer de mettre des images de taille différente de
400/267.

Sauf à tout reprendre les css :-((

Je viens d' y ajouter un petit bout de php et de l'envoyer sur le
serveur à l'adresse http://basaburua.fr/no-kill3.php



il te reste à récupérer l'image :
http://sandbox.scriptiny.com/tinyslider2/images/icons.gif
et :
- la rendre transparente
- modifier les css en fonction de là où tu ranges ce gif

Le mieux serait de créer la tienne.
C'est une application des "portes coulissantes"
<http://ateliercss2.free.fr/PagesExercices/2009/ImgCoul.php>
<http://stephane.moriaux.pagesperso-orange.fr/internet/web_css/rollover/bouton_3_etats_css.htm>

ou plus : application des sprites (voir Google)
<http://stephane.moriaux.pagesperso-orange.fr/truc/pg-sprites/>
<http://stephane.moriaux.pagesperso-orange.fr/truc/pg-sprites/3>

J'ai testé avec Ffx, IE8, Chrome et sur mon smartphone sous androïd.
Bien partout. Juste un petit souci pour les caractères du texte sous
l'image avec Chrome: le bas des lettres est rogné.



Ha? Tiens ? oui !

dans la feuille de style, hop! augmenter la hauteur

#container {
position: relative;
background: #fff;
padding: 9px;
height: 290px; /* hauteur images + sous-titre */
}

voir ensuite chez les autres si ça ne fait pas apparaître un bout de la
vue suivante en dessous

J'ai essayé de supprimer le petit bandeau gris symbolisant les images
mais quand j'ai réussi, je n'avais plus de défilement :-(.



Le plus simple est de cacher ce truc, ou mieux, ne pas l'afficher
display: none;

.pagination {position:absolute; top:40px; right:61px; list-style:none;
height:25px; display:none; }

Si tu veux supprimer tout le div "pagination" il faut aussi modifier le
dernier script JS et mettre 'false' pour l'attribut (l'étiquette ?) 'navid'

vertical: 0,
navid: false, // ID of pagination UL
activeclass: 'current',




Cordialement,