diaporama dans pluxml

govez · avril 2011

J'ai bidouillé un diaporama à insérer dans un article. Bon ... sûrement des choses à améliorer, mais ça fonctionne.

http://pingouindesalpes.com/index.php?article159/un-diaporama-dans-pluxml

J'attends vos améliorations.

bg62 · avril 2011

govez a écrit:

J'ai bidouillé un diaporama à insérer dans un article. Bon ... sûrement des choses à améliorer, mais ça fonctionne.
http://pingouindesalpes.com/index.php?article159/un-diaporama-dans-pluxml
J'attends vos améliorations.

très bel effet

et explication simple et claire ... merci

joebart · avril 2011

Site inaccessible, dommage...

bankai · avril 2011

Super, au passage ton site/blog est sympa et ton thème gris très beau.

bg62 · avril 2011

joebart a écrit:

Site inaccessible, dommage...

???
je l'ai ouvert hier, je l'ouvre de nouveau ....

joebart · avril 2011

Vu et vraiment très sympa

ArtDesign · avril 2011

Hi,

Magnifique tes 3 thèmes, Bravo.

Cdt

bg62 · avril 2011

salut,
une petite solution pour l'intégrer directement à un thème et ainsi tout gérer à partir de l'interface d'administration:
http://unesourisetmoi.free.fr/pluxml2/index.php?article11/diaporama-avec-jquery-dans-un-article
c'est à peu près la même chose, mais ensuite tu peux "gérer" comme tu veux

@+

zenpix · avril 2011

>>bg62
tres joli le diaporama ,ainsi que le tutorial pour l'installer.
s'il etait possible d'avoir un peu le control sur l'image (play/pause/avance /recul) ce serait parfait.
mais c'est dejas pas mal dans l'etat.

bg62 · avril 2011

zenpix a écrit:

>>bg62
tres joli le diaporama ,ainsi que le tutorial pour l'installer.
s'il etait possible d'avoir un peu le control sur l'image (play/pause/avance /recul) ce serait parfait.
mais c'est dejas pas mal dans l'etat.

merci

pour moi le principal était de pouvoir le rendre "incorporé" au 'theme' et gérable, modifiable et 'multipliable' directement depuis l'admin

il serait possible, oui, d'intégrer ces fonctions (doc JavaScript...) ... si j'ai le temps, je regarde ...
@+

zenpix · avril 2011

merci bg62 de regarder si c'est possible.

pardonne moi mon inexperience mais tu dis dans ton tuto :
2 Créez également un fichier, appelé ici "galery01.js"

s'agit il d'un fichier texte (.txt) dans lequel on insere le code , puis on enregistre les changements et ensuite on renomme le fichier et son extention en ".js" ? c'est la bonne prodedure ?

autre question stp
tu dis aussi (dans le dernier code):
Comme vous le voyez, vous pouvez même rendre "cliquable" les images ...
ou inserer le lien url dans ce cas ? je ne suis pas tres doué je sais.....mais j'apprend.

et si on ne souhaite ne pas rendre les images cliquable de facon a ne pas "voir la main" du curseur au survol de la souris sur l'image , comment fait on ??

merci de ton aide.
cordialement

bg62 · avril 2011

zenpix a écrit:

merci bg62 de regarder si c'est possible.

pardonne moi mon inexperience mais tu dis dans ton tuto :
2 Créez également un fichier, appelé ici "galery01.js"

s'agit il d'un fichier texte (.txt) dans lequel on insere le code , puis on enregistre les changements et ensuite on renomme le fichier et son extention en ".js" ? c'est la bonne prodedure ?

autre question stp
tu dis aussi (dans le dernier code):
Comme vous le voyez, vous pouvez même rendre "cliquable" les images ...
ou inserer le lien url dans ce cas ? je ne suis pas tres doué je sais.....mais j'apprend.

et si on ne souhaite ne pas rendre les images cliquable de facon a ne pas "voir la main" du curseur au survol de la souris sur l'image , comment fait on ??

merci de ton aide.
cordialement

1 - pour le fichier *.js : oui tu peux faire ainsi
2 - les images ne sont pas cliquables par défaut, si l'on veut insérer une url, il faut toucher au code
3 - il y a ceci dans le code:
<a href="#" class="show">
c'est ce qui fait apparaître "la main" comme tu le dis, comme sur les lien de la sidebar aussi

