[Kargal]

#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: #1.9.3
#~ Url du site :
#~ Hébergeur / Soft : 1&1
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Salut a tous. je viens demander un peu d'aide car je n'arrive pas à modifier le module gallery comme je le souhaite.

En fait, à la place d'ouvrir des lightbox, j'aimerai afficher l'image juste au dessus ou à coté.

Comme plusieurs galleries jquery dans ce style : http://galleria.aino.se/themes/classic/

J'aurais pu le faire jquery, mais j'aimerai utiliser le module gallery pour simplifier la tache aux clients.

Merci d'avances

[jissey]

Bonjour,
si tu as un js qui fait ça, rien ne t'empêche de faire ton propre gabarit.
Tu transfert tes js en ftp et tu créer un nouveau gabarit dan s gallery. Il y a tout ce qu'il faut:
le template, les css et l'appel des js.

[Kargal]

Ah? bah vu comme ça, ça a l'air simple uhu.... je vais ça alors

Mais si quelqu'un a déjà travaillé sur un gabarit comme ça, c'est bien venu

[Kargal]

Bon du coup j'ai testé avec le lien d'en haut, en mettant a peu près tout comme il faut (je pense). Cela me donne donc :

Source du gabarit :

Code :

{foreach from=$images item=image}
    {if $image->isdir}
        <a href="{$image->file}" title="{$image->titlename}">
            <img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a><br />
        {$image->titlename}
    {else}
   <a href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="gallery-{$galleryid}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
    {/if}
{/foreach}

Gabarit css

Code :

/*
* Galleria Classic Theme
* Copyright (c) 2010, Aino
* Licensed under the MIT license.
*/

.galleria-container {
    position: relative;
    overflow: hidden;
    background: #000;
}
.galleria-container img {
    -moz-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
.galleria-stage {
    position: absolute;
    top: 10px;
    bottom: 60px;
    left: 10px;
    right: 10px;
    overflow:hidden;
}
.galleria-thumbnails-container {
    height: 50px;
    bottom: 0;
    position: absolute;
    left: 10px;
    right: 10px;
    z-index: 2;
}
.galleria-carousel .galleria-thumbnails-list {
    margin-left: 30px;
    margin-right: 30px;
}
.galleria-thumbnails .galleria-image {
    height: 40px;
    width: 60px;
    background: #000;
    margin: 0 5px 0 0;
    border: 1px solid #000;;
    float: left;
    cursor: pointer;
}
.galleria-counter {
    position: absolute;
    bottom: 10px;
    left: 10px;
    text-align: right;
    color: #fff;
    font: normal 11px/1 arial,sans-serif;
    z-index: 2;
}
.galleria-loader {
    background: #000;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: none;
    background: url(classic-loader.gif) no-repeat 2px 2px;
}
.galleria-info {
    width: 50%;
    top: 15px;
    left: 15px;
    z-index: 2;
    position: absolute;
}
.galleria-info-text {
    background-color: #000;
    padding: 12px;
    display: none;
    /* IE7 */ zoom:1;
}
.galleria-info-title {
    font: bold 12px/1.1 arial,sans-serif;
    margin: 0;
    color: #fff;
    margin-bottom: 7px;
}
.galleria-info-description {
    font: italic 12px/1.4 georgia,serif;
    margin: 0;
    color: #bbb;
}
.galleria-info-close {
    width: 9px;
    height: 9px;
    position: absolute;
    top: 5px;
    right: 5px;
    background-position: -753px -11px;
    opacity: .5;
    filter: alpha(opacity=50);
    cursor: pointer;
    display: none;
}
.galleria-info-close:hover{
    opacity:1;
    filter: alpha(opacity=100);
}
.galleria-info-link {
    background-position: -669px -5px;
    opacity: .7;
    filter: alpha(opacity=70);
    position: absolute;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-color: #000;
}
.galleria-info-link:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}
.galleria-image-nav {
    position: absolute;
    top: 50%;
    margin-top: -62px;
    width: 100%;
    height: 62px;
    left: 0;
}
.galleria-image-nav-left,
.galleria-image-nav-right {
    opacity: .3;
    filter: alpha(opacity=30);
    cursor: pointer;
    width: 62px;
    height: 124px;
    position: absolute;
    left: 10px;
    z-index: 2;
    background-position: 0 46px;
}
.galleria-image-nav-right {
    left: auto;
    right: 10px;
    background-position: -254px 46px;
    z-index: 2;
}
.galleria-image-nav-left:hover,
.galleria-image-nav-right:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}
.galleria-thumb-nav-left,
.galleria-thumb-nav-right {
    cursor: pointer;
    display: none;
    background-position: -495px 5px;
    position: absolute;
    left: 0;
    top: 0;
    height: 40px;
    width: 23px;
    z-index: 3;
    opacity: .8;
    filter: alpha(opacity=80);
}
.galleria-thumb-nav-right {
    background-position: -578px 5px;
    border-right: none;
    right: 0;
    left: auto;
}
.galleria-thumbnails-container .disabled {
    opacity: .2;
    filter: alpha(opacity=20);
    cursor: default;
}
.galleria-thumb-nav-left:hover,
.galleria-thumb-nav-right:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #111;
}
.galleria-thumbnails-container .disabled:hover {
    opacity: 0.2;
    filter: alpha(opacity=20);
    background-color: transparent;
}

.galleria-carousel .galleria-thumb-nav-left,
.galleria-carousel .galleria-thumb-nav-right {
    display: block;
}
.galleria-thumb-nav-left,
.galleria-thumb-nav-right,
.galleria-info-link,
.galleria-info-close,
.galleria-image-nav-left,
.galleria-image-nav-right {
    background-image: url(classic-map.png);
    background-repeat: no-repeat;
}

Gabarit Javascript

Code :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.2.min.js"></script>
<script type="text/javascript">
    // Initialize Galleria
$(document).ready(function() {
    $('#galleria').galleria();
});
    // Load the classic theme
    Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
</script>

Sachant que tout le gabarit (js+css) se trouve dans un dossier galleria à la racine du site (en local).


J'ai bien les images, mais rien en css, pas de graphisme ni de grosse image au milieu....

hum y a t'il un problème quelque part?

[jissey]

oui, il y a un problème dans le gabarit:
il doit générer le HTML correspondre au CSS.

As-tu lu la doc?
http://galleria.aino.se/docs/1.2/getting...ick_start/
Tu dois mettre en concordance ton gabarit avec ce qui est expliqué dans la doc:

Code :

<div id="gallery">
{foreach from=$images item=image}    
   <a href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="gallery-{$galleryid}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
  
{/foreach}
</div>

C'est peut-être pas suffisant, il faut creuser...courage.

[Kargal]

Nikel j'ai suivi les indications comme indiqués dans leur documentation d'installation et hop ça marche.

Parcontre, il me met en grand les vignettes. Comment faire pourqu'il mette en taille réelle l'image?

merci encore !

Voici le code a rentrer dans le gabarit donc :

Source du gabarit :

Code :

<div id="gallery">
{foreach from=$images item=image}    
<img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />
{/foreach}
</div>

Rien dans le css

Gabarit Javascript :

Code :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="galleria/galleria-1.2.2.min.js"></script>

en sachant que j'ai mis le dossier galleria à la racine.

Et enfin dans le gabarit de page, mettre ce code avant la balise </body> afin de générer la gallerie et bien entendu la balise gallery dans votre page.

Code :

{literal}
<script type="text/javascript">
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
            $("#gallery").galleria({
                width: 500,
                height: 500
            });

</script>
{/literal}

[Kargal]

Petite rectification pour la source du gabarit.

il faut remplacer
src="{$image->thumb|escape:'url'|replace:'%2F':'/'}"
par
src="{$image->file|escape:'url'|replace:'%2F':'/'}"

ce qui nous donne en source de gabarit :

Code :

<div id="gallery">
{foreach from=$images item=image}    
<img src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />
{/foreach}
</div>

ET CA MARCHE DU TONERRE DE DIOU !!!!!!!!!!!


Franchement Made simple c'est le top du must des cms