Forum CMS Made Simple FR
[Résolu]Module Gallery - Affichage image d'une gallerie parent jquery - 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]Module Gallery - Affichage image d'une gallerie parent jquery (/thread-2051.html)


[Résolu]Module Gallery - Affichage image d'une gallerie parent jquery - Piet - 17/06/2012

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: #1.10.3
#~ Url du site : www.reflexions3.be/cmsms
#~ Hébergeur / Soft : ovh
#~ Informations Système :
#~ #~ Version du CMS: #1.10.3
#~ #~ Url du site : www.reflexions3.be/cmsms
#~ #~ Hébergeur / Soft : ovh
#~ #~ Informations Système :
#~ #~ #~ Cms Version: 1.10.3
#~ #~ #~ Installed Modules:
#~ #~ #~ CMSMailer: 2.0.2
#~ #~ #~ CMSPrinting: 1.0
#~ #~ #~ FileManager: 1.2.0
#~ #~ #~ MenuManager: 1.7.7
#~ #~ #~ MicroTiny: 1.1.1
#~ #~ #~ ModuleManager: 1.5.3
#~ #~ #~ News: 2.12.3
#~ #~ #~ Search: 1.7
#~ #~ #~ ThemeManager: 1.1.4
#~ #~ #~ TinyMCE: 2.9.6
#~ #~ #~ Gallery: 1.5.3
#~ #~ #~ FormBuilder: 0.7.2
#~ #~ #~ CGExtensions: 1.29
#~ #~ #~ FrontEndUsers: 1.17.5
#~ #~ #~ CustomContent: 1.8.2
#~ #~ #~ Config Information:
#~ #~ #~ php_memory_limit:
#~ #~ #~ process_whole_template: false
#~ #~ #~ output_compression: false
#~ #~ #~ max_upload_size: 64000000
#~ #~ #~ default_upload_permission: 664
#~ #~ #~ url_rewriting: none
#~ #~ #~ 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.2.17
#~ #~ #~ md5_function: On (Vrai)
#~ #~ #~ gd_version: 2
#~ #~ #~ tempnam_function: On (Vrai)
#~ #~ #~ magic_quotes_runtime: Off (Faux)
#~ #~ #~ E_STRICT: 0
#~ #~ #~ memory_limit: 128M
#~ #~ #~ max_execution_time: 120
#~ #~ #~ output_buffering: On
#~ #~ #~ safe_mode: Off (Faux)
#~ #~ #~ file_uploads: On (Vrai)
#~ #~ #~ post_max_size: 64M
#~ #~ #~ upload_max_filesize: 64M
#~ #~ #~ session_save_path: /tmp (1777)
#~ #~ #~ session_use_cookies: On (Vrai)
#~ #~ #~ xml_function: On (Vrai)
#~ #~ #~ Server Information:
#~ #~ #~ Server Api: cgi
#~ #~ #~ Server Db Type: MySQL (mysql)
#~ #~ #~ Server Db Version: 5.1.49
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



Bonjour, c'est encore moi...

Mon client a revu sa copie pour ma galerie photo et il souhaite avoir le même gabarit pour la galerie parent et pour les galeries enfant.
Or, ce gabarit ne fonctionne pas pour les parents.

Voici la galerie enfant qui fonctionne:
http://www.reflexions3.be/cmsms/index.php?mact=Gallery,mb99c5,default,1&mb99c5dir=amenagements-prives%2FVillers%2F&mb99c5returnid=60&page=60

La galerie parent n'affiche pas l'image en grand:
http://www.reflexions3.be/cmsms/index.php?page=amenagements-prives

Je n'arrive pas à modifier mon gabarit suivant:
Code :
[== Indéfini ==]
<div class="gallery">
                <div id="gallery" class="content">
                    <div class="slideshow-container">
                        <div id="loading" class="loader"></div>
                        <div id="slideshow" class="slideshow">
</div>
                    </div>
                </div>
                <div id="thumbs" class="navigation">
                    <ul class="thumbs noscript">
{foreach from=$images item=image}

    <li>
    {if $image->isdir}
        <a href="{$image->file}" title="{$image->titlename}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
    {else}
   <a class="thumb" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="history"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
    {/if}

    </li>
{/foreach}
                        </ul>
                </div>
                <div style="clear: both;"></div>

</div>

La deuxième partie (else) fonctionne pour afficher les galeries enfant.
Comment faire à l'identique quand il s'agit de la galerie parent?

au cas ou, le code jquery:
Code :
[== JavaScript ==]
        <script type="text/javascript" src="uploads/js/jquery.galleriffic.js"></script>
        <script type="text/javascript" src="uploads/js/jquery.opacityrollover.js"></script>
<script type="text/javascript">
            jQuery(document).ready(function($) {
                // We only want these styles applied when javascript is enabled
                $('div.navigation').css({'width' : '342px', 'float' : 'right'});
                $('div.content').css('display', 'block');

                // Initially set opacity on thumbs and add
                // additional styling for hover effect on thumbs
                var onMouseOutOpacity = 0.67;
                $('#thumbs ul.thumbs li').opacityrollover({
                    mouseOutOpacity:   onMouseOutOpacity,
                    mouseOverOpacity:  1.0,
                    fadeSpeed:         'fast',
                    exemptionSelector: '.selected'
                });
                
                // Initialize Advanced Galleriffic Gallery
                var gallery = $('#thumbs').galleriffic({
                    delay:                     2500,
                    numThumbs:                 6,
                    preloadAhead:              10,
                    enableTopPager:            false,
                    enableBottomPager:         true,
                    maxPagesToShow:            7,
                    imageContainerSel:         '#slideshow',
                    controlsContainerSel:      '#controls',
                    captionContainerSel:       '#caption',
                    loadingContainerSel:       '#loading',
                    renderSSControls:          true,
                    renderNavControls:         true,
                    playLinkText:              'Play Slideshow',
                    pauseLinkText:             'Pause Slideshow',
                    prevLinkText:              '&lsaquo; Previous Photo',
                    nextLinkText:              'Next Photo &rsaquo;',
                    nextPageLinkText:          'Next &rsaquo;',
                    prevPageLinkText:          '&lsaquo; Prev',
                    enableHistory:             false,
                    autoStart:                 true,
                    syncTransitions:           true,
                    defaultTransitionDuration: 900,
                    onSlideChange:             function(prevIndex, nextIndex) {
                        // 'this' refers to the gallery, which is an extension of $('#thumbs')
                        this.find('ul.thumbs').children()
                            .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                            .eq(nextIndex).fadeTo('fast', 1.0);
                    },
                    onPageTransitionOut:       function(callback) {
                        this.fadeTo('fast', 0.0, callback);
                    },
                    onPageTransitionIn:        function() {
                        this.fadeTo('fast', 1.0);
                    }
                });
            });
        </script>

et les styles:
Code :
[== CSS ==]
div.content {
    /* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
    display: none;
    float: left;
    width: 598px;
}
div.content a, div.navigation a {
    text-decoration: none;
    color: #777;
}
div.content a:focus, div.content a:hover, div.content a:active {
    text-decoration: underline;
}
div.controls {
    margin-top: 0px;
    padding-top:60px;
    height: 23px;
    width:940px;
}
div.controls a {
    padding: 10px;
}
div.ss-controls {
    float: right;
}
div.nav-controls {
    float: right;
}
div.slideshow-container {
    position: relative;
    clear: both;
    height: 512px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('loader.gif');
    background-repeat: no-repeat;
    background-position: center;
    width: 598px;
    height: 512px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {

}
div.slideshow span.image-wrapper {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
div.slideshow a.advance-link {
    display: block;
    width: 598px;
    height: 512px; /* This should be set to be at least the height of the largest image in the slideshow */
    line-height: 0px; /* This should be set to be at least the height of the largest image in the slideshow */
    text-align: left;
    margin: 0;
    padding: 0;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
    text-decoration: none;
}
div.slideshow img {
    vertical-align: middle;
    border: 0px solid #ccc;
}
div.download {
    float: right;
}
div.caption-container {
    position: relative;
    clear: left;
    height: 75px;
}
span.image-caption {
    display: block;
    position: absolute;
    width: 940px;
    top: 0;
    left: 0;
}
div.caption {
    padding: 0px;
}
div.image-title {
    font-weight: bold;
    font-size: 1.4em;
}
div.image-desc {
    line-height: 1.3em;
    padding-top: 0px;
}
div.navigation {
    /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {
    clear: both;
    margin: 0 0 0px 0px;
    padding: 0;
    float: right;
}
ul.thumbs li {
    float: left;
    padding: 0;
    margin: 0 0 1px 1px;
    list-style: none;
}
a.thumb {
    padding: 0px;
    display: block;
    border: 0px solid #ccc;
}
ul.thumbs li.selected a.thumb {
    background: #000;
}
a.thumb:focus {
    outline: none;
}
ul.thumbs img {
    border: none;
    display: block;
}
div.pagination {
    clear: both;
}
div.navigation div.top {
    margin-bottom: 0px;
    height: 0px;
}
div.navigation div.bottom {
    margin-top: 0px;
    margin-bottom:0px;
    float: right;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
    display: block;
    float: left;
    margin-right: 10px;
    padding: 0px 0px 0px 0px;
    border: 0px solid #ccc;
}
div.pagination a:hover {
    background-color: #eee;
    text-decoration: none;
}
div.pagination span.current {
    font-weight: bold;
    color: #fff;
}
div.pagination span.ellipsis {
    border: none;
    padding: 0px 0 0px 0px;
}

Si quelqu'un est motivé pour plonger dans le code, je l'en remerci énormément d'avance !

Cordialement,
Pierre

[Résolu]Module Gallery - Affichage image d'une gallerie parent jquery - snatch1974 - 19/06/2012

il te manque déjà ta class "thumb" sur le <a> de la galerie parent... ça a peut-être un lien

[Résolu]Module Gallery - Affichage image d'une gallerie parent jquery - Pietdeziek - 19/06/2012

Quand je met le class="thumb" sur le <a>, le lien vers les galeries enfants sont supprimés au profit d'un N° (#1,#2,#3) et de plus, l'image principale ne s'affiche pas.

[Résolu]Module Gallery - Affichage image d'une gallerie parent jquery - Pietdeziek - 19/06/2012

OK, je commence à comprendre où le bas blesse…

Within the thumbnails container element, build your graceful degrading unordered list of thumbnails linking to the image slides as such:

div id="thumbs"
ul class="thumbs noscript"
li
a class="thumb" name="optionalCustomIdentifier" href="path/to/slide" title="your image title"
img src="path/to/thumbnail" alt="your image title again for graceful degradation"
/a
/li
... (repeat for every image in the gallery)
/ul
/div

la grande photo qui est affichée dans 'slideshowcontainer' est en réalité celle indiquée dans le Href de la partie 'thumb'.
Or pour la galerie parente, il ne fait pas le lien vers une image, mais vers une galerie d'où le problème d'affichage..

Maintenant comment le résoudre?

Qui veut aider un Newbee?

[Résolu]Module Gallery - Affichage image d'une gallerie parent jquery - Pietdeziek - 19/06/2012

Il y aurait peut-être moyen de 'forcer' l'affichage de l'image dans le div en insérant, dynamiquement dans le code, l'image en cours

code affiché:

Code :
[== XHTML ==]
<span class="image-wrapper current" style="opacity: 1;">
<a class="advance-link" title="villers-big-3.jpg" href="#4" rel="history">
<img alt="villers-big-3.jpg" src="uploads/images/Gallery/amenagements-prives/Villers/villers-big-3.jpg">
</a>
</span>

où title="le titre de l'image" href="lien vers galerie" et src ='image en cours'

C'est possible de faire une boucle là dessus?

Merci pour vos idées éclairées...

Cordialement,
Pierre

[Résolu]Module Gallery - Affichage image d'une gallerie parent jquery - Pietdeziek - 20/06/2012

Alors, on creuse, on creuse...

J'ai solutionné le problème des liens en ajoutant dans la boucle un div sur lequel je place le chemin vers la sous galerie. Je peux donc mettre mon class='thumb" et le slide show s'effectue.

Par contre je n'arrive pas à afficher l'image en grand.
Quand je met href vers le thumb, ça affiche bien le thumb correspondant:
Code :
[== Indéfini ==]
   <a class="thumb" href="{$image->thumb|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="history"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>

Mais quand je remplace par file il ne m'affiche rien, c'est donc qu'il ne trouve pas l'image
Code :
[== Indéfini ==]
   <a class="thumb" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="history"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>

Je suppose qu'il n'est pas impossible de récupérer l'image qui a servi a générer le thumb cover de la galerie, mais comment?

Quelqu'un a t-il une idée à me suggérer?

Cordialement,
Pierre

[Résolu]Module Gallery - Affichage image d'une gallerie parent jquery - bess - 20/06/2012

je ne suis pas forcement certain que ce soit $image->file

tente un {$image|print_r} pour connaitre toutes les propriétés de $image

[Résolu]Module Gallery - Affichage image d'une gallerie parent jquery - Pietdeziek - 20/06/2012

Si j'essaye dans la partie id Slideshow, il ne m'affiche rien.

Si je le met sur mon div, il me renvoie:

Code :
[== Indéfini ==]
<div style="cursor:pointer;" onclick="location.href='stdClass Object ( [fileid] => 123 [file] => http://www.reflexions3.be/cmsms/index.php?mact=Gallery,mb99c5,default,1&mb99c5dir=amenagements-prives%2FClavier%2F&mb99c5returnid=60&page=60 [filedate] => 2012-06-08 12:02:30 [filename] => Clavier [title] => clavier [titlename] => clavier [comment] => [fileorder] => 0 [active] => 1 [isdir] => 1 [galleryid] => 91 [gallery_url] => http://www.reflexions3.be/cmsms/index.php?mact=Gallery,mb99c5,default,1&mb99c5dir=amenagements-prives%2F&mb99c5returnid=60&page=60 [thumb] => uploads/images/GalleryThumbs/167-13.jpg [fields] => Array ( ) ) 1';">

Je ne sais pas trop quoi en faire, je l'avoue... Sad

[Résolu]Module Gallery - Affichage image d'une gallerie parent jquery - bess - 20/06/2012

$image->file = http://www.reflexions3.be/cmsms/index.php?mact=Gallery,mb99c5,default,1&mb99c5dir=amenagements-prives%2FClavier%2F&mb99c5returnid=60&page=60

Donc on ne peut pas afficher l'image par défaut d'une galerie enfant depuis la parent, seulement sa miniature. C'est en tout cas ce que j'en comprend.

[Résolu]Module Gallery - Affichage image d'une gallerie parent jquery - Piet - 22/06/2012

Pour finir, j'ai agrandi la taille du thumb principal et forcer l'affichage des vignette en plus petit, ça marche. par contre, c'est pas très ergonomique, je vais devoir me diriger vers une autre hiérarchie de gallerie...

Merci à tout ceux qui m'ont aidé,
Cordialement,

Pierre

P.S. j'adore CMSMS !