[RESOLU] Module {Gallery} => Une image = Une galerie

[FlorentCMSMS]

Bonjour à tous,

Je viens demander un peu d'aide à la communauté après avoir passé quelques heures à me casser la tête sur mon petit soucis. Je vous explique, avec le module Gallery, je souhaiterais sur une page précise, que pour l'appel d'un galerie, il ne m'affiche que la première miniature de la galerie, et qu'au clic, je puisse visualiser l'ensemble de mes images grace à fancybox.

Pour nous aider :

http://fancybox.net/

Le code du gabarit "FancyBox" du module Gallery modifié pour ne garder que l'essentiel :

Code :

<div class="gallery">
{foreach from=$images item=image}
    <div class="imgs">
   <a class="group" href="{$image->file}" title="{$image->title}" rel="gallery"><img src="{$image->thumb}" alt="{$image->title}" /></a>
    </div>
{/foreach}
<div class="galleryclear">&nbsp;</div>
</div>

Enfin, le petit appel javascript de fancybox :

Code :

<script type="text/javascript" src="modules/Gallery/templates/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="modules/Gallery/templates/jquery/jquery.mousewheel.pack.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("a.group").fancybox({
        'speedIn':        300,
        'speedOut':    300,
        'overlayColor':    '#000',
        'overlayOpacity':    0.7
    });
});
</script>

J'ai essayé pas mal de choses avec Smarty ( {counter}, etc.. ) mais je n'arrive à rien. Cependant, sur la page de Fancybox, tout en bas, dans manual call, il est possible d'appeler une seule image ( pour une galerie complète).

Voici le code utilisé :

Code :

<a id="manual2" href="javascript:;" title="">Image gallery</a>
$("#manual2").click(function() {
$.fancybox([
'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
{
'href'  : 'http://farm5.static.flickr.com/
4005/4213562882_851e92f326.jpg',
'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
}

], {
'padding': 0,
'transitionIn': 'none',
'transitionOut': 'none',
'type'  : 'image',
'changeFade' : 0
});
});

Si l'un d'entre vous voit une solution ça pourrait m'aider fortement !


Merci à tous

[bess]

je ne vois pas ou tu bloques... surement par ce que j'ai une autre vision du problème

de ton appel JS

Code :

<script type="text/javascript" src="modules/Gallery/templates/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="modules/Gallery/templates/jquery/jquery.mousewheel.pack.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("a.group").fancybox({
        'speedIn':        300,
        'speedOut':    300,
        'overlayColor':    '#000',
        'overlayOpacity':    0.7
    });
});
</script>

ne conserve que le strict minimum :

Code :

<script type="text/javascript" src="modules/Gallery/templates/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="modules/Gallery/templates/jquery/jquery.mousewheel.pack.js"></script>

et tu rajoutes l'autre partie dans ton gabarit de gallery pour donner

Code :

{literal}
<script type="text/javascript">
$(document).ready(function() {
    $("a.group").fancybox({
        'speedIn':        300,
        'speedOut':    300,
        'overlayColor':    '#000',
        'overlayOpacity':    0.7
    });
});
</script>
{/literal}

<div class="gallery">
{foreach from=$images item=image}
    <div class="imgs">
   <a class="group" href="{$image->file}" title="{$image->title}" rel="gallery"><img src="{$image->thumb}" alt="{$image->title}" /></a>
    </div>
{/foreach}
<div class="galleryclear">&nbsp;</div>
</div>

déjà rien que ça, ça te permet de jouer sur la composition du JS avec smarty.

ensuite tu veux quoi ? afficher 1 miniature et faire en sorte que le JS affiche le reste ? ben c'est partis... après tout smarty te permet de faire quasi tout ce que tu veux non?

plutôt que d'itérer sur la liste entière des images ($images), fait apparaitre qu'une seule ligne, soit avec un break; soit en appelant le premier élément du tableau $images : "$images[0]->foo;" en PHP, a voir ce que ca donne en smarty + sécurité si pour une raison le tableau ne contiens aucune image...

pour ce qui est du JS, inspires toi de l'exemple que tu nous donnes toi même.

