Réglage d'un Slideshow

[cheapsitebab]

Bonjour, 

Je fais appel à vous pour votre analyse critique et rapide.
J'ai placé un slideshow sur le centre d'une page HTML et cela fonctionne parfaitement (déplacement manuel et automatique). Sauf que j'ai besoin de faire apparaître de façon permanente les flèches de défilement des images qui se trouvent à gauche et à droite de l'image. Ils n'apparaissent que lorsqu'on se déplace sur le cadre du slideshow (cette page est en construction donc nullement fini).
Ma page : http://www.cheapsitebab.fr/pdelizaberry/Defile_Art.php 
Je pense que la solution se trouve dans le css du slide (Que je trouve un peu compliqué je l'avoue, je me doute qu'il s'agit d'une codification autour d'un "onmouseover")

mais dans ce bric à brac je ne le trouve pas (il s'agit du css du slide):

 

.box_skitter{position:relative;width:800px;height:300px;background:#000}.box_skitter img{max-width:none}.box_skitter ul{display:none}.box_skitter .container_skitter{overflow:hidden;position:relative}.box_skitter .image{overflow:hidden}.box_skitter .image img{display:none}.box_skitter

 

../.. Contenu supprimé par Dan. Voir post ci-dessous.

Merci de l'aide que vous pourrez m'apporter.

[Dan]

Déjà en passant ce css dans un "beautyfier", on verra peut-être plus clair, non ?

Parce que ton code ne donne certainement pas envie de s'y plonger....

 

.box_skitter {
    position: relative;
    width: 800px;
    height: 300px;
    background: #000
}
.box_skitter img {
    max-width: none
}
.box_skitter ul {
    display: none
}
.box_skitter .container_skitter {
    overflow: hidden;
    position: relative
}
.box_skitter .image {
    overflow: hidden
}
.box_skitter .image img {
    display: none
}
.box_skitter .box_clone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    overflow: hidden;
    display: none;
    z-index: 20
}
.box_skitter .box_clone img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20
}
.box_skitter .prev_button {
    position: absolute;
    top: 50%;
    left: 35px;
    z-index: 152;
    width: 42px;
    height: 42px;
    overflow: hidden;
    text-indent: -9999em;
    margin-top: -25px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}
.box_skitter .next_button {
    position: absolute;
    top: 50%;
    right: 35px;
    z-index: 152;
    width: 42px;
    height: 42px;
    overflow: hidden;
    text-indent: -9999em;
    margin-top: -25px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}
.box_skitter .prev_button:hover,
.box_skitter .next_button:hover {
    opacity: .5!important
}
.box_skitter .info_slide {
    position: absolute;
    top: -15px;
    left: -15px;
    z-index: -100;
    background: #000;
    color: rgba(0, 0, 0, 0.9);
    font: bold 1px arial;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    opacity: .75
}
.box_skitter .container_thumbs {
    position: relative;
    overflow: hidden;
    height: 50px
}
.box_skitter .info_slide_thumb {
    height: 50px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    overflow: hidden;
    top: auto;
    top: 0;
    left: 0;
    padding: 0!important;
    opacity: 1.0
}
.box_skitter .box_scroll_thumbs .scroll_thumbs {
    position: absolute;
    bottom: 60px;
    left: 50px;
    background: #ccc;
    background: -moz-linear-gradient(-90deg, #555, #fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));
    width: 200px;
    height: 10px;
    overflow: hidden;
    text-indent: -9999em;
    z-index: 101;
    cursor: pointer;
    border: 0 solid #333
}
.box_skitter .info_slide_dots {
    position: absolute;
    bottom: -40px;
    z-index: 151;
    padding: 5px 0 5px 5px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px
}
.loading {
    position: absolute;
    top: 50%;
    right: 50%;
    z-index: 10000;
    margin: -16px -16px;
    color: #fff;
    text-indent: -9999em;
    overflow: hidden;
    background: url(../images/ajax-loader.gif) no-repeat left top;
    width: 32px;
    height: 32px
}
.box_skitter .label_skitter {
    z-index: 150;
    position: absolute;
    bottom: 0;
    left: 0;
    display: none
}
.box_skitter .label_skitter {
    z-index: 100;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #000;
    display: none;
    opacity: .8
}
.box_skitter .label_skitter p {
    padding: 10px;
    margin: 0;
    font: bold 16px arial, tahoma;
    letter-spacing: -1px
}
.box_skitter .progressbar {
    background: #000;
    position: absolute;
    top: 5px;
    left: 15px;
    height: 5px;
    width: 200px;
    z-index: 99;
    border-radius: 20px
}
.box_skitter .preview_slide {
    display: none;
    position: absolute;
    z-index: 152;
    bottom: 30px;
    left: -40px;
    width: 100px;
    height: 100px;
    background: #fff;
    border: 1px solid #222;
    -moz-box-shadow: rgba(0, 0, 0, 0.7) 2px 2px 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.7) 2px 2px 5px;
    box-shadow: rgba(0, 0, 0, 0.7) 2px 2px 5px;
    overflow: hidden
}
.box_skitter .preview_slide ul {
    height: 100px!important;
    overflow: hidden!important;
    margin: 0!important;
    list-style: none!important;
    display: block!important;
    position: absolute!important;
    top: 0;
    left: 0
}
.box_skitter .preview_slide ul li {
    width: 100px!important;
    height: 100px!important;
    overflow: hidden!important;
    float: left!important;
    margin: 0!important;
    padding: 0!important;
    position: relative!important;
    display: block!important
}
.box_skitter .preview_slide ul li img {
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    height: 150px!important;
    width: auto!important
}
#overlay_skitter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9998;
    opacity: 1;
    background: #000
}
.box_skitter .focus_button {
    position: absolute;
    top: 50%;
    z-index: 100;
    width: 42px;
    height: 42px;
    overflow: hidden;
    text-indent: -9999em;
    margin-top: -25px;
    opacity: 0;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}
.box_skitter .play_pause_button {
    position: absolute;
    top: 50%;
    z-index: 151;
    width: 42px;
    height: 42px;
    overflow: hidden;
    text-indent: -9999em;
    margin-top: -25px;
    opacity: 0;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}
.box_skitter_large {
    width: 800px;
    height: 300px
}
.box_skitter_small {
    width: 200px;
    height: 100px
}
.box_skitter .focus_button,
.box_skitter .next_button,
.box_skitter .prev_button,
.box_skitter .play_pause_button {
    display: block;
    background: url('../images/sprite-default.png') no-repeat
}
.box_skitter .next_button {
    background-position: -0px -42px;
    width: 42px;
    height: 42px
}
.box_skitter .prev_button {
    background-position: -42px -42px;
    width: 42px;
    height: 42px
}
.box_skitter .play_pause_button {
    background-position: -0px -0px;
    width: 42px;
    height: 42px
}
.box_skitter .play_pause_button.play_button {
    background-position: -0px -84px;
    width: 42px;
    height: 42px
}
.box_skitter .focus_button {
    background-position: -42px -0px;
    width: 42px;
    height: 42px
}
.skitter-minimalist .prev_button,
.skitter-minimalist .next_button,
.skitter-minimalist .play_pause_button,
.skitter-minimalist .focus_button {
    display: block;
    background: url('../images/sprite-minimalist.png') no-repeat!important
}
.skitter-minimalist .prev_button {
    background-position: -0px -0px!important;
    width: 24px!important;
    height: 28px!important;
    left: -45px!important
}
.skitter-minimalist .next_button {
    background-position: -0px -28px!important;
    width: 24px!important;
    height: 28px!important;
    right: -45px!important
}
.skitter-minimalist .play_pause_button {
    background-position: -0px -74px!important;
    width: 18px!important;
    height: 18px!important
}
.skitter-minimalist .play_pause_button.play_button {
    background-position: -0px -56px!important;
    width: 18px!important;
    height: 18px!important
}
.skitter-minimalist .focus_button {
    background-position: -0px -92px!important;
    width: 18px!important;
    height: 18px!important
}
.skitter-minimalist .info_slide {
    background: transparent
}
.skitter-round .prev_button,
.skitter-round .next_button,
.skitter-round .play_pause_button,
.skitter-round .focus_button {
    display: block;
    background: url('../images/sprite-round.png') no-repeat
}
.skitter-round .prev_button {
    background-position: -0px -0px;
    width: 23px;
    height: 47px;
    left: -23px
}
.skitter-round .next_button {
    background-position: -23px -0px;
    width: 23px;
    height: 47px;
    right: -23px
}
.skitter-round .play_pause_button {
    background-position: -0px -70px;
    width: 47px;
    height: 23px;
    top: 24px;
    left: 24px!important
}
.skitter-round .play_pause_button.play_button {
    background-position: -0px -47px;
    width: 47px;
    height: 23px;
    top: 24px
}
.skitter-round .focus_button {
    background-position: -0px -93px;
    width: 47px;
    height: 23px;
    top: 24px;
    left: 82px!important
}
.skitter-round .info_slide {
    background: transparent
}
.skitter-round .progressbar {
    top: -10px;
    left: 0;
    background: #333;
    box-shadow: rgba(255, 255, 255, 0.3) 1px 1px 0
}
.skitter-clean .prev_button,
.skitter-clean .next_button,
.skitter-clean .play_pause_button,
.skitter-clean .focus_button {
    display: block;
    background: url('../images/sprite-clean.png') no-repeat
}
.skitter-clean .prev_button {
    background-position: 0 0;
    width: 47px;
    height: 46px
}
.skitter-clean .next_button {
    background-position: 0 -46px;
    width: 47px;
    height: 46px
}
.skitter-clean .play_pause_button {
    background-position: -0px -133px;
    width: 41px;
    height: 41px
}
.skitter-clean .play_pause_button.play_button {
    background-position: -0px -92px;
    width: 41px;
    height: 41px
}
.skitter-clean .focus_button {
    background-position: -0px -174px;
    width: 41px;
    height: 41px
}
.skitter-clean .info_slide {
    background: transparent
}
.skitter-clean .info_slide_dots {
    bottom: 10px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 0
}
.skitter-clean .progressbar {
    top: 5px;
    left: 5px;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 0
}
.skitter-square .play_pause_button,
.skitter-square .next_button,
.skitter-square .focus_button,
.skitter-square .prev_button {
    display: block;
    background: url('../images/sprite-square.png') no-repeat
}
.skitter-square .play_pause_button {
    background-position: -55px -0px;
    width: 55px;
    height: 55px;
    top: 10px!important;
    left: 10px!important;
    bottom: auto!important;
    right: auto!important;
    margin-top: 0
}
.skitter-square .play_pause_button.play_button {
    background-position: -0px -0px;
    width: 55px;
    height: 55px
}
.skitter-square .focus_button {
    background-position: -55px -55px;
    width: 55px;
    height: 55px;
    top: 10px!important;
    left: 65px!important;
    bottom: auto!important;
    right: auto!important;
    margin-top: 0
}
.skitter-square .next_button {
    background-position: -0px -55px;
    width: 55px;
    height: 55px;
    top: auto;
    left: auto;
    bottom: 10px;
    right: 10px
}
.skitter-square .prev_button {
    background-position: -0px -110px;
    width: 55px;
    height: 55px;
    top: auto;
    left: auto;
    bottom: 10px;
    right: 65px
}
.skitter-square .info_slide {
    background: transparent
}
.skitter-square .progressbar {
    top: 0!important;
    left: 0!important;
    width: 100%;
    background: #fff;
    border-radius: 0;
    height: 2px
}

 

