Forum d'entraide PHPFrance

Venez poser vos questions PHP, MySQL, HTML5, CSS, Javascript, Gestion de serveurs à la communauté PHPfrance
https://forum.phpfrance.com/

[RESOLU] Personnalisation code php galerie photo

https://forum.phpfrance.com/viewtopic.php?f=8&t=272580

Page 1 sur 1

Personnalisation code php galerie photo

Posté : 12 déc. 2014, 18:52
par Magalux
Bonjour,
Je suis toute nouvelle sur le forum.
Je travaille dans une agence immo, pour laquelle je refait le site web vieillissant. J'ai déjà créé 2 sites, et j'ai des notions en php, css, etc ... mais je suis loin d'être une pro.

Voici ma question, j'ai donc une vitrine avec nos maisons : photo principale, description, galerie avec miniatures (voir image).

Image

Je souhaiterais pour la galerie, que au-dela de 4 photos, la 5ème soit par exemple une image représentant le symbole +, avec un lien qui afficherai la galerie en question. Car le problème aujourd'hui est que pour les maisons avec beaucoup de photos, l'annonce est bien trop surchargée et les miniatures reviennent évidement à la ligne, pas très esthétique .... :?

Extrait de mon doc php avec le code de la galerie :

Code : Tout sélectionner

<div class="table_gallery table_07"> <?php if (count($house_photos) > 0) { ?> <div class="gallery_img"> <?php for ($i = 0;$i < count($house_photos);$i++) { ?> <div class="thumbnail viewHouses" style="width: <?php echo $component_configuration['fotogal']['width'];?>px; height: <?php echo $component_configuration['fotogal']['high'];?>px;" > <a href="<?php echo $mosConfig_live_site; ?>/components/com_houses/photos/<?php echo picture_thumbnail_rem($house_photos[$i]->main_img, $component_configuration['fotoupload']['high'], $component_configuration['fotoupload']['width']); ?>" data-lightbox="roadtrip" title="photo" > <img alt="<?php echo $row->htitle; ?>" title="<?php echo $row->htitle; ?>" src="./components/com_houses/photos/<?php echo picture_thumbnail_rem($house_photos[$i]->main_img, $component_configuration['fotogal']['high'], $realestatemanager_configuration['fotogal']['width']); ?>" style = "vertical-align:middle;" /> </a> </div> <?php } ?> </div> <?php } ?> </div>
Je ne l'ai pas créé.

Merci de votre aide

Re: Personnalisation code php galerie photo

Posté : 12 déc. 2014, 19:12
par Nestecha
Pourquoi ne pas faire ça ?
<div class="table_gallery table_07">
        <?php if (count($house_photos) > 0)
        { ?>
            <div class="gallery_img">
                <?php for ($i = 0;$i < count($house_photos);$i++) { ?>
                    <?php if ($i == 4) {
                        echo '<div><a href="#lienDeGallerie"><img src="imagePlus.jpg"></a></div>';
                        break; // on sort de la boucle si $i == 4 pour ne pas écrire d'autres images
                    } ?>
                    <div class="thumbnail viewHouses" style="width: <?php echo $component_configuration['fotogal']['width'];?>px; height: <?php echo $component_configuration['fotogal']['high'];?>px;" >
                        <a href="<?php echo $mosConfig_live_site; ?>/components/com_houses/photos/<?php echo picture_thumbnail_rem($house_photos[$i]->main_img, $component_configuration['fotoupload']['high'], $component_configuration['fotoupload']['width']); ?>" data-lightbox="roadtrip" title="photo" >
                            <img alt="<?php echo $row->htitle; ?>" title="<?php echo $row->htitle; ?>" src="./components/com_houses/photos/<?php echo picture_thumbnail_rem($house_photos[$i]->main_img, $component_configuration['fotogal']['high'], $realestatemanager_configuration['fotogal']['width']); ?>" style = "vertical-align:middle;" />
                        </a>
                    </div>
                <?php  }  ?>
            </div>
        <?php } ?>
    </div>
