Forum CMS Made Simple FR
[Résolu] Problème Galerie photo suite à URL Rewriting - 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] Problème Galerie photo suite à URL Rewriting (/thread-2369.html)


[Résolu] Problème Galerie photo suite à URL Rewriting - Piet - 20/11/2012

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.2.1
#~ Url du site : www.reflexions3.be
#~ Hébergeur / Soft : OVH
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.2.1
#~ Installed Modules:
#~ CMSMailer: 5.2.1
#~ CMSPrinting: 1.0.3
#~ FileManager: 1.4.1
#~ MenuManager: 1.8.4
#~ MicroTiny: 1.2.3
#~ ModuleManager: 1.5.5
#~ News: 2.12.9
#~ Search: 1.7.7
#~ ThemeManager: 1.1.7
#~ TinyMCE: 2.9.11
#~ Gallery: 1.6
#~ FormBuilder: 0.7.3
#~ CGExtensions: 1.31.2
#~ FrontEndUsers: 1.20
#~ CustomContent: 1.8.3
#~ MysqlDump: 1.2.4
#~ CGSmartImage: 1.9.5
#~ FileBackup: 0.5
#~ SiteMapMadeSimple: 1.2.6
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ output_compression:
#~ 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.3.16
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 8192
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: 4096
#~ 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)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: cgi-fcgi
#~ Server Db Type: MySQL (mysql)
#~ Server Db Version: 5.1.49
#~ Server Db Grants: Impossible de trouver un privilège "GRANT ALL". Cela peut signifier que vous pourriez avoir des problèmes pour installer ou retirer des modules, ou encore l 'ajout et la suppression d'éléments, y compris les pages.
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



Bonjour,

Encore moi...

J'ai effectué un URL Rewriting sur mon site, tout fonctionne bien sauf la galerie photo.
Je ne trouve pas d'où vient le problème.
La galerie de base s'affiche bien, avec les vignettes de mes sous galleries mais la sous-galerie déconne...

Il s'agit d'un gabarit basé sur Jquery Galleriffic.

Voici la source:
Code :
[== XHTML ==]
<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}
{cms_module module='CGSmartImage' alias='test' src=$image->file|rawurldecode assign='CGS'}
<li>
<a class="thumb" href="{$CGS|regex_replace:'#<img\ssrc=\"(.*)\"\swidth=\".*\"\sheight=\".*\"\salt=\".*\"/>#':'$1'}" title="{$image->titlename}" rel="history">
<img src="{$image->thumb|rawurldecode|replace:'//thumb_':'/thumb_'}" alt="{$image->titlename}" /></a>
</li>
{/foreach}
                        </ul>
<a href="javascript:history.back()" style="margin:0 0 0 15px; color: #999;" title="Revenir à l'index">Revenir à l'index</a>
                </div>
                <div style="clear: both;"></div>

</div>

Ma feuille de style:
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;
text-align: right;
}
div.content a:focus, div.content a:hover, div.content a:active {
    text-decoration: underline;
    color: #ffffff;
}
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 */
        overflow:hidden;
}
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 */
        overflow:hidden;
}
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 0 0 0;
    padding: 0;
        overflow:hidden;
}
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;
}
.slideshow_image{
    width: 598px;
}

et mon javascript:
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>

Quelqu'un pourrait-il m'aider à trouver d'où ça provient? Que dois-je adapter? Je suppose que l'url rewriting 'casse' mon code quelque part, mais je ne trouve pas la source du problème...

Merci pour votre aide précieuse
Piet

[Résolu] Problème Galerie photo suite à URL Rewriting - Jean le Chauve - 20/11/2012

Je viens d'inspecter la page : http://www.reflexions3.be/gallery/amenagements-prives/Liege-02/1-9-69 avec firebug.
Il ne trouve pas tes js car tu annonces un mauvais chemin :
ex :"NetworkError: 404 Not Found - http://www.reflexions3.be/gallery/amenagements-prives/Liege-02/uploads/js/jquery.jscrollpane.min.js\"
Tu tournes avec jquery 1.4.4, et nous sommes à 1.8.3
Mélanger des id et class du même nom (<div id="slideshow" class="slideshow">, <div id="thumbs"><ul class="thumbs">,<div id="controls" class="controls">) n'est sans doute pas des plus efficaces pour le codage, cela augmente la possibilité d'erreurs.
Tu as deux fois <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> dans ta head.

[Résolu] Problème Galerie photo suite à URL Rewriting - Jean le Chauve - 20/11/2012

Donne tes paramètres globaux dans l'admin et la head du gabarit (appel des js).

Tu as également des apostrophes doubles qui se promènent partout dans les appels aux images (title) :
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.reflexions3.be%2Famenagements%2FAmenagements-Bureaux-et-commerces&charset=%28detect+automatically%29&doctype=Inline&group=0
Si tu mets les valeurs de alt ou du title entre apostrophes doubles, tu ne peux jamais en utiliser dans la valeur :
Fleron Pizzeria "l'Etna", tu oublies et tu écris Fleron Pizzeria l'Etna

[Résolu] Problème Galerie photo suite à URL Rewriting - Piet - 20/11/2012

Merci pour l'info, je comprends apparemmentd'où vient le problème.
Les urls vers mon script sont réécrites également,

Je pars de ça dans mon gabarit:
Code :
[== JavaScript ==]
        <script type="text/javascript" src="/uploads/js/jquery.galleriffic.js"></script>
        <script type="text/javascript" src="/uploads/js/jquery.opacityrollover.js"></script>

et j'arrive à ça:
http://www.reflexions3.be/gallery/amenagements-prives/Fleron/uploads/js/....


J'ai essayé de partir de la racine

/homez.520/reflexioe/www/uploads/js/jquery.galleriffic.js

Mais il réécrit ça:
http://www.reflexions3.be/homez.520/reflexioe/www/uploads/js/jquery.galleriffic.js

Comment puis-je faire pour indiquer le chemin complet vers les scripts dans mon gabarit?
Est-il possible de spécifier ça quelque part?


Merci de votre aide Wink


Je sais qu'il y a des erreurs de code, mais n'étant pas développeur, si ça tourne ça me va Wink
Ca marchait sans URL rewriting.

[Résolu] Problème Galerie photo suite à URL Rewriting - Piet - 20/11/2012

Et une fois de plus, merci seigneur pour le tuyaux!

J'ai mis l'appel des JS dans le gabarit général et ça remarche !

Trop cool Wink

[Résolu] Problème Galerie photo suite à URL Rewriting - Jean le Chauve - 20/11/2012

Quand on écrit un chemin pour un script dans les paramètres globaux, il faut indiquer l'url complète de ton site :
http://www.tondomaine.com/cheminverstonscript/...