"Responsive-news-Carousel" en panne

"Responsive-news-Carousel" en panne - 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 : "Responsive-news-Carousel" en panne (/thread-3527.html)

"Responsive-news-Carousel" en panne - jcpapa - 04/06/2015

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.12
#~ Url du site : localhost
#~ Hébergeur / Soft : ovh
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.12.0 Pohnpei_9910-Fr
#~ Modules Installés:
#~ CMSMailer: 5.2.2
#~ CMSPrinting: 1.0.5
#~ FileManager: 1.4.5
#~ MenuManager: 1.8.6
#~ MicroTiny: 1.2.9
#~ ModuleManager: 1.5.8
#~ News: 2.15.1
#~ Search: 1.7.12
#~ ThemeManager: 1.1.8
#~ TinyMCE: 2.9.13
#~ Captcha: 0.5.2
#~ FormBuilder: 0.8.1.1
#~ CGExtensions: 1.48
#~ CGSmartImage: 1.19.1
#~ Gallery: 2.0.2
#~ Cataloger: 0.11.3
#~ SiteMapMadeSimple: 1.2.8
#~ CGContentUtils: 1.5
#~ CGEcommerceBase: 1.5.2
#~ FrontEndUsers: 1.28.3
#~ CGSimpleSmarty: 1.9
#~ CustomContent: 1.10
#~ JQueryTools: 1.3.5.2
#~ Products: 2.23
#~ Cart: 1.10.1
#~ CGPaymentGatewayBase: 1.3.1
#~ Orders: 1.16.5
#~ SelfRegistration: 1.9.2
#~ FRTaxes: 1.2.2
#~ PaypalGateway: 2.4
#~ Information Configuration:
#~ php_memory_limit:
#~ process_whole_template:
#~ 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
#~ Information Php:
#~ phpversion: 5.5.12
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 0
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 32M
#~ upload_max_filesize: 64M
#~ session_save_path: c:/wamp/tmp (0777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Information Serveur:
#~ Server Api: apache2handler
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.6.17
#~ Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté
#~ Server Time Diff: Aucune différence de date du système de fichiers trouvées
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour... Big Grin

Me revoilà...

J'ai un souci sur avec un gabarit de news (fourni dans Foundation) qui fonctionnait parfaitement jusqu'à lors. Je l'utilise sur deux sites et "curieusement", il me fait la même panne sur chacun.
Il s'agît d'un slide des news en page d'accueil. Voici le gabarit en question :

Code :
[== Indéfini ==]

<!-- Start News Display Template -->

{*

Configuration options for the caroussel

Example: <ul data-orbit data-options="timer_speed:3000; bullets:false;">

Available parameters:

  timer_speed: 10000,

  animation_speed: 500,

  bullets: true,

  stack_on_small: true,

  container_class: 'orbit-container',

  stack_on_small_class: 'orbit-stack-on-small',

  next_class: 'orbit-next',

  prev_class: 'orbit-prev',

  timer_container_class: 'orbit-timer',

  timer_paused_class: 'paused',

  timer_progress_class: 'orbit-progress',

  slides_container_class: 'orbit-slides-container',

  bullets_container_class: 'orbit-bullets',

  bullets_active_class: 'active',

  slide_number_class: 'orbit-slide-number',

  caption_class: 'orbit-caption',

  active_slide_class: 'active',

  orbit_transition_class: 'orbit-transitioning'

*}

<div id="carousel">

    <div class="small-12 columns">

    <ul data-orbit data-options="timer_speed:3000; bullets:false; stack_on_small: true,">

        {foreach from=$items item=entry}

        <li>

      <div class="small-12 small-centered columns"> 

        {foreach from=$entry->fields item='field'}

            {if $field->type == 'file' && $field->value != ''}

            {if isset($entry->fields)}

             <a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}"><img class="right" src="{CGSmartImage src1=$entry->file_location src2=$field->value alias1='large_thumbnail' notag=1}" alt="{$entry->title|cms_escape}" /></a>

            {/if}

            {/if}

        {/foreach}

            <h4 class="noMarginBottom"><strong><a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a></strong></h4>

        {if $entry->summary}

        <p class="NewsSummary">{eval var=$entry->summary}</p>

        {elseif $entry->content}

            {eval var=$entry->content}

        {/if}

    </div>

        </li>

        {/foreach}

    </ul>

    </div>

</div>

Le problème rencontré est que les sommaires de news s'affichent en cascade alors qu'elles devraient arriver automatiquement en slide de droite à gauche !?
J'ai épluché le gabarit Rolleyes

... mis à jour les modules... Vidé le cache... Rien n'y fait Sad

Voici le lien pour un visuel du problème sur un des sites qui est en ligne.

Auriez-vous une piste ?
Merci.

"Responsive-news-Carousel" en panne - Jean le Chauve - 04/06/2015

Salut JC,
<ul data-orbit data-options="timer_speed:3000; bullets:false; stack_on_small: true,">
T'aurais pas une cht'it virgule en trop à la fin ?
Regarde ton code source, tu as 3 fois la <div id=carousel> ce qui gêne plus que certainement le jquery qui se base sur cet id (qui doit être unique).
Toujours valider ton code, ça te fera gagner des heures de recherche.

"Responsive-news-Carousel" en panne - jcpapa - 04/06/2015

Bonjour Jean,

Citation :Curieux, tu as répondu à 11h43 et je n'ai eu aucune notification par mail

Effectivement, une virgule en trop...
Que j'ai simplement recopié du "download" Foundation :

Code :
[== Indéfini ==]

<!-- Start News Display Template -->

{*

Configuration options for the caroussel

Example: <ul data-orbit data-options="timer_speed:3000; bullets:false;">

Available parameters:

  timer_speed: 10000,

  animation_speed: 500,

  bullets: true,

  stack_on_small: true,

  container_class: 'orbit-container',

  stack_on_small_class: 'orbit-stack-on-small',

  next_class: 'orbit-next',

  prev_class: 'orbit-prev',

  timer_container_class: 'orbit-timer',

  timer_paused_class: 'paused',

  timer_progress_class: 'orbit-progress',

  slides_container_class: 'orbit-slides-container',

  bullets_container_class: 'orbit-bullets',

  bullets_active_class: 'active',

  slide_number_class: 'orbit-slide-number',

  caption_class: 'orbit-caption',

  active_slide_class: 'active',

  orbit_transition_class: 'orbit-transitioning'

*}

<div id="carousel">

    <div class="small-12 columns">

    <ul data-orbit data-options="timer_speed:3000; bullets:false; stack_on_small: true,">

        {foreach from=$items item=entry}

        <li>

     <div class="small-10 small-centered columns">

        {foreach from=$entry->fields item='field'}

            {if $field->type == 'file' && $field->value != ''}

            {if isset($entry->fields)}

             <a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}"><img class="right" src="{CGSmartImage src1=$entry->file_location src2=$field->value alias1='large_thumbnail' notag=1}" alt="{$entry->title|cms_escape}" /></a>

            {/if}

            {/if}

        {/foreach}

            <h2 class="noMarginBottom"><a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a></h2>

        {if $entry->summary}

        <p class="NewsSummary">{eval var=$entry->summary}</p>

        {elseif $entry->content}

            {eval var=$entry->content}

        {/if}

    </div>

        </li>

        {/foreach}

    </ul>

    </div>

</div>

Bon, mais ça ne résout rien...

Citation :Regarde ton code source, tu as 3 fois la <div id=carousel>

Super, effectivement, le "Markup Validation Service"
Oui, je vois les trois div "carousel" dans le code source... mais je ne trouve pas ce qui appelle deux fois de trop ce carousel... Gabarit "Responsive-news-Carousel", ou bien Gabarit de page !?

Voici le gabarit de page :

Code :
[== Indéfini ==]

{process_pagedata}{strip}

{cms_lang_info assign='nls'}

{content assign='maincontent' label='Normal Content'}

{content block='mobileonly' assign='mobileonly' label='Mobile only Content'}

{mobile}{capture assign='mobiletemp'}{$mobile_detect}{/capture}

{/strip}<!DOCTYPE html >

<!--[if IE 9]><html class="lt-ie10" lang="{if isset($nls)}{$nls->htmlarea()}{/if}" > <![endif]-->