bg62 · avril 2011

re ... on peut également modifier pour obtenir un autre effet, avec une visionneuse fonctionnant "au clic":
http://www.unesourisetmoi.info/jquery/index.php
@+

zenpix · avril 2011

Super bg62 c'est ce que je recherche

je vais essayer cette solution mais avant de faire des bétises , ou dois je placer ces 3 fichiers ?
a la racine de mon theme ?
ou bien comme dans ton diaporama precedent , je creer un dossier "js" dans mon theme en mettant dedans "jquery.slidertron-0.1.js" et "jquery-1.4.2.min.js" et "slide.css" restant a la racine de mon theme ?
merci

bg62 · avril 2011

zenpix a écrit:

Super bg62 c'est ce que je recherche
je vais essayer cette solution mais avant de faire des bétises , ou dois je placer ces 3 fichiers ?
a la racine de mon theme ?
ou bien comme dans ton diaporama precedent , je creer un dossier "js" dans mon theme en mettant dedans "jquery.slidertron-0.1.js" et "jquery-1.4.2.min.js" et "slide.css" restant a la racine de mon theme ?
merci

oui je pense qu'il suffit de placer tout dans ton thème,
un peu comme ici :
http://unesourisetmoi.free.fr/pluxml2/
de manière ensuite à pouvoir tout gérer depuis ton admin
attention si tu change de thème ou de version, garde une trace des modifs que tu as faites pour les remettre

zenpix · avril 2011

bon , je reviends a la charge , je n'arrive pas a le faire marcher.:(
j'ai placer les 3 fichiers dans mon theme , j'ai mis dans mon dossier 'images" 6 images en .jpg 726x486.
renommée ces images : image1.jpg/image3.jpg etc....

j'ai creer ensuite une page statique et inserer ce code:

<div id="slideshow">
<div id="foobar">
<div id="col1"><a href="#" class="previous"> </a></div>
<div id="col2">
<div class="viewer">
<div class="reel">
<div class="slide"><img src="images/image1.jpg" width="726" height="486" alt="nom" /> <span>texte a inserer</span> </div>
<div class="slide"><img src="images/image2.jpg" width="726" height="486" alt="nom" /> <span>texte a inserer</span> </div>
<div class="slide"><img src="images/image3.jpg" width="726" height="486" alt="nom" /> <span>texte a inserer</span> </div>
<div class="slide"><img src="images/image4.jpg" width="726" height="486" alt="nom" /> <span>texte a inserer</span> </div>
<div class="slide"><img src="images/image5.jpg" width="726" height="486" alt="nom" /> <span>texte a inserer</span> </div>
<div class="slide"><img src="images/image6.jpg" width="726" height="486" alt="nom" /> <span>texte a inserer</span> </div>
</div>
</div>
</div>
<div id="col3"><a href="#" class="next"> </a></div>
</div>
<script type="text/javascript">

$('#foobar').slidertron({
viewerSelector: '.viewer',
reelSelector: '.viewer .reel',
slidesSelector: '.viewer .reel .slide',
navPreviousSelector: '.previous',
navNextSelector: '.next',
navFirstSelector: '.first',
navLastSelector: '.last'
});

</script>

</div>

................................................................................
tu dis ensuite de placer le code ci dessous dans la partie 'head' de la page
et la, je ne comprend pas ou le mettre....
dans le fichier header.php du theme ??

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.slidertron-0.1.js"></script>
<style type="text/css">
@import "slidertron.css";
</style>

a+

bg62 · avril 2011

pour mettre les liens d'appel js et css dans le header.php,
je pense qu'il faut t'inspirer du code donné ici :
http://unesourisetmoi.free.fr/pluxml2/index.php?article11/diaporama-avec-jquery-dans-un-article

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<!-- pour l'effet slideshow-->
    <script src="<?php $plxShow->template(); ?>/js/jquery-1.5.2.js" type="text/javascript"></script>
    <script src="<?php $plxShow->template(); ?>/js/galery01.js" type="text/javascript"></script>
<!--FIN-->