Je dirais que tu peux tenter de supprimer le /hover dans ceci :

 

.box_skitter .prev_button:hover,
.box_skitter .next_button:hover {
    opacity: .5!important
}

[cheapsitebab]

Merci Dan, je vais essayer ta solution.

 

Ps:ce n'est pas mon code (et en effet il était complètement opaque)

[Dan]

Attention, car la page d'accueil de ton site pèse tout de même 17MB ... c'est énooooorme !

 

[cheapsitebab]

En faite la page d'accueil du vrai site final lui ne fait que 758.6 kB et la page du défilé d'images lui fait un très beau score de 15,1 mb.

Mais je ne peux pas l'éviter car les images sont de très très bonne qualité et voulu par le client.

 

Pour le css pas de changement.... avec sous sans 

.box_skitter .prev_button:hover,
.box_skitter .next_button:hover {
    opacity: .5!important
}

[cheapsitebab]

J'ai allégé le code (skitter.styles.min.css) pourtant mes flèches n'apparaissent que lorsque je passe sur l'image ..... Et je ne sais toujours pas pourquoi je n'arrive pas les rendre visible sans passer au dessus de l'image.....

je joins d'autres fichiers (css et js) aussi même si je suis étonné que cela ne soit pas dans le css.

 

skitter.styles.min.css

skitter.styles.css

styles.css

jquery.easing.1.3.js

jquery.skitter.js

jquery.skitter.min.js

jquery-2.1.1.min.js

[cheapsitebab]

Merci Dan,

 

La solution fonctionne en faite mais j'ai séparé ta ligne de code car cela ne fonctionnait que d'un côté.

La solution finale est :

 

.box_skitter .prev_button{
    opacity: .5!important
}

.box_skitter .next_button{
    opacity: .5!important
}

 

 

Cela clôture ma question de fonctionnement merci

 

J'aurai appris en plus l’existence de "  beautyfier " ce qui me sera très utile pour d'autre encodage fait par des machines.

 

Si tu as une solution d'un preloading d'images qui permettrait un allègement de la page de 15,1 mb cela peut m'aider aussi (même si cela n'empêche pas le fonctionnement, il faut être seulement patient quelques secondes avec la fibre).

 

Grand merci :))

Modifié 6 Février 2016 par cheapsitebab