Forum CMS Made Simple FR
[Résolu] Aide (smarty) sur ma boucle {Gallery} - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : [Résolu] Aide (smarty) sur ma boucle {Gallery} (/thread-3366.html)

Pages : 1 2 3

[Résolu] Aide (smarty) sur ma boucle {Gallery} - lolox - 03/01/2015

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.11
#~ Url du site :
#~ Hébergeur / Soft :
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.11
#~ Installed Modules:
#~ CMSMailer: 5.2.2
#~ CMSPrinting: 1.0.5
#~ FileManager: 1.4.5
#~ MenuManager: 1.8.6
#~ MicroTiny: 1.2.7
#~ ModuleManager: 1.5.8
#~ News: 2.14.4
#~ Search: 1.7.11
#~ ThemeManager: 1.1.8
#~ CGExtensions: 1.44.4
#~ CGContentUtils: 1.4.3
#~ Gallery: 2.0.1
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ max_upload_size: 64000000
#~ url_rewriting: mod_rewrite
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.5.12
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 0
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 10M
#~ upload_max_filesize: 64M
#~ session_save_path: c:/wamp/tmp (0777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: apache2handler
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.6.17
#~ Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté
#~ Server Time Diff: Aucune différence de date du système de fichiers trouvées
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~






Bonjour à tous,


Après moult essais et les supports de votre forum j'ai enfin réussi et compris comment gérer plusieurs galeries indépendamment les unes des autres pour les module {Gallery}. Smile , mais voilà un autre j'ai un autre petit problème avec une boucle de base smarty :

Les images de ma nouvelle galerie s'affichent bien comme il le faut sur ma page (ouf!), le hic dans mon gabarit c'est que je n'arrive a faire afficher la bonne image ( en modal ou pop up ) lorsque que l'on clique dessus, ca m’ouvre bien la fenêtre en pop up mais toujours avec la 1er image de liste de la galerie, en gros j'ai toujours la même image qui s'affiche et pas celle qui est sélectionnée.


le gabarit Gallery :




Code :
[== HTML ==]