En remplaçant <div><img src="imagePlus.jpg"></div> par le code que tu désires avoir au delà de 4 images.

Re: Personnalisation code php galerie photo

Posté : 13 déc. 2014, 11:13
par Magalux
Bonjour,
Merci de ta réponse rapide.
Effectivement la formule conditionnelle fonctionne parfaitement :D
Mon souci est pour le lien vers ma galerie, si je mets juste <img src="imagePlus.jpg"> c'est ok mon image s'affiche sans lien, normal tu vas me dire :lol: , mais si je l'englobe dans le <a href="#lienDeGallerie"> là j'ai une page blanche ...

Re: Personnalisation code php galerie photo

Posté : 13 déc. 2014, 11:16
par Magalux
Non je rectifie, le problème vient de mon lien, car si je mets un lien vers une page classique ça fonctionne ...
Donc le soucis vient de mon lien vers ma lightbox.

C'est à dire qu'il ne doit pas savoir quelle image charger.
Lorsque que je mets le code de la galerie complet j'ai une page blanche : 
<a href="<?php echo $mosConfig_live_site; ?>/components/com_house/photos/<?php echo picture_thumbnail_rem($house_photos[$i]->main_img, $component_configuration['fotoupload']['high'], $component_configuration['fotoupload']['width']); ?>" data-lightbox="roadtrip" title="photo" >
<img alt="<?php echo $row->htitle; ?>" title="<?php echo $row->htitle; ?>" src="./components/com_house/photos/<?php echo picture_thumbnail_rem($house_photos[$i]->main_img, $component_configuration['fotogal']['high'], $component_configuration['fotogal']['width']); ?>" style = "vertical-align:middle;" />
Mais si j'enlève la partie désignant la miniature pour laisser ceci :
<a href="<?php echo $mosConfig_live_site; ?>/components/com_house/photos/" data-lightbox="roadtrip" title="photo" >
Je n'ai plus une page blanche, mais la lightbox qui s'ouvre sans rien. Comment faire pour qu'elle s'ouvre sur une des photos, par exemple la 1ère de la galerie ?

Re: Personnalisation code php galerie photo

Posté : 13 déc. 2014, 15:01
par Nestecha
Ca c'est un soucis par rapport à ta libraire lightbox. Tu utilises laquelle ? Tu as déjà réussi à la faire fonctionner ? Si oui, pourrais tu me montrer un bout de code qui fonctionne ?

Re: Personnalisation code php galerie photo

Posté : 13 déc. 2014, 15:03
par Nestecha
Je crois avoir trouvé.

Change :
<a href="<?php echo $mosConfig_live_site; ?>/components/com_house/photos/<?php echo picture_thumbnail_rem($house_photos[$i]->main_img, $component_configuration['fotoupload']['high'], $component_configuration['fotoupload']['width']); ?>" data-lightbox="roadtrip" title="photo" >
<img alt="<?php echo $row->htitle; ?>" title="<?php echo $row->htitle; ?>" src="./components/com_house/photos/<?php echo picture_thumbnail_rem($house_photos[$i]->main_img, $component_configuration['fotogal']['high'], $component_configuration['fotogal']['width']); ?>" style = "vertical-align:middle;" />
En :
<a href="<?php echo $mosConfig_live_site; ?>/components/com_house/photos/<?php echo picture_thumbnail_rem($house_photos[$i]->main_img, $component_configuration['fotoupload']['high'], $component_configuration['fotoupload']['width']); ?>" data-lightbox="<?= $row->htitle; ?>" title="photo" >
<img alt="<?php echo $row->htitle; ?>" title="<?php echo $row->htitle; ?>" src="./components/com_house/photos/<?php echo picture_thumbnail_rem($house_photos[$i]->main_img, $component_configuration['fotogal']['high'], $component_configuration['fotogal']['width']); ?>" style = "vertical-align:middle;" />
data-lightbox doit être égal à l'attribut "alt" présent dans ta balise <img>

Re: Personnalisation code php galerie photo

