18041 sujets

Questions générales et questions de débutants

Boucle spip et javascript

bonjour à tous, et félicitation aux créateurs de alsacréation pour le contenu de ce site.

bon voici ce qui m'amène à déposer un post sur le forum. je développe un site sous spip et je voudrais comprendre comment passer une boucle dans un script java, à l'intérieur de mon "head". l'objectif est simple, j'ai trouvé un slider jquery sympa, et j'aimerais gérer sont contenue dans mon back-end.

voici le code java:


$(function() {
    $("#showcase").showcase({
        css: { width: "566px", height: "168px" },
        animation: { type: "fade" },
        images: [
        { url:"images/showcase-home-1.jpg", 
          description:"approx. 16kb of javascript" },
        { url:"images/showcase-home-2.jpg", 
          description:"just select a target and a list of images" },
        { url:"images/showcase-home-3.jpg", 
          description:"css or json objects, you choose. Define everything (nearly)" },
        { url:"images/showcase-home-4.jpg", 
          description:"you can define your own ease function" }],
        navigator: { 
			position:"top-left", 
             orientation:"vertical", 
             css: { 
		 		padding:"6px", 
                margin:"25px 0px 0px 0px" } 
			},
        titleBar: { css: { height:"25px" } }
    });
});


comme vous pouvez le voir, l'on peu automatisé le contenue en générant l'équivalent d'une boucle pour remplacer les ligne suivantes:


{ url:"images/showcase-home-1.jpg", 
          description:"approx. 16kb of javascript" },
        { url:"images/showcase-home-2.jpg", 
          description:"just select a target and a list of images" },
        { url:"images/showcase-home-3.jpg", 
          description:"css or json objects, you choose. Define everything (nearly)" },
        { url:"images/showcase-home-4.jpg", 
          description:"you can define your own ease function" }],


l'idée de la boucle est de gérer les images d'articles contenue dans une rubrique. en mode "normal", cette objectif est réussi.

merci d'avance pour votre aide. cordialement
Difficile de t'aider sans un accès à la documentation du plugin Jquery que tu utilises.
Le code de ton carrousel d'images semble te forcer à déclarer le lien de tes images directement dans ton code javascript ce qui est aberrant ; Si ton javascript est désactivé, tes images ne seront plus visible dans la page, ce qui pose un problème d'accessibilité.

Les carrousels modernes que l'on trouvent sur le site de Jquery, permettent de récupérer des images et de les animer en indiquant l'élément HTML dans lequel elles se trouvent.
Je te conseil fortement ce type de plugin.
merci pour ta réponse, et je suis d'accord, mais le script jquery réalise un rendu que je n'ai pas trouvé dans d'autre module et j'admets que je début en code jquery( mais j'y travail!) donc programmer les même actions me sont pour le moment pas accessible.

voici le site du module avec toute ses déclinaisons, pour ma part j'en fais déjà fonctionner une correctement dans spip. (demo2 script de droit).

http://www.recoding.it/wp-content/uploads/demos/showcase-demo.htm

si tu as une piste pour le script que ce trouve en première page... je suis preneur...

cordialement, "La TAUPE"
Bonjour

Je ne connais pas bien SPIP, mais tu devrais pouvoir générer le code javascript en php pour le mettre dans le <head> de ta page, par exemple :

<?php 
$image1= "images/showcase-home-1.jpg";
//(etc. pour les autres images)
echo 

'$(function() { '.
    '$("#showcase").showcase({ '.
        'css: { width: "566px", height: "168px" }, '.
        'animation: { type: "fade" }, '.
        'images: [ '.
        '{ url:"'.$image1.'", '. 
        //(etc. pour les autres images)
?>


ici bien entendu l'url de l'image est en dur, mais tu peux la récupérer dynamiquement
L'exemple de showcase sur la page d'accueil fonctionne exactement de la même façon que celui de la page demo 2.
Showcase récupère bien ton contenu dans le DIV :


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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>Showcase</title>

  <link rel="stylesheet" media="all" href="css/mafeuilledestyle.css" />
</head>
<body>

<div id="showcase">
	<a href="#" alt="">
        <img src="images/1.jpg" alt="description of this image (really??)" />
    </a>
    <a href="#" alt="">
        <img src="images/2.jpg" alt="yet another image" />
    </a>
    <a href="#" alt="">
        <img src="images/3.jpg" alt="and the third" />
    </a>


</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/showcase.js"></script>
<script type="text/javascript">

$(function() {
    $("#showcase").showcase({
        css: { width: "566px", height: "168px" },
        animation: { type: "fade" },
        navigator: {
            position:"top-left",
             orientation:"vertical",
             css: {
                padding:"6px",
                margin:"25px 0px 0px 0px" }
            },
        titleBar: { css: { height:"25px" } }
    });
});



</script>

</body>
</html>

Modifié par Guillem.C (17 Apr 2010 - 12:19)
merci pour vos réponse. je plaide coupable d'un manque de niveau en anglais... effectivement le principe d'avoir les élément image en html fonctionne pour tous les demos....

résultat final génial.......

encore merci pour votre aide

"pb résolue"
Sujet clos
Aller à