div class="row">
    {foreach from=$images item=image}
    <div class="col-md-4 portfolio-item">
    {* les images de ma galerie s'affichent bien sur la page *}
        <a data-toggle="modal" data-target="#myModal" href="">               
            <img class="img-responsive" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />
        </a>
        <h3>
            <a href="#">{$image->comment}</a>
        </h3>
        
        {* la fenetre qui s'ouvre en pop up comme elle le doit au clique souris *}
        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                    {* l'image qui s'ouvre dans le pop up  mon probleme *}
                        <img class="img-responsive" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />
                    </div>
                </div>
            </div>
        </div>
    </div>{/foreach}

</div>

la galerie

[Image: 234441gal1.jpg]

lors du clique de souris sur n'importe quelle image j'ai toujours ça

[Image: 852212gal2.jpg]


Ca fait 24h00 que je m'arranche les cheveux la desssus.


Merci par avance.

[Résolu] Aide (smarty) sur ma boucle {Gallery} - Jean le Chauve - 03/01/2015

Est-ce que tu pourrais nous donner le code html qui doit être généré ? Celui de l'exemple statique.

[Résolu] Aide (smarty) sur ma boucle {Gallery} - lolox - 03/01/2015

c'est bien ce code que tu veux ?

Code :
[== HTML ==]
<div class="container">
        <div class="row">
        <div class="col-md-4 portfolio-item">
        <a data-toggle="modal" data-target="#myModal" href="#myModal">            
              
                    <img class="img-responsive" src="uploads/images/Gallery/lolo/nike_running_menu.jpg" alt="nike_running_menu.jpg" />
                </a>
        <h3>
                    <a href="#"></a>
                </h3>

        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img class="img-responsive" src="uploads/images/Gallery/lolo/nike_running_menu.jpg" alt="nike_running_menu.jpg" />
                    </div>
                </div>
            </div>
        </div>
    </div>    <div class="col-md-4 portfolio-item">
        <a data-toggle="modal" data-target="#myModal" href="#myModal">            
              
                    <img class="img-responsive" src="uploads/images/Gallery/lolo/shot.jpg" alt="shot.jpg" />
                </a>
        <h3>
                    <a href="#"></a>
                </h3>

        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img class="img-responsive" src="uploads/images/Gallery/lolo/shot.jpg" alt="shot.jpg" />
                    </div>
                </div>
            </div>
        </div>
    </div>    <div class="col-md-4 portfolio-item">
        <a data-toggle="modal" data-target="#myModal" href="#myModal">            
              
                    <img class="img-responsive" src="uploads/images/Gallery/lolo/musicapp.png" alt="musicapp.png" />
                </a>
        <h3>
                    <a href="#"></a>
                </h3>

        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img class="img-responsive" src="uploads/images/Gallery/lolo/musicapp.png" alt="musicapp.png" />
                    </div>
                </div>
            </div>
        </div>
    </div>    <div class="col-md-4 portfolio-item">
        <a data-toggle="modal" data-target="#myModal" href="#myModal">            
              
                    <img class="img-responsive" src="uploads/images/Gallery/lolo/imore_app_ic.jpg" alt="imore_app_ic.jpg" />
                </a>
        <h3>
                    <a href="#"></a>
                </h3>

        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img class="img-responsive" src="uploads/images/Gallery/lolo/imore_app_ic.jpg" alt="imore_app_ic.jpg" />
                    </div>
                </div>
            </div>
        </div>
    </div>    <div class="col-md-4 portfolio-item">
        <a data-toggle="modal" data-target="#myModal" href="#myModal">            
              
                    <img class="img-responsive" src="uploads/images/Gallery/lolo/dribble_firstshot_2.jpg" alt="dribble_firstshot_2.jpg" />
                </a>
        <h3>
                    <a href="#"></a>
                </h3>

        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img class="img-responsive" src="uploads/images/Gallery/lolo/dribble_firstshot_2.jpg" alt="dribble_firstshot_2.jpg" />
                    </div>
                </div>
            </div>
        </div>
    </div>    <div class="col-md-4 portfolio-item">
        <a data-toggle="modal" data-target="#myModal" href="#myModal">            
              
                    <img class="img-responsive" src="uploads/images/Gallery/lolo/albumtry.jpg" alt="albumtry.jpg" />
                </a>
        <h3>
                    <a href="#"></a>
                </h3>

        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img class="img-responsive" src="uploads/images/Gallery/lolo/albumtry.jpg" alt="albumtry.jpg" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

Pourtant les images recuperées dans la div #myModal sont bien les bonnes au vu du code source que je viens de coller ici.

[Résolu] Aide (smarty) sur ma boucle {Gallery} - Jean le Chauve - 03/01/2015

Oui, laisse-moi quelques minutes pour l'étudier.

[Résolu] Aide (smarty) sur ma boucle {Gallery} - Jean le Chauve - 03/01/2015

Je vois que tu as bien compris le principe du foreach, félicitations Smile
Ton code est correct, je n'ai relevé que cette différence avec le code statique :
{* les images de ma galerie s'affichent bien sur la page *}
<a data-toggle="modal" data-target="#myModal" href="#myModal">

[Résolu] Aide (smarty) sur ma boucle {Gallery} - lolox - 03/01/2015

Meme en statique ça ouvre toujours la même image, je viens tester ici http://www.bootply.com/6rn1ajqMms

[Résolu] Aide (smarty) sur ma boucle {Gallery} - Jean le Chauve - 03/01/2015

Tu as la page de documentation de ce slider ?

[Résolu] Aide (smarty) sur ma boucle {Gallery} - lolox - 03/01/2015

Ici http://getbootstrap.com/javascript/#modals

[Résolu] Aide (smarty) sur ma boucle {Gallery} - Jean le Chauve - 03/01/2015

Ça ne m'aide pas beaucoup, as-tu un "live exemple" ?

[Résolu] Aide (smarty) sur ma boucle {Gallery} - lolox - 03/01/2015

comme l'impression que j'ai pas pris le bon code pour gérer les multiples fenêtre,

celui la est peut être plus approprié ?

http://ashleydw.github.io/lightbox/

[Résolu] Aide (smarty) sur ma boucle {Gallery} - Jean le Chauve - 03/01/2015

Si tu oubliais 2 minutes bootstrap et utilisais le gabarit PrettyPhoto, peut-être que cela correspondrait à tes besoins : {Gallery template="PrettyPhoto"}

[Résolu] Aide (smarty) sur ma boucle {Gallery} - lolox - 03/01/2015

Oui merci je voir si j'arrive avec prettyphoto.

[Résolu] Aide (smarty) sur ma boucle {Gallery} - Jean le Chauve - 03/01/2015

Tu n'as qu'à tester tous ceux fournis par défaut. Généralement, tu as la doc en commentaire dans les gabarits.

[Résolu] Aide (smarty) sur ma boucle {Gallery} - lolox - 03/01/2015

J ai trouvé le bon exemple que tu de demandais :

http://www.bootply.com/71401

c'est exactement ça que je cherche a avoir.

[Résolu] Aide (smarty) sur ma boucle {Gallery} - Jean le Chauve - 03/01/2015

Parfait, tu n'as plus qu'à tout mettre dans un nouveau gabarit et boucler la boucle Smile

[Résolu] Aide (smarty) sur ma boucle {Gallery} - lolox - 03/01/2015

Ouai Smile je vais essayer.


Merci.

[Résolu] Aide (smarty) sur ma boucle {Gallery} - lolox - 03/01/2015

Bon je suis de retour Smile

j'ai donc modifié le gabarit avec ce code :

Code :
[== HTML ==]

    <div class="row">{foreach from=$images item=image}
      <div class="col-md-4 col-sm-6"><a title="{$image->titlename}"><img src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" class="thumbnail img-responsive" /></a></div>{/foreach}      
    </div>
    
    
    
    


<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3 class="modal-title">Heading</h3>
    </div>
    <div class="modal-body">
        
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>


rentré le code jquery :


Code :
[== JavaScript ==]
$('.thumbnail').click(function(){
      $('.modal-body').empty();
      var title = $(this).parent('a').attr("title");
      $('.modal-title').html(title);
      $($(this).parents('div').html()).appendTo('.modal-body');
      $('#myModal').modal({show:true});
});


le truc que je comprends pas mais alors pas du tout, c'est que je dois rendre le lien qui englobe l'image inactif (enlever href="" comme ça >> <a title="Image 1"></a> ) sinon lorsque je clique sur l'image ça me ramène à la page d'accueil du site.

Sinon ça fonctionne mais j'ai plus le lien réactif ;(

Voyez-vous pourquoi ?

[Résolu] Aide (smarty) sur ma boucle {Gallery} - Jean le Chauve - 03/01/2015

Est-ce que tu as appelé toutes les librairies JS requises ?

[Résolu] Aide (smarty) sur ma boucle {Gallery} - lolox - 03/01/2015

Oui logiquement.


j'ai jquery.js et le bootstrap.js pas besoin d'autres.

En désactivant les liens, ma galerie fonctionne donc les js sont bien chargés et activés.

[Résolu] Aide (smarty) sur ma boucle {Gallery} - Jean le Chauve - 03/01/2015

Tu as besoin de laisser href="#".
Donne-moi le code source complet de la page.
Ou, plus simple, passe ton serveur en mode online et donne ton IP.

[Résolu] Aide (smarty) sur ma boucle {Gallery} - lolox - 03/01/2015

comment passer mon serveur online ?

je suis sous wamp. mon ip >> 77.193.254.158

[Résolu] Aide (smarty) sur ma boucle {Gallery} - Jean le Chauve - 03/01/2015

clic gauche sur l'icône wamp et clic sur le dernier menu : put online

[Résolu] Aide (smarty) sur ma boucle {Gallery} - Jean le Chauve - 03/01/2015

Quel projet ?

[Résolu] Aide (smarty) sur ma boucle {Gallery} - lolox - 03/01/2015

C'est fait. ip >>77.193.254.158

cmsms c'est le projet ^^

[Résolu] Aide (smarty) sur ma boucle {Gallery} - Jean le Chauve - 03/01/2015

Dans quel projet l'as-tu mis et quelle page ?
J'ai AGAPANTISS, cmsms et gardenwalktrought