Posté : 13 déc. 2014, 15:29
par Magalux
Toujours le même problème .... :evil:

Voici la page sur laquelle se trouve la galerie : http://essaisitemag.hebergratuit.net/jo ... nouveautes
Celle du dessus étant la base fonctionnant bien, et celle en dessous est celle modifiée pour n'afficher que 4 images.

Je te joins le php complet, la 1ere galerie est lignes 523 à 539 et la seconde est lignes 541 à 562.
http://www.partage-facile.com/HFQ258P29 ... t.php.html (Désolée je ne peux pas joindre des fichiers php, pdf ... du coup je l'ai hébergé sur ce site)
Ça sera surement plus simple :mrgreen:

Merci :)

Re: Personnalisation code php galerie photo

Posté : 14 déc. 2014, 03:57
par Nestecha
Après avoir regardé sur le lien, la gallerie avec un plus, c'est ce que tu voulais faire non ? Parce que ça fonctionne parfaitement là ?

Re: Personnalisation code php galerie photo

Posté : 14 déc. 2014, 10:01
par Magalux
L'aspect oui c'est tout à fait ça, mais je n'arrive pas à faire ouvrir la lightbox en cliquant sur le plus.

Re: Personnalisation code php galerie photo

Posté : 15 déc. 2014, 16:13
par Magalux
Hello !
Hello j'ai modifié le code malheureusement mon message ne passe pas et est considéré comme du spam pour une raison que j'ignore, je t'envoi donc mon avancement par MP !
<div class="table_gallery table_07">
                    <?php if (count($house_photos) > 0)
                    { ?>
                        <div class="gallery_img">
                            <?php for ($i = 0;$i < count($house_photos);$i++) { ?>
                                <?php if ($i == 4) { ?>
                                    <div class="thumbnail viewHouses" style="width: <?php echo $realestatemanager_configuration['fotogal']['width'];?>px; height: <?php echo $realestatemanager_configuration['fotogal']['high'];?>px;" >
                                        <a href="<?php echo $mosConfig_live_site; ?>/components/com_realestatemanager/photos/<?php echo picture_thumbnail_rem($house_photos[$i]->main_img, $realestatemanager_configuration['fotoupload']['high'], $realestatemanager_configuration['fotoupload']['width']); ?>" data-lightbox="roadtrip" title="photo" >
                                            <img alt="Plus" title="Plus" src="http://www.essaisitemag.hebergratuit.net/joomla_agence/components/com_realestatemanager/images/plus.png" style = "vertical-align:middle;" />
                                        </a>
                                    </div>
                               <?php break; } ?>
                                <div class="thumbnail viewHouses" style="width: <?php echo $realestatemanager_configuration['fotogal']['width'];?>px; height: <?php echo $realestatemanager_configuration['fotogal']['high'];?>px;" >
                                    <a href="<?php echo $mosConfig_live_site; ?>/components/com_realestatemanager/photos/<?php echo picture_thumbnail_rem($house_photos[$i]->main_img, $realestatemanager_configuration['fotoupload']['high'], $realestatemanager_configuration['fotoupload']['width']); ?>" data-lightbox="roadtrip" title="photo" >
                                        <img alt="<?php echo $row->htitle; ?>" title="<?php echo $row->htitle; ?>" src="./components/com_realestatemanager/photos/<?php echo picture_thumbnail_rem($house_photos[$i]->main_img, $realestatemanager_configuration['fotogal']['high'], $realestatemanager_configuration['fotogal']['width']); ?>" style = "vertical-align:middle;" />
                                    </a>
                                </div>
                            <?php } ?>
                        </div>
                    <?php } ?>
                </div>
Peux tu essayer ça ? J'ai remplacé toute la seconde gallerie.

Tout est good =D>
Merci de votre aide à tous les deux :D

PS : Je vais ouvrir un autre post pour une question en lien avec la photo principale, au vu de votre efficacité je suis sure que ça sera du gâteau pour vous.

Re: [RESOLU] Personnalisation code php galerie photo

