Afficher Simple Slider dans un float: left... - 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 : Afficher Simple Slider dans un float: left... (/thread-572.html)

---

Afficher Simple Slider dans un float: left... - Yvan - 30/07/2010

Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: ?
#~ Nom de l'hébergeur : Infomaniak
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.8.1
#~ Installed Modules:
#~ * CMSMailer: 2.0
#~ * FileManager: 1.0.2
#~ * MenuManager: 1.6.5
#~ * ModuleManager: 1.4
#~ * News: 2.10.6
#~ * nuSOAP: 1.0.1
#~ * ThemeManager: 1.1.1
#~ * TinyMCE: 2.7.2
#~ * FrontEndUsers: 1.9.3
#~ * CustomContent: 1.5.3
#~ * CGExtensions: 1.18.8
#~ * CGCalendar: 1.5.2
#~ * SimpleSlider: 0.3
#~ Config Information:
#~ * php_memory_limit:
#~ * process_whole_template: false
#~ * output_compression: false
#~ * max_upload_size: 48000000
#~ * default_upload_permission: 664
#~ * 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.2.13
#~ * md5_function: On (Vrai)
#~ * gd_version: 2
#~ * tempnam_function: On (Vrai)
#~ * magic_quotes_runtime: Off (Faux)
#~ * E_STRICT: 0
#~ * memory_limit: 64M
#~ * max_execution_time: 10
#~ * output_buffering: 20480
#~ * safe_mode: Off (Faux)
#~ * file_uploads: On (Vrai)
#~ * post_max_size: 300M
#~ * upload_max_filesize: 300M
#~ * session_save_path: Aucune vérification à cause de la restriction spécifiée par PHP open_basedir
#~ * session_use_cookies: On (Vrai)
#~ * xml_function: On (Vrai)
#~ Server Information:
#~ * Server Api: apache2handler
#~ * Server Db Type: MySQL (mysql)
#~ * Server Db Version: 5.0.84
#~ ----------------------------------------------
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~

Bonjour,

Je me suis décidé à utiliser Simple Slider et j'ai été farfouillé dans le code pour l'adapter un peu à mon site. Je veux le mettre en float:left; mais il se décale un peu sur la droite et l'image semble alors coupée sur la gauche.
J'ai un peu de peine à savoir si j'ai mis les bonnes valeurs pour "position" et j'aimerais savoir votre avis: http://www.coord21.ch/test_cmsms/

Code php/html/js:

<?php

@error_reporting(E_ERROR);

if (!isset($gCms)) exit;

$db = $this->cms->db;

if(isset($params['show'])){
$showname=mysql_real_escape_string($params['show']);

$sql='SELECT * FROM '.cms_db_prefix().'module_simpleslider_shows WHERE `showname`="'.$showname.'";';
$result=$db->Execute($sql);
$fields=$result->fields;
$showid=$fields['showid'];
$width=$fields['width'];
$height=$fields['height'];
$fadetime=$fields['fadetime'];
$sql='SELECT * FROM '.cms_db_prefix().'module_simpleslider_images, '.cms_db_prefix().'module_simpleslider_showimages WHERE `id`=`imageid` AND `showid`="'.$showid.'";';
}
else{
$width=$this->getPreference('defwidth');
$height=$this->getPreference('defheight');
$fadetime=$this->getPreference('deffadetime');
$sql='SELECT * FROM '.cms_db_prefix().'module_simpleslider_images WHERE 1;';
}
$result=$db->Execute($sql);
if($this->debug){
echo $db->ErrorMsg();
}
$flds=$result->fields;
?>

<script src="lib/jquery.js" type="text/javascript"></script>
<script src="lib/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#simpleslider').s3Slider({
timeOut: <?=$fadetime?>
});
});
</script>
<div id="simpleslider" style="width: <?=$width?>px; height: <?=$height?>px;">
<ul id="simplesliderContent">

<?
while(!$result->EOF()){
$fields=$result->fields;
$result->MoveNext();
?>

<li class="simplesliderImage">
<img src="uploads/sliderimages/img<?=$fields['id']?>.jpg" width="<?=$width?>" height="<?=$height?>" <? if($fields['imagelink']!=''){ ?> onClick="javascript:location.href='<?=$fields['imagelink']?>';" style="cursor:pointer;" <? } ?> />
<span class="bottom">
<div class="title"><?=$fields['title']?></div>
<? if($fields['imagelink'] != ''){ ?>
<a href="<?=$fields['imagelink']?>" class="slidelink">
<? } ?>
<?=$fields['description']?>
<? if($fields['imagelink']!=''){ ?>
</a>
<? } ?>
</span>
</li>
<? } ?>

</ul>
</div>

<? $result->Close(); ?>


Code CSS:

#simpleslider {
float: left;
position: relative;
overflow: hidden;
padding: 5px 10px 5px 0px;
}
#simplesliderContent{
width: 100%;
position: absolute;
top: 0;
margin-left: 0;
}
.simplesliderImage{
position: relative;
display: none;
}
.simplesliderImage span.bottom {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 100%;
background-color: #FFF;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #333;
display: none;
bottom: 0;
left: 0;
}
ul#simplesliderContent,
li.simplesliderImage {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ul#simplesliderContent {
list-style: none;
}
li.simplesliderImage div.title {
font-weight:bold;
font-size:14px;
}


Merci !

---

Afficher Simple Slider dans un float: left... - Jean le Chauve - 30/07/2010

div#content h2 {clear:left;} // pour passer le titre suivant sous l'image si le texte flottant est trop court. Attention, cela pourrait perturber tes autres pages.

La règle div#main ul li, div#main ol li {margin:0 0 0.25em 3em;...} est prioritaire (0103) à li.simplesliderImage {margin: 0;}(0011}, il faut donc augmenter le poids en ajoutant une id :
#main .simplesliderImage {margin:0;}(0110).
Article court à connaître obligatoirement pour ne plus se prendre la tête avec les css : http://openweb.eu.org/articles/cascade_css en particulier "Etape 3 : le tri par priorité calculée des sélecteurs".
Tu devrais utiliser FireBug, tu verrais immédiatement vu que ta règle est "écrasée".
Attention, ton code n'est pas valide : tu places une div dans un span : <span class="bottom"><div class="title">.
Toujours valider avant de passer aux css.

Post à déplacer dans Graphisme, rien à voir avec les modules ou tags.

---

Afficher Simple Slider dans un float: left... - Yvan - 02/08/2010

Merci, je vais regarder ça.

Mais c'est bizarre, ce module. C'est la version 3 et il donne vraiment l'impression d'avoir été codé n'importe comment... Je me doutais bien que le div dans le span était faux !

---

Afficher Simple Slider dans un float: left... - Yvan - 02/08/2010

Ok, je m'y suis remis...

Déjà, merci pour le "clear: left;", je ne connaissais pas.

Ensuite, merci pour le truc sur la priorité en css. Le lien que tu m'as donné est down, malheureusement. Faudra que je fasse des recherches.

Pour ce qui est de la validité du code, il y a apparemment un problème avec onClick que je ne crois pas savoir réglé et il me dit qu'il manque l'attribut alt, alors que je le vois dans le code source. Autrement, il y a toujours les "amp;" qui manque après les "&" d'une adresse du calendrier, mais CMSMS les retire lorsque je soumets le gabarit... :/)

J'ai réussi à faire ce que je voulais, mais il y a d'étranges contraintes. J'avais par exemple remplacé le span par un div, mais apparemment il faut mettre un span pour que ça marche, sinon rien ne s'affiche. Et il faut mettre '<div class="clear simplesliderImage"></div>' après la liste, sinon le diaporama ne fait que montrer la 1ère image. Et je n'ai trouvé aucune référence nulle part à cette classe "clear simplesliderImage"...

C'est foireux, non ?

PS: Perso, je trouve que ça a surtout à voir avec le module SimpleSlider et non avec le graphisme. C'est bien la structure de SimpleSlider qui m'a posé problème.

---

Afficher Simple Slider dans un float: left... - Jean le Chauve - 02/08/2010

Le lien n'est pas down.
Bien sûr que tu peux tout corriger.
Pour les url agenda, tu pourrais essayer en plaçant le paramètre |replace:'&':'&' dans le gabarit de l'agenda aux appels url.
Je n'ai pas testé cela.

<?php
@error_reporting(E_ERROR);
...
</div>
<? $result->Close(); ?>
Tout ce code php, html et js, est-il dans une seule UDT ?

Tes onclick doivent être entre {literal}.

---