Les avertissements suivants se sont produits :
Warning [2] Undefined property: MyLanguage::$archive_pages - Line: 2 - File: printthread.php(287) : eval()'d code PHP 8.2.18 (Linux)
File Line Function
/inc/class_error.php 153 errorHandler->error
/printthread.php(287) : eval()'d code 2 errorHandler->error_callback
/printthread.php 287 eval
/printthread.php 117 printthread_multipage



Forum CMS Made Simple FR
Adapter un slide à un écran - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Général (https://forum.cmsmadesimple.fr/forum-10.html)
+--- Sujet : Adapter un slide à un écran (/thread-3083.html)

Pages : 1 2

Adapter un slide à un écran - charlie89 - 20/01/2014

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



Bonjour,

Je voudrais que mon site s'adapte à chaque écran (ordi, tablette, téléphone) automatiquement.

Tout est ok sauf le fond du site qui est un slide fait avec le module Showtime Slideshow.

Dans le module j'utilise l'animation jQuery.

En Largeur j'ai "1250 pixels" et en hauteur "820 pixels". Mise à l'échelle des images : "remplir à la taille exacte (standard)".


Peut-on mettre en automatique ?


J'appelle le slide dans mon gabarit :


<BODY>

<SPAN style="position: fixed; top: 30 px; z-index: 0; left: 0px;width: 100%; height: 100%">

{Showtime show='1'}

</SPAN>

</BODY>



Merci par avance.

Adapter un slide à un écran - bess - 20/01/2014

juste pour info : <BODY> n'est pas une balise existante tout comme <SPAN>

en html on met tout en minuscule Smile <body><span> ...

ça t'évitera des déboires plus tard.

Pour ton soucis je ne sais pas si le module permet de faire du responsive design je ne l'ai jamais utilisé.

Adapter un slide à un écran - jissey - 20/01/2014

Bonjour,
showtime n'est pas responsive.
Il faut choisir un slide jquery responsive et l'intégrer avec le module gallery.

Adapter un slide à un écran - charlie89 - 20/01/2014

Merci pour ces informations.

Du coup maintenant que j'ai téléchargé le module jquery, je créais un script et je l'incorpore dans mon gabarit ?

Adapter un slide à un écran - jissey - 20/01/2014

je n'ai pas parlé du module jquery mais de gallery.

Adapter un slide à un écran - jissey - 20/01/2014

tiens, par ici, des exemples:
http://www.cmsmadesimple.fr/forum/viewtopic.php?id=3229

Adapter un slide à un écran - charlie89 - 20/01/2014

Merci, module Gallery installé, j'utilise le gabarit Cycle.

Mais j'en reviens au même problème, comment faire pour l'adapter à chaque écran ?

Parce que même en écirant ceci dans le CSS-feuille de style ce ne marche pas :

/* height and width should be the same as the thumbnail sizes */
#slides {
width: 100%;
height: 100%;
}

Adapter un slide à un écran - jissey - 20/01/2014

alors je reprends, je me suis mal fait comprendre:
tu cherches sur Internet un slider en libre telechargement qui te convienne.
Regarde du côté des plugin jquery, il y en a plusieurs qui sont responsive.
Une fois que tu as trouvé celui qui te convient, tu le "transforme" en un nouveau gabarit dans le module gallery.
Dans ce module, tu peux créer tes propres gabarits en y rentrant le code HTML/Smarty, le JS et les CSS.
En fait, tout ce que te fourni un plugin jquery la plupart du temps.

Adapter un slide à un écran - lakpo - 20/01/2014

http://responsiveslides.com/

Perso j'utilise celui la, il va très bien!

Adapter un slide à un écran - Ouik - 21/01/2014

Idem, ça marche nickel !

Adapter un slide à un écran - charlie89 - 21/01/2014

Donc si j'ai tout compris (et à mon avis je mouline plus qu'autre chose) :

Je créais un nouveau gabarit dans le module "gallery" avec ceci (que j'ai pris dans un exemple cité au dessus) :


Source du Gabarit :

<ul class="rslides">

<li><img src='{uploads_url}/simplex/images/1.jpg' alt=''></li>
<li><img src='{uploads_url}/simplex/images/2.jpg' alt=''></li>
<li><img src='{uploads_url}/simplex/images/3.jpg' alt=''></li>

</ul>




Gabarit CSS-feuille de style :

.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}

.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}

.rslides li:first-child {
position: relative;
display: block;
float: left;
}

.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}



Gabarit JavaScript :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>

<script type="text/javascript">
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: false, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: false, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: "Previous", // String: Text for the "previous" button
nextText: "Next", // String: Text for the "next" button
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: "", // Selector: Declare custom pager navigation
namespace: "rslides", // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});

[* ceci je l’adapte à mes préféreces*}
</script>

Adapter un slide à un écran - bess - 21/01/2014

Citation :<script src="responsiveslides.min.js"></script>

utilise plutôt une url absolue car là il ne va jamais trouver la librairie

Adapter un slide à un écran - charlie89 - 21/01/2014

Et je la trouve où l'url absolue en fait ?

Je dois télécharger le fichier jquery : "responsiveslides.min.js" quelque part dans mon ordinateur ?

Adapter un slide à un écran - bess - 21/01/2014

dans ton .... hum...
bon tu as téléchargé sur ton site la librairie responsiveslides.min.js au moins ? faut commencer par ça. Et si tu me demande ou trouver cette librairie je te dirais que statistiquement elle doit se trouver sur le site que t'ont fillé mes collègues au dessus

Donc tu le met sur ton propre site, dans un répertoire qui ai du sens. /uploads/vendors/responsiveslides.min.js me parait bien

et ton url absolue est donc : www.tonsite/uploads/vendors/responsiveslides.min.js et là la magie de cmsms opère car la variable root_url existe pour te faciliter la vie
<script src="{root_url}/uploads/vendors/responsiveslides.min.js"></script>

Adapter un slide à un écran - charlie89 - 21/01/2014

Oui oui je l'ai téléchargé, avec l'url absolute c'est ok, j'ai utilisé {uploads_url} à la place de {root_url}
Le seul problème c'est que le slide ne tourne pas et reste figé sur la 1ere image.

du coup en final j'ai :


Source du gabarit :

<li><img src='{uploads_url}/simplex/images/boxed-sr.jpg' alt='{sitename}'></li>
<li><img src='{uploads_url}/simplex/images/boxed-ar2.jpg' alt='{sitename}'></li>

</ul>



Gabarit CSS-feuille de style :

.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}

.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}

.rslides li:first-child {
position: relative;
display: block;
float: left;
}

.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}




Gabarit JavaScript :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="{uploads_url}/simplex/images/responsiveslides.min.js"></script>

<script>
$(function() {
$(".rslides").responsiveSlides();
});


$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: false, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: false, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: "Previous", // String: Text for the "previous" button
nextText: "Next", // String: Text for the "next" button
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: "", // Selector: Declare custom pager navigation
namespace: "rslides", // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});





</script>




Et dans le gabarit de ma page :

<body>
<span style="position: fixed; z-index: 0">

{Gallery}
</span>
</body>

Adapter un slide à un écran - bess - 21/01/2014

[Image: 57228_5D3P8IN7HXDCLEQ2XWLN5SOAU3S3Z1_har...5405_L.jpg]

Adapter un slide à un écran - Ouik - 21/01/2014

Déjà, il faudrait que tu attribue la classe rslides à ton ul, comment veux-tu que ça marche sinon ?

Adapter un slide à un écran - Spy1664 - 22/01/2014

Bonsoir à tous, je viens de tomber sur ce post et je viens de découvrir que le sujet du dernier billet de mon blog correspondait exactement au sujet Smile et ça sans le vouloir.

Voici le lien si ça intéresse quelqu'un : Intégration d'un slide responsive dans le module Gallery

Adapter un slide à un écran - bess - 22/01/2014

tu vas rire mais j'en ai besoin pour un projet au taff... je bookmark de suite ton article Spy1664 Big Grin

Adapter un slide à un écran - Spy1664 - 22/01/2014

bess a écrit :tu vas rire mais j'en ai besoin pour un projet au taff... je bookmark de suite ton article Spy1664 Big Grin

C'est aussi fait pour ça Cool

Je continuerai de mettre des articles dessus dès que j'ai du temps de libre. Et be pas hésite à me dire ce qui va ou pas sur les articles.

Adapter un slide à un écran - lakpo - 23/01/2014

charlie89 quand tu prend un module jquery ou autre essaye de bien lire la doc! de regarder les exemples et de comprendre un minimum comment ca marche.

On te dit de prendre responsiveslider.js! tu peux pas mettre le lien bêtement dans ta page et te dire ok! ce n'est pas un module destiné seulement à cmsms demande toi comment il va savoir quel sont les images qu'il doit géré. Ce n'est pas un humain il n'est pas sensé savoir sans que tu rajoutes les bonnes infos. Il faut absolument que tu te pose toi même les bonnes questions et sa a chaque fois ! sinon tu vas être obligé de demandé a chaque fois ...

Adapter un slide à un écran - dianna_ - 23/01/2014

Bonjour,

J'ai également essayé de mettre en place Responsiveslides et j'ai un message d’erreur qui se met en place :

Syntax Error in template "module_db_tpl:Gallery;responsiveSlide" on line 4 "&lt;img src=&quot;{$image-&amp;gt;thumb|escape:'url'|replace:'%2F':'/'}&quot; alt=&quot;{$image-&amp;gt;titlename}&quot; /&gt;" - Unexpected "&"

Du coup j'ai remplacé :

<ul class="rslides">
{foreach from=$images item=image}
<li>
<img src="{$image-&gt;thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image-&gt;titlename}" />
</li>
{/foreach}
</ul>
<div class="rslidesclear"> </div>


Par

<ul class="rslides">
{foreach from=$images item=image}
<li>
<a href="#"><img class="img-candidat" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
</li>
{/foreach}
</ul>
<div class="rslidesclear"> </div>



Et le problème est que ma 1ere image reste fixe.

Adapter un slide à un écran - bess - 23/01/2014

dianna_ => IP = xx.xx.xx.xx => voir autre utilisateurs avec cette ip => charlie89


C'est moi ou il y en a un ici qui tente de nous prendre pour des cons ?

je banni ton compte dianna_, Charlie je te prie de croire que ce genre de méthodes a le don de me foutre en rogne et j'éviterais si j'étais toi de me foutre en rogne.

Adapter un slide à un écran - lakpo - 23/01/2014

c'est désespérant

Adapter un slide à un écran - Azam - 23/01/2014

Bonjour à tous,
à croire que le responsive devient une sorte de "Saint Graal", j'ai fait la même chose à quelques différences près que
Spy1664 en début d'après-midi, sur mon forum qui me sert de pense bête.
Un post qui se nomme : Slider responsive pour le module Gallery <Galerie d'images>


Pour :
dianna_ ou charlie89 a écrit :<img src="{$image-&gt;thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image-&gt;titlename}" />
Bien évidement que ça ne fonctionne pas remplace les "-&gt;" par "->"
Bon courage…