<html class="no-js" lang="{if isset($nls)}{$nls->htmlarea()}{/if}">

    <head>

        <title>{if $page_name !='home'}{title} - {/if}{sitename}</title>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta name='HandheldFriendly' content='true' />

        {metadata}

        {if isset($canonical)}

        <link rel="canonical" href="{$canonical}" />

        {elseif isset($content_obj)}

        <link rel="canonical" href="{$content_obj->GetURL()}" />

        {/if}

{* Link to foundation static stylesheets*}

<link rel="stylesheet" href="{root_url}/foundation-5.0.2/css/normalize.css">

        <link rel="stylesheet" href="{root_url}/foundation-5.0.2/css/foundation.min.css" />

{* Link to stylesheets on the database*}

{cms_stylesheet}

        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>

        <script src="{root_url}/foundation-5.0.2/js/modernizr.js"></script>

{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}

{cms_selflink dir='start' rellink='1'}

{cms_selflink dir='prev' rellink='1'}

{cms_selflink dir='next' rellink='1'}

    </head>

    <body>

{* Image top-header début *}

<div class="top-header">{global_content name='topheader'}</div>

{* Image top-header fin *}

{* image-page-spécifique Facebook *}

{content block="Vignette facebook" wysiwyg="false" oneline="true" size="70" label="(Option) Vignette image pour partage facebook. Indiquez le nom de l'image (+extension) que vous avez uploadée dans le dossier thumbsFacebook (pas de caractères spéciaux, ni espaces, min width 200px)"  assign="thumbFacebook"}

{* Facebook bouton J'aime *}

<div id="fb-root"></div>

{literal}

<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.0";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

{/literal}

        <nav class="top-bar" data-topbar>

          <ul class="title-area">

            <!-- Emplacement du Titre -->

            <li class="name">

              <h1 id="logo"><a href={root_url}>{sitename}</a></h1>

            </li>

            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>

          </ul>

          {menu template="responsive-main-menu" excludeprefix="sitemap"}

        </nav>

        {* Page name and Breadcrumbs hidden if it's the home page*}

        <header id="{$page_name}">

            <div class="row">

                {if $page_name =='home'}             

                <div id="carousel">{news summarytemplate="responsive-news-carousel" number="4"}</div>

                {else}

                <div class="large-7 columns">

                <h3>{title}</h3>

                </div>

                <div class="large-5 columns">

                {menu template="responsive-sub-nav" start_level="2"}

                </div>

                {/if}

            </div>

        </header>

        <div class="row">

            <div class="large-8 columns">

                {if $page_name !='home'}

                <div class="hide-for-small" id="breadcrumbs">

                    {menu root="home" action="breadcrumbs" template="responsive-breadcrumbs"}

                </div>

                {/if}

                {*If the Mobile content is empty we show the normal content*}

                {if $mobiletemp && $mobileonly != ''}

                {$mobileonly}

                {else}

                {$maincontent}

                {/if}

            </div>

            <div class="large-4 columns">

                <div id="search">{search search_method="post"}</div>

                <div class="panel news" id="news">

<h5>Actualités</h5>

                    {news detailtemplate="responsive-news-detail" detailpage="responsive-news-template" number="2"}

                <div class="small-8 small-offset-4 row">

{cms_selflink page="actualite" title="Plus de News" class="noMarginBottom right tiny button secondary right"}

</div>

                </div>

            </div>

        </div>

        {*REMARQUE: vous pouvez utiliser un bloc de contenu global spécifique pour afficher un pied de page différent sur la version mobile*}

        <footer class="hide-for-small">

            <div class="row">

                <div class="large-12 columns">

                </div>

            </div>

        </footer>

        <div id="copyright">

            <div class="row full-width">

                <div class="small-12 columns">

                {global_content name='footer'}

                </div>

            </div>

        </div>

        <script src="{root_url}/foundation-5.0.2/js/jquery.js"></script>

        <script src="{root_url}/foundation-5.0.2/js/foundation.min.js"></script>

        {literal}

        <script>

          $(document).foundation();

        </script>

        {/literal}

    </body>

</html>

C'est bizarre... ça fonctionnait il y a peu. Et "je ne touche pas à ce qui fonctionne"... Rolleyes

enfin j'essaie...

"Responsive-news-Carousel" en panne - Jean le Chauve - 04/06/2015

Marrant que je sache mieux que toi ce que tu as codé :p
Gabarit de page : <div id="carousel">{news summarytemplate="responsive-news-carousel" number="4"}</div>
L'autre se trouve dans le gabarit news appelé ici :
<h5>Actualités</h5>
{news detailtemplate="responsive-news-detail" detailpage="responsive-news-template" number="2"}
Sans doute le gabarit sommaire par défaut.

Tu dois modifier l'id correspondant dans ta fonction jquery carousel en utilisant : $( "#carousel" ) et $( "#carousel2" ) par exemple.

"Responsive-news-Carousel" en panne - jcpapa - 04/06/2015

Ok, je vais voir ça...
En même temps, je n'ai besoin que d'un carrousel, celui d Slide en page d'accueil...
Donc, je pense que je vais essayer d'ôter le second...
Merci

"Responsive-news-Carousel" en panne - Jean le Chauve - 04/06/2015

Si tu utilises Orbit comme carousel, tu remarqueras qu'il est obsolète (tout comme ta version de foundation) et qu'il a besoin d'un js pour fonctionner : foundation.orbit.js, que je ne vois pas dans ton code.

"Responsive-news-Carousel" en panne - jcpapa - 04/06/2015

Je te remercie de toutes ces pistes...
Je vais étudier ça de très près

"Responsive-news-Carousel" en panne - Jean le Chauve - 08/06/2015

Résolu ?

"Responsive-news-Carousel" en panne - jcpapa - 08/06/2015

Week-End exposition...
Je suis justement en train de travailler dessus. Je posterai mes résultats, bien sûr.

Bonne journée.

"Responsive-news-Carousel" en panne - jcpapa - 09/06/2015

Bonjour,

Une petite évolution... effectivement, il me manquait :
<script src="{root_url}/foundation-5.0.2/js/foundation/foundation.orbit.js"></script>
dans mon gabarit...
Maintenant, j'ai bien un slide ! :p
Voir ici...

Enfin... il est moche, superposé... Blague à part, j'ai examiné et lu la page de Foundation... Mais je n'ai pas la solution à mon problème ! Rolleyes

Mon "foundation" a été mis à jour ! Effectivement, renseignement pris, il suffit d'un simple téléchargement et d'un copier/coller dans le répertoire propriétaire.

Mais pour le slide, c'est toujours pas au point, même si la translation a été récupérée.

Je pense que cela vient du gabarit des news :
responsive-news-carousel

Code :
[== Indéfini ==]

<!-- Start News Display Template -->

{*

Configuration options for the caroussel

Example: <ul data-orbit data-options="timer_speed:3000; bullets:false;">

Available parameters:

  timer_speed: 10000,

  animation_speed: 500,

  bullets: true,

  stack_on_small: true,

  container_class: 'orbit-container',

  stack_on_small_class: 'orbit-stack-on-small',

  next_class: 'orbit-next',

  prev_class: 'orbit-prev',

  timer_container_class: 'orbit-timer',

  timer_paused_class: 'paused',

  timer_progress_class: 'orbit-progress',

  slides_container_class: 'orbit-slides-container',

  bullets_container_class: 'orbit-bullets',

  bullets_active_class: 'active',

  slide_number_class: 'orbit-slide-number',

  caption_class: 'orbit-caption',

  active_slide_class: 'active',

  orbit_transition_class: 'orbit-transitioning'

*}

<div id="carousel">

    <div class="small-12 columns">

    <ul data-orbit data-options="timer_speed:3000; bullets:false; stack_on_small:true" >

        {foreach from=$items item=entry}

        <li>

     <div class="small-10 small-centered columns">

        {foreach from=$entry->fields item='field'}

            {if $field->type == 'file' && $field->value != ''}

            {if isset($entry->fields)}

             <a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}"><img class="right" src="{CGSmartImage src1=$entry->file_location src2=$field->value alias1='large_thumbnail' notag=1}" alt="{$entry->title|cms_escape}" /></a>

            {/if}

            {/if}

        {/foreach}

            <h3 class="noMarginBottom"><a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a></h3>

        {if $entry->summary}

        <p class="NewsSummary">{eval var=$entry->summary}</p>

        {elseif $entry->content}

            {eval var=$entry->content}

        {/if}

    </div>

        </li>

        {/foreach}

    </ul>

    </div>

</div>

Mais vraiment, je ne vois pas...

Merci de me lire,

Bonne journée

"Responsive-news-Carousel" en panne - Jean le Chauve - 09/06/2015

Citation :Enfin... il est moche, superposé... Blague à part, j'ai examiné et lu la page de Foundation... Mais je n'ai pas la solution à mon problème !

Alors pourquoi utilises-tu encore orbit qui est obsolète ?

Citation :Deprecation Notice:

Orbit has been deprecated, meaning that it is no longer supported. There's no need to worry though as we decided to leave it in Foundation if you choose to continue using it. We explain it here.

There are other great options if you need an image slider. A lot of them have features based on Orbit and may have added one of two more features.

This image slider is really slick: Slick Carousel. It has all the features Orbit has and can also be used as a carousel for single image sliding. It's easy to set up and is well supported.

Orbit is also not accessible to screen readers or assistive devices.

La doc te propose de passer à Slick Carousel.

Tu appelles foundation.js (non trouvé erreur 404) et foundation.min.js. C'est soit l'un, soit l'autre : http://foundation.zurb.com/docs/javascript.html.

Tu n'utilises pas la syntaxe correcte pour la construction du code html (ex. : des <p> dans des <p>, tout ce qui n'est pas l'image doit être encadré par <div class="orbit-caption">, etc.). Commence par tester avec un code non dynamique pour comprendre comment ça fonctionne (copié-collé du code de la doc en modifiant le chemin des images).

"Responsive-news-Carousel" en panne - jcpapa - 09/06/2015

J'ai bien lu tous les conseils que tu me donnes...

Citation :Tu n'utilises pas la syntaxe correcte pour la construction du code html (ex. : des <p> dans des <p>, tout ce qui n'est pas l'image doit être encadré par <div class="orbit-caption">, etc.).

Je suis en train d'examiner cette nouvelle façon de faire un slide... pourtant, je n'avais fait qu'appliquer ce qui était fourni avec Foundation sur la 5.0.2. et au risque de paraître moi-même obsolète, et si je vais essayer tout de même de passer à "Slick"... Je suis très tenté de "zapper" complètement ce slide pour ne plus être emm... :mad:
Sans aigreur aucune... mais, je fatigue un peu là...

Bonne journée à tous.

"Responsive-news-Carousel" en panne - jcpapa - 10/06/2015

Bonjour,

Bon, je viens d'inspecter avec Firebug, la page qui me sert "un peu" de référant - vu que c'est sur celle-ci que j'ai acheté mon "architecture d'ensemble" et que c'est aussi par le biais de cette page que j'ai découvert et le CMSMS et le Responsive - et je constate que :
1- cette page fonctionne parfaitement;
2- qu'elle utilise "orbit" --> <div class="orbit-container">.

Donc, même si Orbit est obsolète... "il" fonctionne. Rolleyes

Je viens d'installer sur mon hébergement, une copie de la documentation fournie avec l'ensemble acheté de cette architecture... c'est ici !
Et c'est ici, que j'avais récupéré les codes des gabarits de News (et les autres)...
Donc tout ceci serait obsolète !?
Mais ça fonctionne non !?

J'aimerais vraiment bien que l'on m'explique à quoi sert d'être au top s'il faut passer la moitié de son temps à mettre à jour un truc qui fonctionne et qui apporte toute satisfaction dans son obsolescence ? Cool

Enfin, dernière question :
Qu'est-ce que le fait de passer de Fondation 5.0.2 à Foundation 5.5.2 m'apporte comme bénéfice ?
Je constate que le javascript "orbit" a disparu et qu'il faut en ajouter un nouveau (slick) qui ne fait pas partie du pack...
Donc, du temps de perdu... !?