Sujet fermé
Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5

[Résolu] Aide (smarty) sur ma boucle {Gallery}
#1

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.
#2

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

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.
#4

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

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">
#6

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

Tu as la page de documentation de ce slider ?
#8

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

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

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/
#11

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

Oui merci je voir si j'arrive avec prettyphoto.
#13

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

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

http://www.bootply.com/71401

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

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

Ouai Smile je vais essayer.


Merci.
#17

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 ?
#18

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

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.
#20

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.
#21

comment passer mon serveur online ?

je suis sous wamp. mon ip >> 77.193.254.158
#22

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

Quel projet ?
#24

C'est fait. ip >>77.193.254.158

cmsms c'est le projet ^^
#25

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


Atteindre :


Utilisateur(s) parcourant ce sujet : 5 visiteur(s)