Plugin Spip jQuery Cycle (pour Spip 2.1 et 3)

Ce plugin est une adaptation pour spip du script Cycle pour jQuery. Il permet d’afficher des diaporamas dans le texte de vos articles. Il fournit également des modèles permettant par exemple d’insérer un diaporama aléatoire d’images ou un diaporama des sites syndiqués dans un squelette...

Cette deuxième mouture du plugin Spip jQuery Cycle “sjcycle” est compatible avec spip >= 2.1

Par défaut, la fonction tooltip est désactivée mais est activable via la page de configuration. De même pour les fonctions fancybox/mediabox mais qui nécessitent, eux, l’installation des plugins fancybox ou mediabox pour fonctionner. Spip jQuery Cycle utilise les librairies fournies par ces plugins mais pas leurs paramètres de configuration.

Nota : l’effet FancyBox n’est plus proposé en Spip 3, ce plugin n’étant pas compatible.

Pour plus d’informations, se reporter à la version précédente.

Installation

Comme tous les autres plugins, cf. http://www.spip.net/fr_article3396.html

  • Le plugin fonctionne sur les squelettes disposant de les balises #INSERT_HEAD et #INSERT_HEAD_CSS.
  • Le plugin nécessite les plugins CFG (avant la version 1.8), Saisies, YAML et Spip_Bonux. Il utilise le plugin Palette.

Décryptage de la syntaxe et paramètres du raccourci typographique “sjcycle”

Le raccourci typographique “sjcycle” permet d’insérer facilement un ou plusieurs diaporamas au sein d’un article : il vous suffit de le recopier à l’intérieur de la case « Texte » de l’article, là où vous désirez situer le diaporama.

Ce raccourci comporte plusieurs paramètres séparés par le caractère “|”. Les 3 derniers paramètres ont été rajoutés dans la version 0.3

Paramètre “N”, obligatoire :
<sjcycleN>
Correspond au numéro de l’article contenant les images. Vous pouvez ainsi insérer un diaporama avec les images d’un article X dans un article Y.

Paramètre “ALIGN”, optionnel :
<sjcycleN|ALIGN>
Permet de spécifier l’alignement du diaporama au sein du texte.
S’il n’est pas précisé, l’alignement est “center”.
Les options de l’alignement :
-  “left” : à gauche du texte;
-  “center” : centrer dans le texte;
-  “right” : à droite du texte.


Paramètre “docs=n1,n2,[...],nx”, optionnel :
<sjcycleN|ALIGN|docs=n1,n2>
Permet de spécifier la liste d’images à afficher dans le diaporama, nx étant le numéro “spip” du document.
Ainsi, on peut afficher plusieurs diaporamas dans au sein d’un même texte, isoler des images.
S’il n’est pas précisé, l’ensemble des images sont sélectionnées par défaut.

Attention : dans le cas d’une utilisation avec un modèle l’écriture diffère :