{literal}
<a id="manual2" href="javascript:;" title="">Image gallery</a>
$("#manual2").click(function() {
$.fancybox([
{/literal}
{foreach from=$images item=image}

{*'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg', *}
{*'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg', *}

'{$image->file}',
{/foreach}
{literal}
{
'href' : 'http://farm5.static.flickr.com/
4005/4213562882_851e92f326.jpg',
'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
}

], {
'padding': 0,
'transitionIn': 'none',
'transitionOut': 'none',
'type' : 'image',
'changeFade' : 0
});
});
{/literal}

bon il faut changer et ajuster mes idées mais à mon avis c'est loin d'être infaisable !

[Jean le Chauve]

Désolé de m'immiscer, mais il me semble que ce template pourrait convenir sans rien modifier d'autre :

Code :

<div class="gallery">
{foreach from=$images item=image}
// on appelle la première image
{if $smarty.foreach.image.first}<a class="gallery" rel="gallery" href="image01.jpg" >
<img src="image01_thumbnail.jpg" />voir la galerie</a>
<div style="display:none;">// on charge et on cache le reste des images
{else}<a class="group" href="{$image->file}" title="{$image->title}" rel="gallery"><img src="{$image->thumb}" alt="{$image->title}" /></a>
{/if}
{/foreach}
</div>
<div class="galleryclear">&nbsp;</div>
</div>

[bess]

exact mais on sort de l'exemple JS cité ci dessus, c'est pourquoi j'ai pas proposé..

mais c'est tout a fait valable également

a mois que les miniatures soient déjà mastoc... auquel cas faudrait mieux ne pas augmenter le poids de la page (display:none précharge l'image de mémoire non?

[Jean le Chauve]

Je pense que tu as raison, au niveau chargement ton système est plus optimisé.

[FlorentCMSMS]

Merci beaucoup à vous deux ! Je teste ça dans la journée . En réalité, j'ai tenté une manip dans l'idée de celle de Jean, mais j'ignorait la possibilité d'écrire

Code :

{if $smarty.foreach.image.first}

Je vous tiens au courant !

Merci à vous.

[FlorentCMSMS]

J'ai testé la méthode smarty, le

Code :

{if $smarty.foreach.image.first}

ne semble pas vouloir sélectionner la première images.

[FlorentCMSMS]

Problème résolut :

En réalité

Code :

{if $smarty.foreach.image.first}

ne fonctionne pas car l'objet ".first" fait référence à l'objet foreach, et non un des valeurs traitée. Il faut donc donner un nom au foreach ex

Code :

{foreach from=$images item=image name=test}

puis traiter le premier objet du "foreach" appelé "test", comme ceci :

Code :

{if $smarty.foreach.test.first}

Ce qui donne finalement :

Côté smarty/html

Code :

<div class="gallery">
{foreach from=$images item=image name=test}
{if $smarty.foreach.test.first}
<div class="imgs"><a class="group" href="{$image->file}" title="{$image->title}" rel="gallery"><img src="{$image->thumb}" alt="{$image->title}" /></a></div>

{else}<div class="imgs" style="display:none;"><a class="group" href="{$image->file}" title="{$image->title}" rel="gallery"><img src="{$image->thumb}" alt="{$image->title}" /></a></div>
{/if}
{/foreach}
<div class="galleryclear">&nbsp;</div>
</div>

Côté JS

Code :

<script type="text/javascript" src="modules/Gallery/templates/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="modules/Gallery/templates/jquery/jquery.mousewheel.pack.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("a.group").fancybox({
        'speedIn':        300,
        'speedOut':    300,
        'overlayColor':    '#000',
        'overlayOpacity':    0.7
    });
});
</script>

Côté optimisation, il me semble que FancyBox s'occupe de créer les thumbs et de charger au fur et à mesure les images. Donc le chargement de la page est raisonnable.


Merci à vous deux, pour ceux qui voudront, je pourrais mettre à dispo le gabarit de la Galerie en version xml.

[bess]

http://www.smarty.net/manual/fr/language...oreach.php

.first

first vaut TRUE si l'itération courante de {foreach} est l'initial.

Exemple 7-12. Exemple avec first
{* affiche LATEST sur le premier élément, sinon, l'id *}
<table>
{foreach from=$items key=myId item=i name=foo}
<tr>
<td>{if $smarty.foreach.foo.first}LATEST{else}{$myId}{/if}</td>
<td>{$i.label}</td>
</tr>
{/foreach}
</table>

ca devrait pourtant !

[Jean le Chauve]

C'est juste, j'avais oublié d'ajouter name=image, mais test va aussi ;-)