Se connecter

charlie89 · 20/01/2014, 16:17:00

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.

***bess*** · 20/01/2014, 16:31:37

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é.

***jissey*** · 20/01/2014, 17:00:34

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

charlie89 · 20/01/2014, 17:33:11

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 ?

***jissey*** · 20/01/2014, 17:36:56

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

***jissey*** · 20/01/2014, 17:38:37

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

charlie89 · 20/01/2014, 18:21:23

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%;
}

***jissey*** · 20/01/2014, 18:30:09

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.

lakpo · 20/01/2014, 19:45:23

http://responsiveslides.com/

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

***Ouik*** · 21/01/2014, 00:22:22

Idem, ça marche nickel !

charlie89 · 21/01/2014, 11:43:46

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>

***bess*** · 21/01/2014, 12:18:36

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

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

charlie89 · 21/01/2014, 14:59:53

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 ?

***bess*** · 21/01/2014, 15:11:28

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>

charlie89 · 21/01/2014, 15:34:51

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>

***bess*** · 21/01/2014, 17:35:13

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

***Ouik*** · 21/01/2014, 18:37:52

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

Spy1664 · 22/01/2014, 00:12:12

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

***bess*** · 22/01/2014, 15:53:25

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

Spy1664 · 22/01/2014, 19:59:33

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

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.

lakpo · 23/01/2014, 00:30:23

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 ...

dianna_ · 23/01/2014, 12:06:58

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 "<img src="{$image-&gt;thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image-&gt;titlename}" />" - Unexpected "&"

Du coup j'ai remplacé :

<ul class="rslides">
{foreach from=$images item=image}
<li>
<img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->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.

***bess*** · 23/01/2014, 12:16:27

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.

lakpo · 23/01/2014, 12:48:43

c'est désespérant

Azam · 23/01/2014, 16:49:50

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->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />

Bien évidement que ça ne fonctionne pas remplace les "->" par "->"
Bon courage…

Se connecter
Utilisateur :
Mot de passe :	Mot de passe oublié ?
	Se rappeler