[(#MODELE{sjcycle}{id_sjcycle=XX,docs=21|22|24})]

Paramètre “id_diapo”, optionnel :
<sjcycleN|ALIGN|id_diapo=X>
Permet d’attribuer un id spécifique à un diaporama afin de pouvoir le cibler en css par dsjcycle_X
Depuis la version 1.1, n’est plus nécessaire pour afficher plusieurs diaporamas dans le même article

Exemple :
<sjcycle16|center|docs=101,102,103,104|id_diapo=1><sjcycle16|center|docs=105,106,107,108,109|id_diapo=2|opt=fx:'shuffle',timeout:2000>
Ceci affiche 2 diaporamas dans le même article, le premier sur 4 images avec les paramètres par défaut du site et le second sur 5 images, avec des paramètres différents de ceux par défaut.

Paramètre “legende”, optionnel :
<sjcycleN|ALIGN|legende=X>
Permet d’afficher une légende sous le diaporama

  • Si X=1, on affiche comme légende le titre des images
  • Si X=modele, on affiche comme légende le texte fourni par le modèle sjcycle_modele. Ceci permet de créer une légende contenant le nom de l’auteur, le titre de l’article, enfin ce qu’on veut...
  • Si X=un texte, ce texte est affiché comme légende

Paramètres “btn_precedent” et “btn_suivant” (version 2.2.5 et 1.9.1) :
<sjcycleN|btn_precedent=1|btn_suivant=1>
Permet d’afficher les boutons “précédent” et “suivant” : on peut ne mettre qu’un seul des deux boutons.
Le libellé des boutons est personnalisable dans la configuration du plugin.

Paramètres “lien_article” et “forcer_lien_reference”, optionnels (ajoutés en version 1.6) :
<sjcycleN|ALIGN|lien_article=XXX|forcer_lien_reference=on>
Permet de poser un lien sur le diaporama vers un article autre que celui contenant les images. Dans le cas d’un site multilingue, fournir l’id de l’article de référence, le modèle se charge de trouver l’id de l’article correspondant à la langue du visiteur. Cette option désactive l’ouverture vers une box. Si l’article n’existe pas dans la langue courante on met ou pas un lien vers l’article de référence suivant que le paramètre forcer_lien_reference soit défini ou pas.

Exemple dans le cas d’une insertion dans un squelette sur une page sommaire :
-  [(#MODELE{sjcycle}{id_sjcycle=16,width=200,height=300,lien_article=171})] : diaporama sur toutes les images de l’article 16 redimensionnées à 200x300 avec un lien vers l’article 171 (ou sa traduction)

Paramètres “liens_individuels”, optionnel (ajouté en version 1.7) :
<sjcycleN|ALIGN|liens_individuels=valeur>
Permet de poser un lien sur chaque image du diaporama vers un article, une rubrique ou un site externe suivant la valeur du paramètre (article, rubrique, externe). Si la valeur vaut article ou rubrique, l’identifiant de l’objet est pris dans le champ descriptif de chaque image. Si la valeur vaut externe, le champ descriptif de chaque image doit contenir un lien http. Cette option désactive l’ouverture vers une box.

Exemple :
-  <sjcycle16|center|liens_individuels=article> : diaporama sur toutes les images de l’article 16 avec sur chaque image un lien vers l’article dont l’identifiant est contenu dans le descriptif de l’image.

Paramètre “limite” :
<sjcycleN|limite=3>
Sortira les trois premières images de l’article “N” dans le diaporama.

Paramètre “opt=p1:v1;p2:v2;[...];px:vx”, optionnel :
<sjcycleN|ALIGN|opt=p1:v1;p2:v2>
Permet d’utiliser les options du script jcycle. La liste complète est définie sur le site du plugin jquery jcycle par ici
Ces valeurs écrasent celles définies dans la page de configuration du plugin.
Les options possibles correspondent à celles de la version utilisée dans ce plugin spip et non à celles proposées sur la page citée ci-dessus. Actuellement, c’est la version 2.88 (08-JUN-2010) qui est utilisée
Depuis la version 1.2, il faut utiliser le point-virgule comme séparateur pour que ça fonctionne en modèle.

Exemple :
-  <sjcycle16|center|opt=autostop:1;autostopCount:5> : diaporama sur toutes les images de l’article 16 mais qui s’arrêtera à la cinquième image
-  <sjcycle16|center|opt=fx:'fade'> : diaporama sur toutes les images de l’article 16 avec un effet de transition “fade” qui remplace celui défini globalement pour le site entier

Paramètres de surcharge de la configuration générale :
<sjcycleN|ALIGN|param=valeur>
Ces paramètres optionnels écrasent localement les valeurs définies dans la page de configuration du plugin :
-  width : largeur en pixels des images recadrées
-  height : hauteur en pixels des images recadrées
-  position : position de l’image de d’origine dans l’image recadrée (left top, left center, left bottom, center top, center, center bottom, right top, right center, right bottom)
-  background : couleur de fond des images recadrées (au format #FF0000)
-  border_color : couleur de la bordure des images recadrées (au format #FF0000)
-  border_width : largeur en pixels de la bordure
-  div_margin : marge en pixels autour des images recadrées

Exemple :
-  <sjcycle16|center|background=#000000> : diaporama centré sur toutes les images de l’article 16 mais avec un fond noir, peu importe la couleur de fond définie dans la page de configuration du plugin.

Le modèle

On peux utiliser le modèle pour afficher un diapo dans les squelettes, XX étant le numéro de l’article contenant les images :

[(#MODELE{sjcycle}{id_sjcycle=XX,width=200,height=300})]

Astuces :


-  pour avoir de la transparence en fond, il faut mettre “transparent” dans les 2 champs de couleur dans la page de config. Cependant il faut savoir que les images générées seront au format png et donc généralement plus lourdes que les jpg
-  La qualité jpeg par défaut utilisée par les filtres d’image de SPIP est de 85. Elle peut être modifiée en rajoutant dans le fichier mes_options la ligne suivante :
define('_IMG_GD_QUALITE', 95);

Exemples d’utilisation :

http://www.lefourneau.com/spip/spip...

Diapo «au hasard» (ajouté en version 0.8)

Le modèle sjcycle_alea permet d’afficher un diaporama paramétrable sur un ensemble d’images choisies au hasard parmi les documents du site. Les paramètres possibles sont :
-  nb : nombre d’images (10 par défaut)
-  fx : l’effet à appliquer (fade par défaut)
-  duree : durée d’affichage de chaque image en ms (5000 par défaut)
-  largeur : largeur des images (200 par défaut)
-  hauteur : hauteur des images (0 par défaut, donc fonction de la largeur)

Exemple d’appel :

[(#MODELE{sjcycle_alea}{largeur=190})]

Une noisette pour le Noizetier est également fournie

Diapo des sites (ajouté en version 1.5)

Le modèle sjcycle_sites permet d’afficher un diaporama paramétrable sur l’ensemble des logos des sites référencés. Les paramètres possibles sont :
-  afficher_nom_site : si défini, affiche le nom du site sous le logo
-  fx : l’effet à appliquer (fade par défaut)
-  duree : durée d’affichage de chaque image en ms (5000 par défaut)
-  largeur : largeur des images (200 par défaut)
-  hauteur : hauteur des images (0 par défaut, donc fonction de la largeur)

Exemple d’appel :

[(#MODELE{sjcycle_sites}{afficher_nom_site=on})]

Une noisette pour le Noizetier est également fournie

Diapo des images d’une rubrique (ajouté en version 2.3.0)

Depuis la version 2.3.0 il est possible d’afficher les images d’une rubrique avec le raccourci suivant : <sjcycleXX|rubrique>. Les paramètres disponibles sont les mêmes que pour le modèle “article”.

Problèmes connus :


-  Les effets de type turnLeft, scrollRight,... ne fonctionnent pas si les infobulles sont activées dans la config.
-  L’affichage d’une bordure autour des images n’est pas satisfaisant...

updated on 2 October 2019

Discussion

93 discussions

  • Bonjour, merci pour le travail réalisé sur ce plugin.
    Je gère un site en Spip3 et Zpip. Ne maitrisant pas le Jquery, je souhaite m’appuyer sur un plugin et sa configuration.
    Petite question : peut-on appliquer l’effet dans le squelette sur le calque contenu, texte et image ?
    L’idée est de faire un diaporama sur une suite d’articles triés par mot clé.
    Mon code simplifié :

    <BOUCLE_diapogroupes(GROUPES_MOTS){id_groupe=1}>
        <div id="page">
            <B_diapomot>
                    <BOUCLE_diapomot(MOTS){id_groupe}>
                    <div id="conteneur">        
                            <BOUCLE_diapo_show(ARTICLES){id_mot}>
                            <div id="contenu" class" ? je mets mon style diaporama ici ? ">
                            <BOUCLE_titremot(MOTS){id_article}>[(#TITRE)]</BOUCLE_titremot>
                            [(#LOGO_ARTICLE)]
                            [(#SURTITRE)]
                            [(#TITRE)]
                            [(#TEXTE)]
                            [(#DESCRIPTIF)]
                            </div>
                </BOUCLE_diapo_show>
                    </div>
            </BOUCLE_diapomot>
            </B_diapomot>
            </div>
    </BOUCLE_diapogroupes>

    J’espère qu’il existe une solution. Merci d’avance

    Reply to this message

  • Bonjour,
    je découvre votre plugin qui dans un premier temps va me servir pour faire un bandeau à mon futur site. Y a t’il la possibilité de créer un masque fixe devant le diaporama. Je m’explique un logo fixe sur le diaporama par exemple.
    Merci

    Reply to this message

  • 5

    Bonjour,

    Est-il possible de faire un lien différent sur chaque image du diaporama ?
    J’ai essayé en utilisant liens_individuels=valeur et doc=xx mais je n’y suis pas arrivé.

    Merci

    • Bonjour

      Peux tu poster ton code d’insertion du diaporama ?

    • J’ai essayé ça :<sjcycle36|ALIGN|docs=234|liens_individuels=art37| docs=235|liens_individuels=art38>
      Ou ça :
      <sjcycle36|ALIGN|docs=234;liens_individuels=art37| docs=235;liens_individuels=art38>

      J’ai un autre problème, quand j’ouvre une image d’un diaporama celle-ci s’ouvre bien, mais à la fermeture il reste à l’écran le petit rond qui calcule et on ne peut pas revenir sur la page d’origine
      (j’utilise aussi fancybox). savez-vous d’où peut venir le problème ?

      Merci d’avance

    • Comme indiqué dans la doc, liens_individuels peut valoir article, rubrique ou externe, le plugin se chargeant de récuperer les infos ailleurs.

    • désolé je me suis peut-être mal exprimé mais ce n’était pas le fond de ma question. Ma question était comment chaque image du diapo peut être associée à un lien hypertexte différent pour ouvrir des pages différentes. Si vous avez un modèle de code je suis preneur !

      Concernant le bug d’affichage avez-vous une solution (cf. pièce jointe de mon message précédent). Ca mouline, ça mouline, mais ça ne se ferme pas !...

      J’ai également rencontré un bug en navigation mobile sous androïd où une fois l’image cliquée celle-ci s’ouvre bien mais reste grisée et translucide. Même problème ensuite, impossible de fermer la fenêtre et de revenir sur la page d’origine.

    • Ben, si tu appelles ton modèle avec liens_individuels=externe, il te suffit de mettre pour chaque image le lien destination dans le champ description de l’image... C’est expliqué plus haut...

      Concernant le bug d’affichage, peux tu indiquer un lien vers une page où ce problème est présent ?

    Reply to this message

  • 1

    Bonjour,
    Sauf erreur, je pense qu’il y a un bug concernant l’installation sous spip >=2.1 de la version 2.2.3
    Pour ma part il m’est impossible de la charger dans ma liste de plugins, alors que la v1.9 se charge parfaitement sur mon site spip 2.1.16

    Pouvez-vous voir d’où ça vient ?

    Merci d’avance

    • Je me réponds : j’avais pas vu que la 2.2.3 était pour spip 3
      Sorry

    Reply to this message

  • 7

    Bonjour,

    Etant débutant sous SPIP, j’ai installé les différents plugins et lancer la commande via la syntaxe dans un article. En mode édition sous SPIP, le diaporama fonctionne automatiquement avec l’effet blindX, mais lorsque je passe en visualisation, sous Firefox 3.6.24 et IE 8 .0.6001, ne s’affiche que la première photo de la série et aucune transition.

    J’ai procédé à plusieurs essais de différents configuration, mais en vain.

    Quelqu’un peut-il m’aider car je ne trouve aucune notice explicative du style installation et paramétrage sur le net.

    Merci par avance

    • Hello

      Tu as une url où on peut voir le problème ?

    • Pour l’instant, je conçois le site à l’aide de Wamp server sous Windows, avec SPIP 2.10, donc aucune possibilité de pouvoir consulter depuis l’extérieur. Je précise aussi que j’utilise le plugin “cisquel” de la charte GISEH, c’est certainement un point qui peut avoir son importance .

      J’avoue ne pas avoir tout saisie sur les balises #INSERT_HEAD et #INSERT_HEAD_CSS, elles sont à insérer où exactement ? Je pense aussi que lorsque je lance l’article sous le navigateur, en mode visiter, autant ça fonctionne en mode Edition, autant la première photo reste inactive en visualisation réelle. Doit-on déclarer manuellement dans un fichier gabarit l’appel au fichier .js du jQuery Cycle ?

      Voilà pour des explications supplémentaire. Encore une fois, je suis débutant et j’essaye de comprendre au mieux. Ce plugin m’intéresse beaucoup et j’aimerais pouvoir en profiter.

      Merci pour la suite

    • Normalement les balises #INSERT_HEAD sont déjà insérées dans les squelettes. Regarde le fichier inc_head.html de la dist. Et si tu inspecte le code dans l’espace public, il te suffit de regarder que la ligne d’insertion du js est bien présente dans le head.

      Tu as peut être un conflit avec un autre plugin ? Essaye avec uniquement les plugins nécessaires à sjcycle.

      Puis installe les autres un par un pour voir celui qui interfère...

      Vérifie aussi que dans l’espace public il n’y a pas une double insertion de javascript.

    • Merci pour cette aide précieuse, tu es en effet sur la bonne voie. En fait j’avais fini par trouver le pourquoi : 2 problèmes sont à l’origine du dysfonctionnement soulevé.

      1) sans trop l’expliquer, j’avais installé l’ancienne version de jQuery Cycle, soit le fichier sjcyclezip-cc726, qui après multiples essais, j’ai pu constater, sauf erreur de ma part, qu’il ne fonctionne pas sous SPIP 2.1.12. Après avoir bien observé les différentes pages sur SPIP contrib, je me suis aperçu du fichier sjcycle2, qui une fois installé, a bien fait évoluer les choses ;

      2) comme je le soulignais au second message, j’ai opté pour l’utilisation des plugins relevant des squelettes GISEH, notamment “cisquel et cisparam” (http://www.spip-contrib.net/Plugins-Giseh-pour-SPIP-2). Ce qu’il faut avoir à l’esprit, et ça peut servir à d’autres concepteurs de site sous SPIP2, c’est que sous le répertoire du plugin “cisquel”, où l’ensemble des fichiers gabarit HTML y sont stockés, il n’y a pas de fichier “inc-head.html”. J’ai donc copié ce fichier à partir de “squelettes-dist” et inséré les balises #INSERT_HEAD et #INSERT_HEAD_CSS dans le head.

      En vérifiant que les plugins Tooltip, Fancybox, Yaml, Saisies et Spip-bonux, tous visiblement indispensables au fonctionnement de jQuery Cycle 2, j’ai réussi à enfin faire fonctionner ce plugin performant et très agréable en visualisation.

      Il faut donc retenir que lorsqu’on utilise d’autres squelettes que ceux de “squelettes-dist”, il est nécessaire de vérifier la présence du fameux fichier inc-head.html et d’apporter si besoin des modifications manuelles.

      Bravo pour ce plugin et un grand merci pour ta réactivité et précieuse aide en pareille circonstance.

      C’est encourageant de poursuivre l’aventure dans le monde de SPIP 2.

      Bonne continuation.

    • Une erreur s’est glissée dans mon texte, ce n’est pas dans le fichier “inc-head” que j’ai inséré les balises #INSERT_HEAD et #INSERT_HEAD_CSS mais dans “article.html” de “cisquel”.

      Toutefois, il faut bien copier le fichier “inc-head” sous le répertoire du plugin “cisquel”.

      Je pense avoir tout dis cette fois.

    • Super pour ces infos, je galère depuis des mois pour mettre le plugin avec Giseh.
      J’ai suivi ta procédure mais pour moi ça marche toujours pas :(
      Pourrais tu me faire une copie d’écran de ton code html “article” pour voir à quel endroit tu insères ton #insert_head et ton #insert_head_css ?

      Merci d’avance

    • Je viens d’essayer de mettre la version jQuery Cycle 2.2.3 mais impossible de la télécharger dans mes plugins sur mon site spip 2.1.16 :(
      Parcontre la v1 s’installe bien.
      Comment as-tu fait pour mettre la v2 sur une version de spip : 2.1< spip < 3 ?

      Merci d’avance

    Reply to this message

  • Bonjour,
    Y-a-t-il un moyen de d’afficher les images selon un ordre specifiee ? Exemple par titre de l’image ?

    Reply to this message

  • 10

    Je n’arrive pas à surcharger dans l’article les paramètres :

    Exemple : <sjcycleXXX|opt=height:413;width:550|div_margin=15>

    Rien ne se passe...

    Une idée ?

    Merci

    • Et si tu mets plutôt <sjcycleXXX|height=413|width=550|div_margin=15> ?

    • J’avais déjà essayé cette solution sans aucun changement. Ce sont toujours les réglages cfg qui prennent le dessus...

    • Y’a pas trop de raison que ce que le code ci-dessus ne fonctionne pas...
      Le 2 exemple ici, fonctionne de cette façon.

      Et c’est bien la valeur passée en paramètre qui prend le dessus sur celle configurée via CFG : http://zone.spip.org/trac/spip-zone/browser/_plugins_/sjcycle/branches/v1/modeles/sjcycle.html#L9

      Tu n’aurais pas surchargé le modèle ?

    • Dans l’exemple du site rien ne s’affiche quand je clique dans les cadres. J’ai essayé avec Firefox et Chrome... Et c’est pareil...

      Je n’ai pas touché au modèle.

      Je tourne et vire et n’y comprends rien

    • Le plugin avait été désactivé par erreur... Mais normalement, là, ça refonctionne. Non ?

    • Super, oui, c’est bon... Merci !

      Autre question : Quand on surcharge comme ça on a plus accès à la possibilité de cliquer sur le slide et de le voir s’ouvrir dans une fenêtre mediabox ?

      Merci encore

      Robert

    • Hello

      Normalement si, si l’a configuré dans le formulaire de config.

    • SPIP 2.1.13 [19292]

      Réinstallation de tous les plugins nécessaires.
      Mise à jour cfg

      Mais le plugin n’apparaît pas dans cfg...

      Robert

    • Le plugin ne nécessite plus CFG, j’ai corrigé la doc ci-dessus. La configuration se fait via le menu Squelettes si le plugin Bando est installé, sinon directement dans le menu Configuration.

    Reply to this message

  • 3

    Salut,

    Après avoir mis le modèle dans un #TEXTE de rubrique, les paramètre height et width ne sont pas pris en compte. Le modèle s’appuie sur des articles de la rubrique et retourne donc les images de ces articles. Le même modèle mis dans le texte des articles fait le boulot....

    Cela se passe ici: http://www.rbdh-bbrow.be/spip.php?r.... Le modèle inéséré est <sjcycle1297|center|width=200|height=300>.

    Ce qui est bizarre, c’est que la proportion est respectée (si je change la taille) mais le tout est systématiquement ramené à max 150px... (qui doit être la taille max des vignettes dans la config SPIPmais est-ce lié ?)

    Après avoir pas mal chipotté dans le squelette du modèle, je pense que ça se passe en jquery au chargement de la page mais ça je sais pas trouver... Juste ? Cherche-je l’impossible ?

    • Salut

      Je viens de tester sur un spip 2.1.12 avec les squelettes de la dist, ça fonctionne, les paramètres de largeur et hauteur sont bien pris en compte (avec une taille max des vignettes à 150 dans ?exec=config_fonctions... Donc retente en désactivant tes squelettes, tu dois avoir un truc qui passe par derrière est qui redimensionne. Mais quoi ?

    • LOOOOOL. Enfin non, j’y ai passé une bonne partie de ma soirée hier :-p.

       [<div class="#EDIT{texte} chapo">(#TEXTE|image_reduire{150})</div>]

      Sorry pour le bruit et merci pour l’aide, en parlamnt de squelettes tu m’as débloqué le neurone qui couinait. Mais pourquoi ai-je mis ce image_reduire ?

      Merci Merci Merci Merci Merci Merci Merci Merci !

    • > Enfin non, j’y ai passé une bonne partie de ma soirée hier :-p.

      Ben pendant ce temps tu ne t’es pas drogué ;-) C’est quand même positif

    Reply to this message

  • 6

    hello
    Il n’y a que moi qui ne trouve pas SAISIES en 1.9.0 ?
    la dernière version disponible sur laquelle j’ai mis la main est la 1.8.12 …

    Reply to this message

  • 1

    Bonjour,

    je viens de mettre à jour, avec la dernière version du plugin, sur notre site (SPIP 2.1.12) et j’ai constaté que le plugin “YAML” doit être présent dorénavant.

    Je pense qu’il manque la ligne :

     necessite id=“yaml” version=“[x.x.x;]” 

    dans le fichier plugin.xml et le préciser dans la Doc.

    En tout cas merci pour ce plugin qui est absolument génial.

    Latoniccia Club Plongée

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom