Forum CMS Made Simple FR
[Résolu] Comment intégrer le slider Supersized à CMSMS - 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] Comment intégrer le slider Supersized à CMSMS (/thread-2780.html)



[Résolu] Comment intégrer le slider Supersized à CMSMS - zounars - 03/06/2013

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.7
#~ Url du site : http://cmaxi.com/index.php?page=supersized
#~ Hébergeur / Soft : hostgator
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.7
#~ Installed Modules:
#~ CMSMailer: 5.2.1
#~ FileManager: 1.4.3
#~ MenuManager: 1.8.5
#~ ModuleManager: 1.5.5
#~ News: 2.12.12
#~ Printing: 1.1.2
#~ Search: 1.7.8
#~ ThemeManager: 1.1.8
#~ TinyMCE: 2.9.12
#~ CGSimpleSmarty: 1.5.2
#~ CGExtensions: 1.31.4
#~ CGBlog: 1.9.8
#~ FormBuilder: 0.7.3
#~ AdvancedContent: 0.9.4.3
#~ Gallery: 1.6
#~ ListIt2Portfolio: 1.3.2
#~ SiteMapMadeSimple: 1.2.6
#~ MleCMS: 1.10.5
#~ CGSmartImage: 1.10.1
#~ Guestbook: 1.3.3.2
#~ GBFilePicker: 1.3.3
#~ CMSPrinting: 1.0.4
#~ MicroTiny: 1.2.5
#~ JQueryTools: 1.2.4
#~ ListIt2: 1.3.2
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ max_upload_size: 64000000
#~ url_rewriting: yes
#~ 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 (True)
#~ gd_version: 2
#~ tempnam_function: On (True)
#~ magic_quotes_runtime: Off (False)
#~ E_STRICT: 0
#~ memory_limit: 256M
#~ max_execution_time: 30
#~ output_buffering: On
#~ safe_mode: Off (False)
#~ file_uploads: On (True)
#~ post_max_size: 64M
#~ upload_max_filesize: 64M
#~ session_save_path: /tmp (1777)
#~ session_use_cookies: On (True)
#~ xml_function: On (True)
#~ xmlreader_class: On (True)
#~ Server Information:
#~ Server Api: cgi-fcgi
#~ Server Db Type: MySQL (mysql)
#~ Server Db Version: 5.5.23
#~ Server Db Grants: Could not find a suitable "GRANT ALL" permission. This may mean you could have problems installing or removing modules. Or even adding and deleting items, including pages
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~


Bonjour à tous,
j'ai commencé l'intégration du slider jquery http://www.buildinternet.com/project/supersized/ dans cmsms mais je suis confronté à un problème: les images sont appelées directement dans le javascript du 'header'.

me référant à une discussion indiquée par le créateur du plugin, j'ai créé un tag pour utilisé les images contenues dans un dossier. Mais je n'ai pas d'images affichées.

Merci de jetter un coup d'oeil afin de me guider.

mon tag "supersized"

Code :
[== PHP ==]
//path to directory to scan
$directory = "uploads/images/";

//get all image files with a .jpg extension.
$images = glob($directory . "*.{jpg,JPG,jpeg,JPEG,png,PNG}", GLOB_BRACE);
//print each file name
$number = count($images);
$start = 0;

foreach($images as $image)
{
echo "{image : './" . $image . "', title : '" .$image . "'}";
if ($start < $number - 1)
    echo ", ";
$start = $start + 1;
}

mon gabarit de page

Code :
[== Indéfini ==]
{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

    <!--
        Supersized - Fullscreen Slideshow jQuery Plugin
        Version : 3.2.7
        Site    : www.buildinternet.com/project/supersized
        
        Author    : Sam Dunn
        Company : One Mighty Roar (www.onemightyroar.com)
        License : MIT License / GPL License
    -->

    <head>
<title>{sitename} - {title}</title>
{metadata}
{cms_stylesheet}
        
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="uploads/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="uploads/js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="uploads/js/supersized.shutter.min.js"></script>
<script type="text/javascript" src="uploads/js/super.js"></script>
{literal}
        <script type="text/javascript">
            
            jQuery(function($){
                
                $.supersized({
                
                    // Functionality
                    slideshow               :   1,            // Slideshow on/off
                    autoplay                :    1,            // Slideshow starts playing automatically
                    start_slide             :   1,            // Start slide (0 is random)
                    stop_loop                :    0,            // Pauses slideshow on last slide
                    random                    :     0,            // Randomize slide order (Ignores start slide)
                    slide_interval          :   3000,        // Length between transitions
                    transition              :   6,             // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                    transition_speed        :    1000,        // Speed of transition
                    new_window                :    1,            // Image links open in new window/tab
                    pause_hover             :   0,            // Pause slideshow on hover
                    keyboard_nav            :   1,            // Keyboard navigation on/off
                    performance                :    1,            // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                    image_protect            :    1,            // Disables image dragging and right click with Javascript
                                                              
                    // Size & Position                          
                    min_width                :   0,            // Min width allowed (in pixels)
                    min_height                :   0,            // Min height allowed (in pixels)
                    vertical_center         :   1,            // Vertically center background
                    horizontal_center       :   1,            // Horizontally center background
                    fit_always                :    0,            // Image will never exceed browser width or height (Ignores min. dimensions)
                    fit_portrait             :   1,            // Portrait images will not exceed browser height
                    fit_landscape            :   0,            // Landscape images will not exceed browser width
                                                              
                    // Components                            
                    slide_links                :    'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                    thumb_links                :    1,            // Individual thumb links for each slide
                    thumbnail_navigation    :   0,            // Thumbnail navigation
                    slides : {supersized}      ,
                                                
                    // Theme Options              
                    progress_bar            :    1,            // Timer for each slide                            
                    mouse_scrub                :    0
                    
                });
            });
            
        </script>
{/literal}
    </head>
<body>

    <!--Demo styles (you can delete this block)-->
    
    <ul id="demo-block">
        <li><a href="#" target="_blank"><img src="uploads/images/img/supersized-logo.png"/></a></li>
        <li>Photographers: <a href="http://cargocollective.com/mariakazvan" target="_blank">Maria Kazvan</a>, <a href="http://colindub.com" target="_blank">Colin Wojno</a>, &amp; <a href="http://brookeshaden.com/" target="_blank">Brooke Shaden</a></li>
    </ul>
    <div id="contenu">{menu}<br />{content}</div>
    
    <!--End of styles-->

    <!--Thumbnail Navigation-->
    <div id="prevthumb"></div>
    <div id="nextthumb"></div>
    
    <!--Arrow Navigation-->
    <a id="prevslide" class="load-item"></a>
    <a id="nextslide" class="load-item"></a>
    
    <div id="thumb-tray" class="load-item">
        <div id="thumb-back"></div>
        <div id="thumb-forward"></div>
    </div>
    
    <!--Time Bar-->
    <div id="progress-back" class="load-item">
        <div id="progress-bar"></div>
    </div>
    
    <!--Control Bar-->
    <div id="controls-wrapper" class="load-item">
        <div id="controls">
            
        <a id="play-button"><img id="pauseplay" src="uploads/images/img/pause.png"/></a>
        
        <!--Slide counter-->
        <div id="slidecounter">
            <span class="slidenumber"></span> / <span class="totalslides"></span>
        </div>
            
        <!--Slide captions displayed here-->
        <div id="slidecaption"></div>
            
        <!--Thumb Tray button-->
        <a id="tray-button"><img id="tray-arrow" src="uploads/images/img/button-tray-up.png"/></a>
            
        <!--Navigation-->
        <ul id="slide-list"></ul>
            
        </div>
    </div>

</body>
</html>

ma page temporaire est disponible est http://cmaxi.com/index.php?page=supersized

Merci à tous


[Résolu] Comment intégrer le slider Supersized à CMSMS - misterpink - 03/06/2013

Bonjour,

je ne sais pas si cela peut t'aider mais voici un topic sur le forum anglais qui permet d'integrer supersized sur cmsms :

http://forum.cmsmadesimple.org/viewtopic.php?f=4&t=65780


[Résolu] Comment intégrer le slider Supersized à CMSMS - zounars - 03/06/2013

Merci pour le lien.
je m'y mets tout de suite et je reviens pour les informations.


[Résolu] Comment intégrer le slider Supersized à CMSMS - zounars - 03/06/2013

Merci, j'ai réussi à l'intégrer en suivant le tuto.