[Suggestion] Latest Events Module réaliser un slider d'évènements

[Sa5m]

Bonjour à toutes et à tous,

Je suis nouvelle sur Joomla et suis étudiante en Licence Pro en Informatique.

J’utilise actuellement le composant JEvents pour la gestion d’évènements et le module Latest Events Module. Seulement j’aimerais modifier l’affichage de ce module.

En effet, je voudrais afficher les évènements sous forme de slider, un peu comme sur cette capture :


Je ne sais pas comment m’y prendre pour realiser ce slider avec du javascript.

Quelqu’un aurait-il déjà réalisé ce que je cherche à faire et aurait-il des pistes à me donner ?

Merci d'avance pour vos réponses.

Cordialement,
Sa5m

[y.berges]

Re : Latest Events Module réaliser un slider d'évènements

hello fait une surcharge de ton module en chargeant les scripts

[Sa5m]

Re : Latest Events Module réaliser un slider d'évènements

Merci de ta réponse y.berges

En fait mon soucis ne se trouve pas au niveau de la surcharge du module et de l'appel des fichiers scripts, mais plus au niveau du code de ces fichiers scripts.
Je ne sais pas comment réaliser un slider en javascript pour mes évènements.

[y.berges]

Re : Latest Events Module réaliser un slider d'évènements

a mon avis prend un effet slider bien documenter sur github et intégre le dans la surcharge de ton module

[Sa5m]

Re : Latest Events Module réaliser un slider d'évènements

D'accord, merci de ton conseil.

Je vais prendre le fichier js sur ce lien : https://github.com/9bitStudios/flexisel/

Pour l'intégration, du fichier script, il faut que j'y fasse appel comme dans le fichier index.html sur ce git c'est ça ?

[y.berges]

Re : Latest Events Module réaliser un slider d'évènements

oui a toi de suivre le tuto pas a pas ... et a l'adpater au règles de joomla

[Sa5m]

Re : Latest Events Module réaliser un slider d'évènements

Bonjour,

Je n'arrive toujours pas à afficher mes évènements sous forme de sliders...
J'arrive à intégrer les fichiers script dans mon index.php, mais je n'arrive pas à faire appel à une fonction de ce fichier script. J'ai essayé dans ma vue iconic, latest.php, en la surchargeant d'afficher juste un alert et ça fonctionne. Je ne comprends donc pas pourquoi l'appel à une fonction du script ne fonctionne pas.

Si quelqu'un pouvait m'aider ce serait gentil, ça fait plusieurs jours que je cherche et je ne sais vraiment pas quoi faire.

Sa5m

[y.berges]

Re : Latest Events Module réaliser un slider d'évènements

desoler mais sans code impossible de t'aider

[Sa5m]

Re : Latest Events Module réaliser un slider d'évènements

Oui je comprends bien,

Alors voici mon intégration des fichiers js dans mon fichier index.php :


Ensuite dans ma vue j'ajoute un id à mon div :


Puis à la fin de ma vue je fais appel à la fonction javascript pour obtenir l'effet slider :

Le alert qui se trouve avant l'appel de la fonction javascript c'était pour vérifier que le javascript était bien pris en compte dans ma vue.

Côté CSS, je n'ai pas fait beaucoup de changement :


Je ne sais pas si tout ça pourra t'aider, concernant le code javascript j'utilise le slider Flexisel que j'ai téléchargé ici : https://github.com/9bitStudios/flexisel/

[Sa5m]

Re : Latest Events Module réaliser un slider d'évènements

Bonjour,

Je suis enfin parvenue à réaliser un slider, j'ai utilisé le slider easyslider. Pour ceux qui un jour veulent faire la même chose voici le lien pour télécharger le slider : http://cssglobe.com/easy-slider-17-n...jquery-slider/

Pour intégrer le slider, j'ai copié le fichier js que j'ai collé dans le dossier js de mon template, et j'ai fait pareil pour le css. Ensuite j'ai intégré les deux fichiers dans mon index.php :

$gantry->addStyle('templates/gantry/css/easyslider/screen.css', 10);
$gantry->addScript('templates/gantry/js/easyslider/easySlider1.7.js');

Et pour finir dans ma vue iconic du module j'ai modifié la structure HTML et ajouté l'appel au javascript de cette façon :

$content .= "<div id='slider' class='jeventslatest jev_".$this->colourscheme."'><ul>";
...
$content .= '<li><div class="jeviconnotdate" '.$listyle.'>';

$content .= "</div></li>";
...
$content .= "</ul></div>";

<script type="text/javascript">
	jQuery(document).ready(function(){	
		jQuery("#slider").easySlider({
			auto: true, 
			continuous: true,
			speed: 2000,
			numeric: true
		});
	});
</script>

Mon seul soucis maintenant c'est que le slider ne s'adapte pas à la taille du container lorsque je change la position d'affichage du module et je ne sais pas comment faire pour qu'il s'adapte :



Si quelqu'un à une idée à me soumettre, je suis toute ouïe


Cordialement,
Sa5m

[Sa5m]

Re : Latest Events Module réaliser un slider d'évènements

Bonjour tout le monde,

Pour tous ceux qui souhaiteraient faire la même chose que moi avec le module Latest Events, voici la solution qui fonctionne parfaitement bien et qui ne nécessite pas particulièrement de connaissance en PHP ou en Javascript :

J’ai appris qu’il y a en quelque sorte différentes sortes de slider, ceux qui ne supportent que des images, ceux qui supportent des images et du texte.

Le slider dont je vous parle dans le post précédent (easyslider) ne convient pas pour afficher les évènements de JEvents sous forme de slider avec une image, un titre, une date et l’heure de l’événement. J’ai donc utilisé le slider slick : http://kenwheeler.github.io/slick/

Ensuite pour la mise en place du slider vous pouvez suivre les instructions que j’ai donné dans mon post précédemment. Pour finir il ne vous restera que le CSS à modifier pour régler le slider.

Voici ce que par exemple moi j'obtiens :


J’espère que ça en aidera plus d’un !

Bonne continuation et merci y.berges pour tes réponses.

Cordialement,
Emmanuelle ROBERT

[y.berges]

Re : Latest Events Module réaliser un slider d'évènements

a mon avis le top serait de finir ton projet en créant une archive installable pour tous !