Se connecter / S'enregistrer

Résolu Modifier un scripts

Solutions (13)
Tags :
  • Script
  • Programmation
|
Bonjour

je souhaite modifie le script de cette page "http://dexea.fr/book.html" à savoir faire baisser les points de défilement sous les visuels et recentrer un peu les losanges sur les côtés voici le script :

(je ne sais pas si c'est dans celui ci ou dans l'autre)

  1. .galleria-container{height:100%;position:relative;overflow:hidden;-moz-box-shadow:0 0 4px rgba(0,0,0,.1);-webkit-box-shadow:0 0 4px rgba(0,0,0,.1);}
  2. .galleria-stage{bottom:5px;top:5px;right:5px;left:5px;position:absolute;overflow:hidden;}
  3. .galleria-thumbnails-container{height:30px;width:100%;bottom:5px;position:absolute;left:0;z-index:2;}
  4. .galleria-thumbnails-list{text-align:center;}
  5. .galleria-thumbnails .galleria-image{display:inline-block;zoom:1; *display: inline;width:12px;height:12px;background:url(dot.png) no-repeat 0px 0;margin-right:5px;cursor:pointer;}
  6. .galleria-thumbnails .active .img{}
  7. .galleria-counter{font:normal 11px/18px arial,sans-serif;z-index:2;color:#444;margin-top:6px;margin-right:12px;float:left;}
  8. .galleria-counter span{color:#888;}
  9. .galleria-thumbnails .galleria-image:hover{opacity:1!important;}
  10. .galleria-loader{background:#000 url(loader.gif) no-repeat 50% 50%;width:100%;height:100%;position:absolute;top:0;left:0;opacity:.3;z-index:3;display:none;}
  11. .galleria-info{color:#666;z-index:3;text-align:center;font:italic 14px/1.4 georgia,serif;padding-top:10px;}
  12. .galleria-counter{display:none;}
  13. .galleria-info-close,
  14. .galleria-info-link{display:none;}
  15. .galleria-image-nav{position:absolute;height:100%;width:100%;left:0;top:0;}
  16. .galleria-image-nav-left,
  17. .galleria-image-nav-right{opacity:.4;cursor:pointer;width:50%;height:100%;position:absolute;background:url(l.png) no-repeat 7% 50%;z-index:2;
  18. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40);}
  19. .galleria-image-nav-right{left:auto;right:0;background:url(r.png) no-repeat 93% 50%;z-index:2;}
  20. .galleria-image-nav-left:hover,
  21. .galleria-image-nav-right:hover{opacity:1;
  22. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100);}


merci
Contenus similaires
Meilleure solution
partage
, Modérateur |
Non :) 

Si tu veux les supprimer, tu peux faire:
  1. .galleria-image-nav { display: none; }
  • Commenter cette solution |
Score
0
òh
òi
|
ok merci bcp :) 
  • Commenter cette réponse |
Score
0
òh
òi
|
Meilleure réponse sélectionnée par melo044.
  • Commenter cette réponse |
Score
0
òh
òi
|
ouais mais ça va pas supprimer les losanges sur le côtés?
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Tu peux les supprimer oui si tu préfères.
Pour les supprimer, plutôt que de modifier le JS, tu fais ça avec un peu de CSS:
  1. .galleria-thumbnails-container { display:none; }
  • Commenter cette réponse |
Score
0
òh
òi
|
ah? du coup si je supprime les visuels des points en bas je les aurai plus? c'est peut etre ce qu'il y a de mieux à faire...
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
En effet, le soucis est qu'il génère les tailles d'image en fonction du container...
Et puis c'est fait n'importe comment avec des positions absolutes tout pourries...
  • Commenter cette réponse |
Score
0
òh
òi
|
désolée ça marche pas, ça grossi le visuel
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Ah d'accord, pardon, c'est le .js qui génère le code HTML.
Alors dans ton code CSS tu as:
  1. .galleria-container{height:100%;position:relative;overflow:hidden;-moz-box-shadow:0 0 4px rgba(0,0,0,.1);-webkit-box-shadow:0 0 4px rgba(0,0,0,.1);}

Remplaces le height:100%; par height: 440px !important;
  • Commenter cette réponse |
Score
0
òh
òi
|
ben j'ai fait aussi mais ça marche pas :

<!DOCTYPE html>
<html lang="sv">
<head>
<title>book</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.mi..."></script>
<script src="../Scripts/galleria.js"></script>
<style>
html,body{
background-color: #000000;
}
.content{
color:#000000;
font:14px/1.4 arial,sans-serif;
width:600px;
margin-top: 40px;
margin-right: auto;
margin-bottom: 40px;
margin-left: auto;
background-color: #000000;
}
h1{line-height:1.1;letter-spacing:-1px;}
#galleria{
height:440px;
background:#000000;
}
body {
background-color: #000000;
}
body,td,th {
color: #FFFFFF;
}
.Style1 {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: underline;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.Style2 {
font-size: 12px
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

<body>
<div>
<h1> </h1>
<div id="galleria">
<img src="ImPgn/couv-flyer.png" width="202" height="425">
<img src="ImPgn/flyer.png" width="567" height="566">
<img src="ImPgn/Elfes-recto.png" width="850" height="406">
<img src="ImPgn/Elfes-verso.png" width="850" height="399">
<img src="ImPgn/parvis.png" width="822" height="390">
<img src="ImPgn/parvis2.png" width="815" height="385">

<img src="ImPgn/pirotterie.png" width="510" height="418"></a>
<img src="ImPgn/vitalis.png" width="567" height="463"></div>
<p align="center" class="Style1"><a href="index.html" target="_top" class="Style2">Retour</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

<p> </p>
<p> </p>
<p> </p>

<p>  </p>
<script>

// Load theme
Galleria.loadTheme('../Scripts/galleria.dots.js');

$('#galleria').galleria();

</script>
</body>
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Je ne t'ai pas parlé de fichier JS mais de fichier HTML, c'est dans ton fichier book.html.
  • Commenter cette réponse |
Score
0
òh
òi
|
ben dans le fichier "galeria.js" j'ai ça :

Edit OmaR: suppression du code inutile
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

Dans le code HTML tu devrais avoir ça :
  1. <div class="galleria-container" style="height: 400px;">


Remplace le 400 par 440
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS