Zend FR

Consultez la FAQ sur le ZF avant de poster une question

Vous n'êtes pas identifié.

Pages: 1

 

#1 23-08-2010 17:17:37

gmifsud
Membre
Date d'inscription: 29-04-2010
Messages: 75

[RÉSOLU] Zend MVC et code Javascript (carousel 3D) ?

Bonjour à tous,


J'ai pu tester et utiliser ZendX Jquery sur un ancien projet. Principalement pour des datepicker.

Pour un nouveau projet, j'aurais aimé utiliser un Carousel 3D qui fonctionne très bien quand je n'utilise pas le Zend Framework, mais qui ne fonctionne pas quand j'essaye de l'intégrer dans une page MVC de Zend.

En gros :
Ce carousel Jquery : http://www.professorcloud.com/mainsite/carousel.htm fonctionne très bien avec l'aide d'intégration dans du html "simple" : http://www.professorcloud.com/mainsite/ … ration.htm

Mais lorsque j'essaye de l'intégrer dans ma page index.phtml d'un projet MVC de zend, ça ne marche plus : l'affichage est le même que si jquery n'était pas chargée, ou javascript désactivé dans le navigateur. Or, bien entendu, j'ai vérifié que tout fonctionne de ce côté là en essayant un datepicker pour voir.

J'utilise un $this->headscript dans ma vue pour charger le code dans le <head>.
Je charge jquery et les librairies du carousel dans le layout.phtml.
Je n'ai pas activé l'option "enableNoConflictMode" dans mon boostrap.

Je ne vois pas où ça coince, même s'il est évident qu'utiliser un code javascipt non prévu pour Zend n'est pas pareil qu'utiliser un code de ZendX comme le datepicker.


En conclusion, j'espère que vous pourrez m'aider à définir comment charger des codes javascript dans un projet Zend MVC.

Merci d'avance.



EDIT : il semblerait qu'il me faille forcément lancer l'affichage d'un élément zendX pour que s'affiche mon carousel !
Exemple : si je fait un $this->datepicker avant, le carousel s'affiche ! Alors que sans cela, il ne s'affiche pas.
C'est assez ennuyeux, et j'espère que c'est dû à une erreur de ma part simple à corriger !

Dernière modification par gmifsud (25-08-2010 12:03:06)

Hors ligne

 

#2 24-08-2010 11:09:21

Darkroll
Membre
Date d'inscription: 23-05-2010
Messages: 17

Re: [RÉSOLU] Zend MVC et code Javascript (carousel 3D) ?

Salut,
Ce soucis vient peut-être de la manière dont tu as paramettré le layout :

Voici ma configuration dans mon layout.phtml

Code:

    <?php
    if ($this->jQuery()->isEnabled())
    {
        $this->jQuery()->setLocalPath($this->baseUrl().'/site/js/jquery/js/jquery-1.4.2.min.js')
                        ->setUiLocalPath($this->baseUrl().'/site/js/jquery/js/jquery-ui-1.8.2.custom.min.js')
                        ->addStyleSheet($this->baseUrl().'/site/js/jquery/css/ui-lightness/jquery-ui-1.8.2.custom.css');
         echo $this->jQuery();
    }
    ?>

Comme tu peux le voir je test si on doit charger Jquery.
Lorsque l'on charge un composant ZendX_JQuery_Form_Element_*, il met les variable $_enabled et $_uienabled sur true (ces variables sont en protected).

Donc si tu dois activé JQuery alors que tu n'as pas obligatoirement de formulaire dans ta page il suffit de mettre ce code dans ton Controller.

Dans mon controller

Code:

        $this->view->jQuery()->enable();
        $this->view->jQuery()->uiEnable();

Ces fonctions bascules les variables ( $_enabled et $_uienabled) sur true.

A+

Dernière modification par Darkroll (24-08-2010 11:09:47)

Hors ligne

 

#3 24-08-2010 17:15:51

gmifsud
Membre
Date d'inscription: 29-04-2010
Messages: 75

Re: [RÉSOLU] Zend MVC et code Javascript (carousel 3D) ?

Super ! Cela semble fonctionner à merveille !
Merci beaucoup.



Je donne ci-dessous comment j'ai fait pour utiliser le carousel, pour les prochains qui se poseraient la question.


Dans le contrôleur :

Code:

    public function indexAction()
    {
        // On définit le titre de la page.
        $this->view->title = "Page d'Accueil";
        $this->view->headTitle($this->view->escape($this->view->title));
        
        $this->view->jQuery()->enable();
        $this->view->jQuery()->uiEnable();
        
        $this->view->headScript('script','
             $(document).ready(function(){
                                        
                 // This initialises carousels on the container elements specified, in this case, carousel1.
                 $("#carousel1").CloudCarousel(
                     {
                         xPos: 512,
                         yPos: 80,
                         buttonLeft: $("#but3"),
                         buttonRight: $("#but4"),
                         altBox: $("#alt-text"),
                         titleBox: $("#title-text"),
                         FPS:30,
                         autoRotate: "left",
                         autoRotateDelay: 3000,
                         speed:0.15,
                         mouseWheel:true
                     });
                 });
              ');
    }

Dans la vue :

Code:

<!-- This is the container for the carousel. -->
        <div id = "carousel1" style="width:1024px; height:450px; background:#E4E4CB; overflow:scroll;">
            <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
            <!-- You can place links around these images -->
            <a href="video1.php"><img class = "cloudcarousel" src="./multimedia/preview.jpg" alt="Présentation de JMPLayer" title="Video 1" /></a>
            <a href="video2.php"><img class = "cloudcarousel" src="./multimedia/preview.jpg" alt="Video 2 Description" title="Video 2 Title" /></a>
            <a href="video3.php"><img class = "cloudcarousel" src="./multimedia/preview.jpg" alt="Video 3 Description" title="Video 3 Title" /></a>
            <a href="video4.php"><img class = "cloudcarousel" src="./multimedia/preview.jpg" alt="Video 4 Description" title="Video 4 Title" /></a>
        </div>
        
        <!-- Define left and right buttons.
        <input id="left-but"  type="button" value="Left" />
        <input id="right-but" type="button" value="Right" />
         -->
        <!-- Define elements to accept the alt and title text from the images. -->
        <span id="title-text"> </span><span id="alt-text"></span>

Dans le layout :

Code:

<head>
    <?php echo $this->headMeta(); ?>
    <?php echo $this->headTitle(); ?>
    <?php echo $this->headLink()->appendStylesheet($this->baseUrl().'/styles/base.css')
                                ->appendStylesheet($this->baseUrl().'/styles/print.css', 'print'); ?>
    <?php echo $this->headLink(array('rel' => 'icon', 'href' => $this->baseUrl().'/images/favicon.png'), 'PREPEND')
                ->headLink(array('rel' => 'shortcut icon', 'href' => $this->baseUrl().'/images/favicon.ico'), 'PREPEND'); ?>
    <?php
    if ($this->jQuery()->isEnabled())
    {
        $this->jQuery()->setLocalPath($this->baseUrl().'/js/jquery/js/jquery-1.4.2.min.js')
                ->setUiLocalPath($this->baseUrl().'/js/jquery/js/jquery-ui-1.8.custom.min.js')
                ->addStylesheet($this->baseUrl().'/styles/datepicker/jquery-ui-1.8.custom.css');
        $this->jQuery()->AddJavascriptFile($this->baseUrl().'/js/jquery/js/jquery.ui.datepicker-fr.js');
    }
        echo $this->jQuery();    ?>
    <script type="text/javascript" src="<?php echo $this->baseUrl(); ?>/js/cloud-carousel.1.0.4.js"></script>
    <script type="text/javascript" src="<?php echo $this->baseUrl();?>/js/jquery.mousewheel.js"></script>
    <?php echo $this->headScript();        // Inclus les javascripts définis dans les vues.    ?>
    
</head>

Hors ligne

 

#4 25-08-2010 11:53:16

gmifsud
Membre
Date d'inscription: 29-04-2010
Messages: 75

Re: [RÉSOLU] Zend MVC et code Javascript (carousel 3D) ?

[Erreur idiote de ma part, problème résolu]

Voici comment je procède au final, cela me parait plus propre.
Dans le contrôleur :

Code:

    public function indexAction()
    {
        // On définit le titre de la page.
        $this->view->title = "Page d'Accueil";
        $this->view->headTitle($this->view->escape($this->view->title));
        
        // On active l'utilisation de la librairie jQuery
        $this->view->jQuery()->enable();
        $this->view->jQuery()->uiEnable();
        
        // On inclut les scripts pour afficher le carousel 3D
        $this->view->headScript()->appendFile($this->view->baseUrl().'/js/cloud-carousel.1.0.4.js');
        $this->view->headScript()->appendFile($this->view->baseUrl().'/js/carousel.ini.js');
        $this->view->headScript()->appendFile($this->view->baseUrl().'/js/jquery.mousewheel.js');

    }

Dans le carousel.ini.js j'ai mis les options du carousel

Code:

$(document).ready(function(){
                                
         // This initialises carousels on the container elements specified, in this case, carousel1.
         $("#carousel1").CloudCarousel(
             {
                 xPos: 512,
                 yPos: 80,
                 buttonLeft: $('#but3'),
                 buttonRight: $('#but4'),
                 altBox: $("#alt-text"),
                 titleBox: $("#title-text"),
                 FPS:30,
                 autoRotate: 'left',
                 autoRotateDelay: 3000,
                 speed:0.15,
                 mouseWheel:true
         });
     });

Dans la vue :

Code:

<div class="outerscrollbox" align="center">

    <!-- This is the container for the carousel. -->
        <div id = "carousel1" style="width:1024px; height:450px; background:#E4E4CB; overflow:scroll;">
            <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
            <!-- You can place links around these images -->
            <a href="video1.php"><img class = "cloudcarousel" src="./multimedia/preview.jpg" alt="Présentation de JMPLayer" title="Video 1" /></a>
            <a href="video2.php"><img class = "cloudcarousel" src="./multimedia/preview.jpg" alt="Video 2 Description" title="Video 2 Title" /></a>
            <a href="video3.php"><img class = "cloudcarousel" src="./multimedia/preview.jpg" alt="Video 3 Description" title="Video 3 Title" /></a>
            <a href="video4.php"><img class = "cloudcarousel" src="./multimedia/preview.jpg" alt="Video 4 Description" title="Video 4 Title" /></a>
        </div>
        
        <!-- Define left and right buttons.
        <input id="left-but"  type="button" value="Left" />
        <input id="right-but" type="button" value="Right" />
         -->
        <!-- Define elements to accept the alt and title text from the images. -->
        <span id="title-text"> </span><span id="alt-text"></span>

</div>

Bien entendu, j'ai viré les chargements de scripts dans le layout puisqu'ils sont maintenant faits dans le contrôleur.

Dernière modification par gmifsud (25-08-2010 12:02:45)

Hors ligne

 

#5 09-09-2010 08:39:16

elkolonel
Administrateur
Lieu: Grasse
Date d'inscription: 18-12-2007
Messages: 299
Site web

Re: [RÉSOLU] Zend MVC et code Javascript (carousel 3D) ?

Merci gmifsud pour ce cas d'utilisation de ce carrousel.
Es tu d'accord pour que je puisse intégrer ton code source dans la faq ZF ?

Cordialement,

Itanea, Création de site internet & Communication
Itanea, le blog sur le développement PHP, Zend Framework

Hors ligne

 

#6 09-09-2010 13:37:25

gmifsud
Membre
Date d'inscription: 29-04-2010
Messages: 75

Re: [RÉSOLU] Zend MVC et code Javascript (carousel 3D) ?

Oui, je suis tout à fait d'accord.
Merci à toi de t'y intéresser.

N'hésite pas à l'adapter/simplifier/améliorer pour la FAQ, surtout.

Hors ligne

 

#7 19-10-2010 16:41:55

dounia
Nouveau membre
Date d'inscription: 23-08-2010
Messages: 3

Re: [RÉSOLU] Zend MVC et code Javascript (carousel 3D) ?

Bonjour,

Je suis entrain d'essayer de mettre en place votre méthode pour créer un carousel.
Cela dit, comme vous au départ mon javascript n'est pas chargé, il n'apparait pas dans le code source de la page, et lorsque je rajoute le

Code:

$this->view->jQuery()->enable();
        $this->view->jQuery()->uiEnable();

J'ai l'erreur:

Code:

Plugin by name 'JQuery' was not found in the registry; used paths: Zend_View_Helper_Navigation_: Zend/View/Helper/Navigation/ Candidats_View_Helper_: ./application/modules/candidats/views\helpers/ Pi_View_Helper_: library/Pi/View/Helper/ My_View_Helper_: library/My/View/Helper/ Zend_View_Helper_: Zend/View/Helper/;./application/modules/default/views\helpers/

J'utilise bien la librairie JQuery dans mon projet.
J'aimerai faire apparaître un carrousel sur une partie de ma page d'accueil.

Voilà comment je procède:

mon action-contrôleur:

Code:

public function logocarouselAction () {

      // On active l'utilisation de la librairie jQuery
     /*   $this->view->jQuery()->enable();
        $this->view->jQuery()->uiEnable();*/

        // On inclut les scripts pour afficher le carousel 3D
 $this->view->headScript()->appendFile(PUBLIC_PATH . 'js/cloud-carousel.1.0.4.js', $type = 'text/javascript');
 $this->view->headScript()->appendFile(PUBLIC_PATH . 'js/carousel.ini.js', $type = 'text/javascript');

 $monClient= new Clients();
    $tClients= $monClient->getClientsLogo();
    $tabPayant=$tClients;
    $clientPlus=new Clients();
    $theClients= $clientPlus->getNBClientsLogo();
    foreach ($theClients as $clients){
        $nbClienstLogo=$clients['NB'];

    }

    if ($nbClienstLogo<8){
        $clientL=new Clients();
        $clientP=$clientL->getClientsLogoPlus();
    }

    $tabPayant=$tabPayant+$clientP;
$tmpClients = array_chunk($tabPayant,8);
$tabPayant = $tmpClients[0];
    $this->view->tabPayant = $tabPayant;
}

J'ai le même carrousel.ini.js que vous , uniquement avec l'initialisation de la position et de vitesse de défilement du carrousel.

Chez moi, les images qui défilent sont dynamiques.

Dans mon script de vue:

Code:

 <div id = "carousel1" style="width:370px; height:370px; ">
                                        <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
                                        <!-- You can place links around these images -->
                                       <?php

                            $col[] = array_slice($this->tabPayant,0,4);
                            $col[] = array_slice($this->tabPayant,4,4);
                        
                                $i=0;
                        

                               foreach ($col as $co) {

                                   foreach ($co as $clients){

                                        $img_logo ='<img class = "cloudcarousel" src=" http://'.$_SERVER['HTTP_HOST'].$this->baseUrl().'/index/thumb?imagePath='. PUBLIC_PATH . 'images/logos/'. $clients['cli_id'] . '.' . $clients['cli_logo'].'&width=100&height=100" alt="'. $clients['client_rs'].'" />';
                                        if($clients['cli_web'] ) {
                                            echo '<a id="annonweb" href="'.$this->baseUrl().'/index/redirect?url='.$clients['cli_web'].'" target="_blank">'.$img_logo.'</a>';
                                        }
                                        else{
                                            echo $img_logo;
                                        }

                                        }
                                   }

                         ?>
                                     </div>

Que fait votre  js mousewheel ?

J'ai téléchargé la librairie ZendX et l'ai copié dans le repertoire library de mon projet ZEND. Faut-il faire autre chose pour le prendre en compte dans le projet ou l'autoloader s'en charge?

Pour l'instant, à l'affichage j'ai uniquement les images les une à côté des autres.

Merci d'avance pour votre aide.

Dernière modification par dounia (19-10-2010 17:59:03)

Hors ligne

 

 

Pages: 1

Pied de page des forums

Propulsé par PunBB
© Copyright 2002–2005 Rickard Andersson
Traduction par punbb.fr

Graphisme réalisé par l'agence Rodolphe Eveilleau
Développement par Kitpages