regarde bien les explications données pour le reste et l'on doit pouvoir adapter facilement à un thème en suivant les mêmes démarches

là je suis sur de nouveaux thèmes, mais dès que je peux je fais le test si jamais tu n'y arrivais pas
en tous cas, tiens-nous au courant
@+

Andrea · avril 2011

bg62 a écrit:
pour mettre les liens d'appel js et css dans le header.php,
je pense qu'il faut t'inspirer du code donné ici :
http://unesourisetmoi.free.fr/pluxml2/index.php?article11/diaporama-avec-jquery-dans-un-article
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

    <script src="<?php $plxShow->template(); ?>/js/jquery-1.5.2.js" type="text/javascript"></script>
    <script src="<?php $plxShow->template(); ?>/js/galery01.js" type="text/javascript"></script>

regarde bien les explications données pour le reste et l'on doit pouvoir adapter facilement à un thème en suivant les mêmes démarches
là je suis sur de nouveaux thèmes, mais dès que je peux je fais le test si jamais tu n'y arrivais pas
en tous cas, tiens-nous au courant
@+

Je n'y connais pas grand chose en JavaScript ;-) mais inclure 2 fois jQuery ça me semble "étrange"...

zenpix · avril 2011

dans les codes precedente , vous n'appellez pas les mèmes fichiers......
j'ai telecharger : "jquery.slidertron-0.1.js" et "jquery-1.4.2.min.js" comme preciser dans le tuto
ici

bg62 · avril 2011

zenpix a écrit:

dans les codes precedente , vous n'appellez pas les mèmes fichiers......
j'ai telecharger : "jquery.slidertron-0.1.js" et "jquery-1.4.2.min.js" comme preciser dans le tuto
ici

+ 100

faut suivre ET adapter le tuto, tester et triturer ... ensuite on finit par y arriver

zenpix · avril 2011

j'ai essayer ton dernier code bg62
que j'ai modifié en y inserant le nom des fichiers jquery que j'ai telecharger:
c'est a dire les fichiers: jquery.slidertron-0.1.js / jquery-1.4.2.min.js
voici le code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery-1.4.2.min.js" type="text/javascript"></script>
<!-- pour l'effet slideshow-->
    <script src="<?php $plxShow->template(); ?>/js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="<?php $plxShow->template(); ?>/js/jquery.slidertron-0.1.js" type="text/javascript"></script>
<!--FIN-->

et le code dans ma page statique:

<div id="slideshow">
<div id="foobar">
<div id="col1"><a href="#" class="previous"> </a></div>
<div id="col2">
<div class="viewer">
<div class="reel">
<div class="slide"><img src="images/nom de l'image.jpg" width="726" height="486" alt="nom" /> <span>texte a inserer</span> </div>
<div class="slide"><img src="images/nom de l'image.jpg" width="726" height="486" alt="nom" /> <span>texte a inserer</span> </div>
<div class="slide"><img src="images/nom de l'image.jpg" width="726" height="486" alt="nom" /> <span>texte a inserer</span> </div>
<div class="slide"><img src="images/nom de l'image.jpg" width="726" height="486" alt="nom" /> <span>texte a inserer</span> </div>
<div class="slide"><img src="images/nom de l'image.jpg" width="726" height="486" alt="nom" /> <span>texte a inserer</span> </div>
<div class="slide"><img src="images/nom de l'image.jpg" width="726" height="486" alt="nom" /> <span>texte a inserer</span> </div>
</div>
</div>
</div>
<div id="col3"><a href="#" class="next"> </a></div>
</div>
<script type="text/javascript">

$('#foobar').slidertron({
viewerSelector: '.viewer',
reelSelector: '.viewer .reel',
slidesSelector: '.viewer .reel .slide',
navPreviousSelector: '.previous',
navNextSelector: '.next',
navFirstSelector: '.first',
navLastSelector: '.last'
});

</script>
<!-- end -->
</div>

et voila le résultat dans ma page statique , uniquement du texte.....:

nom texte a inserer
nom texte a inserer
nom texte a inserer
nom texte a inserer
nom texte a inserer
nom texte a inserer

j'avoue que c'est pas facile a mettre en place

diaporama dans pluxml

Réponses