Projet de Caroussel / Slider...

29 mars 2015, 23:12

Bonjour à tous,

j'interviens pour la première fois sur ce site qui à l'air fort sympathique, et j'aimerai obtenir de l'aide sur un projet personnel.
Je développe une nouvelle interface de mon site en responsive design (même si je début en la matière), et j'aimerai que ma page d'accueil présente un "caroussel ou slider" concernant les derniers ajouts sur le site.

Pour être plus précis, les membres du site postent des créations visuelles (peinture, photo), et j'aimerai que sur la page d'accueil apparaissent les 10 derniers envois mais dans une seule div qui n'offre l'affichage que d'un seul résultat (Photo + titre du la peinture), il faudrait donc soit que le slider démarre automatiquement, soit qu'il y ait des boutons pour faire tourner...
(Page d'accueil temporaire : http://www.lespoetes.net/accueil7.php, exemple galerie d'art)

Mon ou plutôt mes problèmes concernent mon niveau en programmation...
je fais un peu de html, css, et php, mais comme débutant, et je ne connais pas le javascript...

J'avais essayé l'année dernière d'adapter des choses en jquery, mais je n'ai rien compris...

Je suis preneur de tous vos conseils, accompagnement :

- Pour choisir un script existant qui permette d'afficher en rotation image et titre à partir d'une bdd
ou de
- Créer un script pour le faire

Merci pour votre réponse, quelle qu'elle soit.

Eric

29 mars 2015, 23:22

http://www.jssor.com/ fait cela très bien.
il reste juste à générer dynamiquement la liste des div

30 mars 2015, 00:46

Merci pour cette source.

Je viens de tester, et comme l'année dernière, je ne suis vraiment pas doué...

sur cette page, cela fonctionne
http://www.lespoetes.net/accueil7BIS.php

mais sur celle-ci intégrée dans la structure je n'ai pas le résultat attendu, et pourtant le code semble bon
http://www.lespoetes.net/accueil7.php

Je cherche...

30 mars 2015, 01:07

tu as
<script src="js/jssor.slider.mini.js"></script>
<script>
jQuery(document).ready(function ($) {
var options = { $AutoPlay: true };
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</script>
dans la page qui fonctionne, mais pas dans l'autre.

30 mars 2015, 01:27

Ok j'ai changé,

mais en fait je parlais des problèmes d'affichage... je n'arrive pas à supprimer la double ligne avant l'image, ni à centrer le tout!

31 mars 2015, 23:05

Quelqu'un a une idée ?

27 avr. 2016, 00:37

Je suis toujours preneur d'une aide car je n'ai toujours rien trouvé, SVP, merci

si il y a besoin de code, je peux en mettre...

02 juin 2016, 16:32

Toujours en recherche de solution... merci

Eric

02 juin 2016, 17:49

Bonjour,

Pour obtenir davantage de réponses, il faudrait que tu réexpliques ton problème car je ne suis pas sûr qu'il soit compréhensible.

Qu'est-ce qui ne marche pas ?
Où bloques-tu ? Qu'as tu essayé ?

03 juin 2016, 08:53

Merci pour le retour.

Soyons plus clair....

Actuellement j'en suis là :
http://www.lespoetes.net/accueil7.php

Comme vous pouvez le voir, le slider, dans la vignette Galerie d'art tourne bien, mais le pb, c'est que le script en lui même intervient dans ma structure CSS avec des div que je n'arrive pas à gérer par rapport au design.

En gros j'ai une répétition du soulignement (3 fois) et le centrage dans la div ne se fait pas.

Le CSS définit la position des blocs, les un par rapport aux autres, voir code CSS plus bas.

La page se trouve ici http://www.lespoetes.net/accueil7.php

Tout se passe bien. Le problème est survenu lorsque j'ai voulu insérer un slider d'image à l'intérieur de mon p'tit bloc
(slider visible ici juste avec le code nécéssaire : http://www.lespoetes.net/accueil7BIS.php)

Lorsque j'ajoute ce code, le bloc galerie d'art répète l'entête du bloc, je n'arrive pas à m'en sortir,

si je supprime les div du slider, il n'y a soit plus d'image soit plus de slide...

Merci d'avance pour vos conseils.

CODE PHP DE LA PAGE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Meta pour forcer les téléphone à respecter la taille de l'écran -->
    <meta name="viewport" content="width=device-width" />
        <link rel="icon" href="favicon.ico" />
        <link rel="stylesheet" href="style7.css">
<!-- Insertion de JQUERY et JSSOR -->       
        <script type='text/javascript' src='js/jquery-1.11.1.min.js'></script>
        <script src="js/jssor.slider.mini.js"></script>
        <script>
            jQuery(document).ready(function ($) {
                var options = { $AutoPlay: true };
                var jssor_slider1 = new $JssorSlider$('slider1_container', options);
            });
        </script>
   
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <title>Lespoetes.net - La po&eacute;sie sur internet</title>
    </head>
    <!--[if IE 6 ]><body class="ie6 old_ie"><![endif]-->
    <!--[if IE 7 ]><body class="ie7 old_ie"><![endif]-->
    <!--[if IE 8 ]><body class="ie8"><![endif]-->
    <!--[if IE 9 ]><body class="ie9"><![endif]-->
    <!--[if !IE]><!--><body><!--<![endif]-->
        <div id="bloc_page">
            <header>
                <div id="titre_principal">
                    <img src="images7/logo2.png" alt="lespoetes.net" id="logo" />
                     
                    <div id="pub">
                    <?php include "publicites/googleutf8.php";?>
                    </div>
                     
                </div>
                 
                <nav>
                    <ul>
                        <li><a href="#">Accueil</a></li>
                        <li><a href="#">Po&egrave;mes</a></li>
                        <li><a href="#">Arts Visuels</a></li>
                        <li><a href="#">Artistes</a></li>
                        <li><a href="#">Forum</a></li>
                    </ul>
                </nav>
            </header>
             
            <section id="inline-table">
                <div id="derniersposts" class="bigbox">
                    <h1>Les derniers po&egrave;mes re&ccedil;us</h1>
                <?
                include ("includeaccueil7/lesdernierspoemesrecus.php");
                ?>
                </div>
                <div id="artistedujour" class="box">
                    <h1>Artiste du jour <img src="images7/icopointinterrogation.png" alt="Question" height="15" title="Pour &ecirc;tre &eacute;lu artiste du jour, vous devez &ecirc;tre un membre actif du site &#013(S'être connecté dans les 30 derniers jours) &#013et avoir de la chance (tirage au sort)"/></h1>
                <?
                include ("includeaccueil7/artistedujour.php");
                ?>
                </div>
                 
                 
                <div id="artistedhierdujour" class="box">
                    <h1>Artistes c&eacute;l&egrave;bres</h1>
                <?
                include ("includeaccueil7/artistescelebres.php");
                ?>
                </div>          
                <div id="galeriedart" class="box">
                    <h1>Galerie d'art </h1>
                <?
                include ("includeaccueil7/galeriedart.php");
                ?>
                </div>
                             
                <div id="Illustrations" class="box">
                    <h1>Illustrations</h1>
                <?
                include ("includeaccueil7/illustrations.php");
                ?>
                </div>   
                 
                <div id="chat" class="bigbox">
                    <h1>Discussions en direct, le chat :</h1>
                <?
                include ("includeaccueil7/lesdernieresinterpretations.php");
                include ("includeaccueil7/chat7.php");
                ?>
                </div>               
                 
                <div id="livrecdadecouvrir" class="box">
                        <h1>Livre - CD à découvrir</h1>
                <?
                include ("includeaccueil7/livrecdadecouvrir.php");
                ?>
                </div>
            </section>
            <br />
             
            <footer>
            </footer>
        </div>
    </body>
</html>

CODE PHP DE L'INCLUDE GALERIE D'ART

<!-- galerie d'art -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 100%; height: 100%;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; width: 100%; height: 100%;">
<?php
$sql = '
SELECT *
FROM galeriedart
WHERE validtableau=1
ORDER by idtableau DESC
LIMIT 5
';
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
while ($list = mysql_fetch_array ($req))
{
$idtableau = $list['idtableau'];
$titretableau= $list['titretableau'];
$lientableau = $list['lientableau'];
$auteurtableau = $list['auteurtableau'];
echo'
        <div id="tableaux" style="position: relative; top: 0px; left: 0px; width: 100%; height: 100%;">
        <a href="gdatableau.php?idtableau='.$idtableau.'">
        <img u="image" src="upload/gda/mini'.$lientableau.'" alt="Création de la galerie d\'art">
        </a>
        </div>
        ';
}
?>
    </div>
</div>

CODE CSS

/* Eléments principaux de la page */
body
{
    background: url('images7/background.png');
    font-family: 'Trebuchet MS', Arial, Sans-Serif;
    color: #333333;
    margin:0px;
}
#bloc_page
{
    margin: auto;
}
footer h1, nav a
{
    font-family: 'Trebuchet MS', Arial, Sans-Serif;
    font-size: 1.0em;
    font-weight: normal;
    text-transform: uppercase;
}
/* header */
header
{
    background: url('images7/backgroundheader.png') repeat-x top;
}
#titre_principal
{
    display: inline-block;
    padding:0px;
    margin:0px;
}
#pub
{
    display: inline-block;
    margin-bottom: 0px;
    margin-left: 30px;
}
header h1
{
    font-family: 'Trebuchet MS', Arial, Sans-Serif;
    font-size: 1.6em;
    font-weight: bold;
    text-transform: uppercase;
     
}
#logo, header h1
{
    display: inline-block;
    margin-bottom: 0px;
}
header h2
{
    font-size: 1.4em;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: normal;
     
}
/* Navigation */
nav
{
    display: block;
    text-align: left;
    background: url('images7/backgroundmenu.png');
    height:30px;
     
}
nav ul
{
    list-style-type: none;
}
nav li
{
    display: inline-block;
    margin-right: 15px;
}
nav a
{
    font-size: 0.9em;
    color: #181818;
    padding-bottom: 1px;
    text-decoration: none;
}
nav a:hover
{
    color: #760001;
    border-bottom: 3px solid #760001;
}
/* Contenu de la page */
 
.box {
  vertical-align:top;
  height:250px;
  width:200px;
  text-align:center;
  background-color: #F0F7EF;
  margin-top:30px;
  margin-left:2%;
  margin-right:2%;
}
.box:hover {background:white;}
.box .banniere_description {
      background-color: #CFCFC9;
  line-height:30px;
}
.box h1 {
      background: url('images7/backgroundmenu.png');
    margin:0;
    font-size: 1.0em;
    font-weight: bold;
    text-transform: uppercase;
    line-height:30px;
}
/* exemple inline-table */
#inline-table
{
text-align:center;
}
#inline-table .box {
    display:inline-table;
}
#inline-table .box h1,
#inline-table .box .banniere_description {
  display:table-row;
}
#inline-table .box .img{
  vertical-align:middle;
  display:table-cell;
  height:100%;
}
#inline-table  img {
  max-height:150px;
  max-width:150px;
}
#inline-table .bigbox {
    display:inline-table;
}
/* Essai pour la box derniers envois sur le site inline-table */
.bigbox {
  vertical-align:top;
  height:250px;
  min-width:400px;
  max-width:500px;
  text-align:left;
  background-color: #F0F7EF;
  margin-top:30px;
  margin-left:2%;
  margin-right:2%;
}
.bigbox:hover {background:white;}
.bigbox h1 {
      background: url('images7/backgroundmenu.png');
    margin:0;
    font-size: 1.0em;
    font-weight: bold;
    text-align:center;
    text-transform: uppercase;
    line-height:30px;
}
.bigbox ul
{
    list-style-type: none;
    padding:0px;
    }
.bigbox li
{
    font-size: 0.8em;
    padding-left: 10px;
    padding-right: 10px;
}
/* Liens */
.bigbox a {
    color: black;
    text-decoration: none;
}
.bigbox a:hover, a:focus {
    color: #C0C0C0;
}
.bigbox a img {
    border: none; /* -> 10 */
}
/* --- Ajout de style : tooltip info bulle extrait de poème --- */
a.tooltip em {
    display:none;
     
}
a.tooltip:hover {
    border: 0;
    position: relative;
        z-index: 500;
    text-decoration: none;
}
a.tooltip:hover em {
    display: block;
    position: absolute;
    top: 20px;
    left: 80px;
    padding: 5px;
    color: #000;
    border: 2px solid #000000;
    background: #ffffff;
    width:300px;
}
a.tooltip:hover em span {
    position: absolute;
    top: -7px;
    left: 25px;
    height: 7px;
    width: 11px;
    color: url(infobulletop00.gif);
    margin:0;
    padding: 0;
    border: 0;
}
 
 
/* Nouvelles règles si la fenêtre fait au plus 1024px de large */
@media all and (max-width: 1024px)
{
    #pub
    {
        display: none;
  }
}
/* Nouvelles règles si la fenêtre fait au plus 600px de large */
@media all and (max-width: 600px)
{
  .bigbox {
  vertical-align:top;
  height:250px;
  min-width:200px;
  max-width:300px;
  text-align:left;
  background-color: #F0F7EF;
  margin-top:30px;
  margin-left:2%;
  margin-right:2%;
          }
    nav
    {
    display: none;
    }
     
}

Projet de Caroussel / Slider...

Qui est en ligne