Posté : 08 janv. 2015, 19:35
par Magalux
Je remonte le sujet pour une petite précision, et le sujet est définitivement clos :D

Je m'étais aperçue que lorsque je cliquais sur une miniature, la lightbox s'ouvrait mais en y regardant de plus près le nombre de photos en bas, c'est indiqué plus de photos que n'en contenait l'annonce, car en faite on pouvait faire défiler les photos de toutes les annonces regroupées ! Pas très logique ...

Fluffyqueen m'a apporté le pourquoi du comment et par conséquent j'ai pu en déduire la solution.
Fluffyqueen :

Oui c'est normal. C'est parce qu'il faut changer le data-lightbox pour chaque nouvelle série de photo.
Ici, chacune de tes 13 images possèdent l'attribut data-lightbox = "roadtrip". Du coup elles sont considérées par lightbox comme faisant parties d'une seule série de photos.

En fait, lightbox va chercher dans toute la page les images d'un attribut X, et lorsqu'on cliquera sur une image, il affichera celle-ci ainsi que toutes les autres qui ont le même attribut. Donc si une image a un attribut X sur une page, et une autre a un attribut Y, elles seront dans deux galleries différentes pour lightbox, et elles seront donc traitées séparément.

Ca ne te dérange donc pas lorsque tu cliques en détail sur le bien, puisque lightbox ne voit que les images de l'annonce ayant le même attribut (puisqu'il n'y a que ces images là dans toute la page).

Par contre lorsque tu as plusieurs biens sur la page (celle où tu as un soucis), là c'est dérangeant. Donc en pratique, tu veux changer "roadtrip", en autre chose pour le deuxième bien, puis en autre chose encore pour le troisième bien. Mais les images d'un même bien devront avoir le même attribut.
Il a donc juste fallu remplacer "roadtrip" par un echo de la variable correspondant à la référence du bien (qui est unique), ce qui donne le code final suivant :
                        <div class="gallery_img">
                            <?php for ($i = 0;$i < count($house_photos);$i++) { ?>
                                <?php if ($i == 3) { ?>
                                    <div class="thumbnail viewHouses" style="width: <?php echo $realestatemanager_configuration['fotogal']['width'];?>px; height: <?php echo $realestatemanager_configuration['fotogal']['high'];?>px;" >
                                        <a href="<?php echo $mosConfig_live_site; ?>/components/com_realestatemanager/photos/<?php echo picture_thumbnail_rem($house_photos[$i]->main_img, $realestatemanager_configuration['fotoupload']['high'], $realestatemanager_configuration['fotoupload']['width']); ?>" data-lightbox="<?php echo $row->houseid; ?>" title="photo" >
                                            <img alt="Plus" title="Plus" src="http://www.essaisitemag.hebergratuit.net/joomla_agence/components/com_realestatemanager/images/plus.png" style = "vertical-align:middle; width: 40px;" />
                                        </a>
                                    </div>
                               <?php break; } ?>
                                <div class="thumbnail viewHouses" style="width: <?php echo $realestatemanager_configuration['fotogal']['width'];?>px; height: <?php echo $realestatemanager_configuration['fotogal']['high'];?>px;" >
                                    <a href="<?php echo $mosConfig_live_site; ?>/components/com_realestatemanager/photos/<?php echo picture_thumbnail_rem($house_photos[$i]->main_img, $realestatemanager_configuration['fotoupload']['high'], $realestatemanager_configuration['fotoupload']['width']); ?>" data-lightbox="<?php echo $row->houseid; ?>" title="photo" >
                                        <img alt="<?php echo $house->htitle; ?>" title="<?php echo $row->htitle; ?>" src="./components/com_realestatemanager/photos/<?php echo picture_thumbnail_rem($house_photos[$i]->main_img, $realestatemanager_configuration['fotogal']['high'], $realestatemanager_configuration['fotogal']['width']); ?>" style = "vertical-align:middle;" />
                                    </a>
                                </div>
                            <?php } ?>
                        </div>
Merci pour l'aide et les explications.
Heures au format UTC+02:00
Page 1 sur 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/