Effets CSS sur un diaporama

Eritou Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   -  
Eritou Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour à tous,
A l'aide d'un tuto, je tente de mettre une opacité et un cartouche animé (span) lors du survol de mes vignettes. cela marche très bien pour la première (malgré un décalage du cartouche que je n'arrive pas à régler). Le problème est que les vignettes suivantes n'apparaissent pas, seul le cartouche apparaît. J'ai un peu cherché partout :p J'ai seulement constaté qu'en supprimant la position relative de .work, les photos apparaissent, mais pour le coup, le cartouche figure uniquement sur la première vignette et l'opacité est complètement décalée.
Je vous joins les CSS : 
.vignette {
	position: relative;
	height: 175px;
	width: 270px;
	text-align: center;
	padding-bottom: 0px;
	margin: 0px 8px 16px;
}
.fancybox-custom .fancybox-skin {
	box-shadow: 0 0 50px #;
		}

#galerie1 {
	width: 100%;
	margin: 0px auto;
	padding: 0px;
	text-align: center;
}
#works {
    margin-bottom: 0px;
    overflow: hidden;
    margin-top: 0px;
}

#works .work {
    overflow: hidden;
    width: 270px;
    height: 175px;
    cursor: pointer;
    position: relative;
    -moz-transition: all .6s; 
    -webkit-transition: all .5s; 
    -o-transition: all .6s; 
    transition: all .6s;
    float: left;
    margin-right: 0px;
    margin-bottom: 0px;
}

#works .work img {
    
}

#works .work .fond {
    width: 270px;
    height: 175px;
    position: absolute;
}

#works .work:hover .fond {
    background: url(img/fond.png);
    right: 0;
    bottom: 0;
}

#works .work span {
	text-transform: uppercase;
	text-align: center;
	position: absolute;
	/* Voici la position du span lorsqu'on n'est pas en :hover */
	top: 105px;
	left: -280px;
	padding-left: 70px;
	padding-right: 8px;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	font: 20px Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	background-color: #30F;
	color: #FFFFFF;
}

#works .work:hover span {
	/* Voici la position du span lorsqu'on est en :hover */
    left: 8px;
}


ainsi que le HTML concerné : 
<div id="main">
    <div class="isotope" id="works">
	    <a class="fancybox" href="img/kgbig.jpg" data-fancybox-group="gallery" alt="Kenny Garrett"><div class="work"><img src="img/kg.jpg" alt="" class="vignette divers"/>
	    <div class="fond"></div><!-- .fond -->
	    <span>TEST<br />TEST</span></div></a>
	    <a class="fancybox" href="img/kgbig.jpg" data-fancybox-group="gallery" alt="Kenny Garrett"><div class="work"><img src="img/kg.jpg" alt="" class="vignette divers"/>
	    <div class="fond"></div><!-- .fond -->
	    <span>TEST<br />TEST</span></div></a>
	    <a class="fancybox" href="img/jcbig.jpg" data-fancybox-group="gallery" alt="Jeff Coffin"><div class="work"><img src="img/jc.jpg" alt="" class="vignette divers"/>
	    <div class="fond"></div><!-- .fond -->
	    <span>TEST<br />TEST</span></div></a>
	    <a class="fancybox" href="img/jcbig2.jpg" data-fancybox-group="gallery" alt="Jeff Coffin"><div class="work"><img src="img/jc-2.jpg" alt="" class="vignette divers"/>
	    <div class="fond"></div><!-- .fond -->
	    <span>TEST<br />TEST</span></div></a>
	    <a class="fancybox" href="img/jcbig2.jpg" data-fancybox-group="gallery" alt="Jeff Coffin"><div class="work"><img src="img/jc-2.jpg" alt="" class="vignette divers"/>
	    <div class="fond"></div><!-- .fond -->
	    <span>TEST<br />TEST</span></div></a>
	    <a class="fancybox" href="img/hbbig.jpg" data-fancybox-group="gallery" alt="Hiram Bullock"><div class="work"><img src="img/hb.jpg" alt="" class="vignette divers"/>
	    <div class="fond"></div><!-- .fond -->
	    <span>TEST<br />TEST</span></div></a>

Si quelqu'un a une idée...
Merci pour votre aide et bonne après midi,
E.

3 réponses

Réponse 1 / 3
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Salut
déjà supprime le div .fond

met ton span en display block

applique le fond sur le :hover span ce sera plus clair

en général l'application d'une infobulle par span se fait comme cela

#works a span {display:none;}

#works a:hover span {display:block; + les position, couleur, autres, etc ...}

ensuite comme c'est un fancybox il se peut que le js change des class ou id, des positionnement et que ca affecte l'affichage du span
donc fait afficher le code source généré (avec firefox) afin de voir la source générée par la fancybox

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
0
Réponse 2 / 3
Eritou Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   4
 
Slt animostab,
Merci pour ta réponse.
En mettant le fond dans le span:hover, celui-ci s'applique au span et non à la vignette :(
Le problème sont les vignettes qui ne s'affichent pas excepté la première.
"J'ai seulement constaté qu'en supprimant la position relative de .work, les photos apparaissent, mais pour le coup, le cartouche figure uniquement sur la première vignette et l'opacité est complètement décalée" . J'ai signalé cela uniquement à titre indicatif, la position relative du .work est importante (tuto).
Si j'en reviens au html de mon diapo de base : 
<a class="fancybox" href="img/hbbig.jpg" data-fancybox-group="gallery" title="Hiram Bullock"><img src="img/hb.jpg" alt="" class="vignette divers"/></a>

je n'ai aucun problème, c'est en attribuant les classes suivant qu'elles n'apparaissent plus (sauf le première photo du diaporama) 
<a class="fancybox" href="img/hbbig.jpg" data-fancybox-group="gallery" alt="Hiram Bullock"><div class="work"><img src="img/hb.jpg" alt="" class="vignette divers"/>
	    <div class="fond"></div><!-- .fond -->
	    <span>TEST<br />TEST</span></div></a>

Merci pour ton aide et bonne fin de journée,
E.
0
Réponse 3 / 3
Eritou Messages postés 110 Date d'inscription   Statut Membre Dernière intervention   4
 
Slt animostab,
OOPS, le code : 
<html>
<head>
	<title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
body {
	/* [disabled]max-width: 100%; */
	margin: 0px auto;
	width: 100%;
	height: auto;
	text-align: center;
	padding: 0px;
}
#main {
	width: 100%;
	margin: 5px auto auto;
	text-align: center;
	/* [disabled]position: relative; */
	float: none;
	clear: none;
	height: auto;
}
h1 {
    color:#069;	
}
h3 {
	color: #66FF33;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
div {
	text-align: center;
}
ul {
    display:table;
    margin:1em auto;
    padding:0;
    list-style:none;
    text-align:center;
    width: 100%;
}
/*---- button ----*/
.button {
	display: inline;
	line-height: 2em;
	background: #EEE;
	text-shadow: none;
	cursor: pointer;
	width: 1144px;
	text-align: center;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	height: auto;
	margin-bottom: 0px;
	margin-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
	position: relative;
	top: 0px;
}
/*-- effet sur bouton --*/
.button:hover {
    background-color:#8CF;
    text-shadow:none;
}
.button:active,.button.is-checked {
    background-color:#28F;
}
.button.is-checked {
	color: white;
	text-shadow: none;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
.button:active {
    box-shadow: none;
}
/*---- conteneur isotope ----*/
.isotope {
	width: 1144px;
	height: auto;
	/* [disabled]float: left; */
	margin: 0px auto auto;
	position: relative;
	top: 0px;
	left: 0px;
	right: 0px;
}
/* ---- .vignette ---- */
.vignette {
	position: relative;
	height: 175px;
	width: 270px;
	text-align: center;
	padding-bottom: 0px;
	margin: 0px 8px 16px;
}
.fancybox-custom .fancybox-skin {
	box-shadow: 0 0 50px #;
		}

#galerie1 {
	width: 100%;
	margin: 0px auto;
	padding: 0px;
	text-align: center;
}
#works {
    margin-bottom: 0px;
    overflow: hidden;
    margin-top: 0px;
}

#works .work {
    overflow: hidden;
    width: 270px;
    height: 175px;
    cursor: pointer;
    position: relative;
    -moz-transition: all .6s; 
    -webkit-transition: all .5s; 
    -o-transition: all .6s; 
    transition: all .6s;
    float: left;
    margin-right: 0px;
    margin-bottom: 0px;
}

#works .work img {
    
}


#works .work span {
	text-transform: uppercase;
	text-align: center;
	position: absolute;
	/* Voici la position du span lorsqu'on n'est pas en :hover */
	top: 105px;
	left: -280px;
	padding-left: 70px;
	padding-right: 8px;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	font: 20px Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	background-color: #30F;
	color: #FFFFFF;
	display: block;
}

#works .work:hover span {
	/* Voici la position du span lorsqu'on est en :hover */
	left: 8px;
	background: url(img/fond.png);
	display: block;
}

    </style>
	<!-- Add jQuery library -->
	<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>

	<!-- Add mousewheel plugin (this is optional) -->
	<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>

	<!-- Add fancyBox main JS and CSS files -->
	<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
	<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />

	<!-- Add Button helper (this is optional) -->
	<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
	<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

	<!-- Add Thumbnail helper (this is optional) -->
	<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
	<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

	<!-- Add Media helper (this is optional) -->
	<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
    <script src="http://isotope.metafizzy.co.s3-website-us-east-1.amazonaws.com/isotope.pkgd.js"></script>
    <script src="http://isotope.metafizzy.co.s3-website-us-east-1.amazonaws.com/bower_components/classie/classie.js"></script>


</head>
<body>
<div id="filters" class="button-group">
    <ul>
      <li class="button is-checked" data-filter=".divers">Divers</li>
      <li class="button" data-filter=".test2">Test_2</li>
  </ul>
</div>
<div id="main">
    <div class="isotope" id="works">
	    <a class="fancybox" href="img/kgbig.jpg" data-fancybox-group="gallery" alt="Kenny Garrett"><div class="work"><img src="img/kg.jpg" alt="" class="vignette divers"/>
	    <div class="fond"></div><!-- .fond -->
	    <span>TEST<br />TEST</span></div></a>
	    <a class="fancybox" href="img/kgbig.jpg" data-fancybox-group="gallery" alt="Kenny Garrett"><div class="work"><img src="img/kg.jpg" alt="" class="vignette divers"/>
	    <div class="fond"></div><!-- .fond -->
	    <span>TEST<br />TEST</span></div></a>
	    <a class="fancybox" href="img/jcbig.jpg" data-fancybox-group="gallery" alt="Jeff Coffin"><div class="work"><img src="img/jc.jpg" alt="" class="vignette divers"/>
	    <div class="fond"></div><!-- .fond -->
	    <span>TEST<br />TEST</span></div></a>
	    <a class="fancybox" href="img/jcbig2.jpg" data-fancybox-group="gallery" alt="Jeff Coffin"><div class="work"><img src="img/jc-2.jpg" alt="" class="vignette divers"/>
	    <div class="fond"></div><!-- .fond -->
	    <span>TEST<br />TEST</span></div></a>
	    <a class="fancybox" href="img/jcbig2.jpg" data-fancybox-group="gallery" alt="Jeff Coffin"><div class="work"><img src="img/jc-2.jpg" alt="" class="vignette divers"/>
	    <div class="fond"></div><!-- .fond -->
	    <span>TEST<br />TEST</span></div></a>
	    <a class="fancybox" href="img/hbbig.jpg" data-fancybox-group="gallery" alt="Hiram Bullock"><div class="work"><img src="img/hb.jpg" alt="" class="vignette divers"/>
	    <div class="fond"></div><!-- .fond -->
	    <span>TEST<br />TEST</span></div></a>
	    <a class="fancybox" href="img/hbbig.jpg" data-fancybox-group="gallery" title="Hiram Bullock"><img src="img/hb.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/hbbig2.jpg" data-fancybox-group="gallery" title="Hiram Bullock"><img src="img/hb-2.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/hbbig3.jpg" data-fancybox-group="gallery" title="Hiram Bullock"><img src="img/hb-3.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/dcbig.jpg" data-fancybox-group="gallery" title="Dennis Chambers"><img src="img/dc.jpg" alt="" class="vignette divers"/></a>        
	    <a class="fancybox" href="img/dcbig2.jpg" data-fancybox-group="gallery" title="Dennis CHambers"><img src="img/dc-2.jpg" alt="" class="vignette divers" border="0"/></a>
	    <a class="fancybox" href="img/bmbig.jpg" data-fancybox-group="gallery" title="Brandford Marsalis"><img src="img/bm.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/bfbig.jpg" data-fancybox-group="gallery" title="Bela Fleck"><img src="img/bf.jpg" alt="" class="vignette divers"/></a>
	    <a class="fancybox" href="img/bfbig2.jpg" data-fancybox-group="gallery" title="Bela Fleck"><img src="img/bf-2.jpg" alt="" class="vignette divers"/></a>
        			    
	    <a rel='diapo1' class="diapo1" href="img/diapo_a.jpg" title="Ma photo 1"><img src="2_b.jpg" alt="" class="vignette test2" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_b.jpg" title="Ma photo 2" style='display:none'><img alt="" src="diapo_b.jpg" class="vignette" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_c.jpg" title="Ma photo 3" style='display:none'><img alt="" src="diapo_c.jpg" class="vignette" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_d.jpg" title="Ma photo 4" style='display:none'><img alt="" src="diapo1_d.jpg" class="vignette" /></a>
        
	    <a rel='diapo1' class="diapo1" href="img/diapo_a.jpg" title="Ma photo 1"><img src="2_b.jpg" alt="" class="vignette test2" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_b.jpg" title="Ma photo 2" style='display:none'><img alt="" src="diapo_b.jpg" class="vignette" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_c.jpg" title="Ma photo 3" style='display:none'><img alt="" src="diapo_c.jpg" class="vignette" /></a>
	    <a rel='diapo1' class="diapo1" href="diapo_d.jpg" title="Ma photo 4" style='display:none'><img alt="" src="diapo1_d.jpg" class="vignette" /></a>


</div>
</body>
<script>
docReady( function() {
  // init Isotope
  var iso = new Isotope( '.isotope', {
    filter: '.divers',      // n'affichera que les éléments du conteneur ayant pour class 'divers'
    itemSelector: '.vignette',
    layoutMode: 'fitRows'
  });
  // bind filter button click
  var filtersElem = document.querySelector('#filters');
  eventie.bind( filtersElem, 'click', function( event ) {
    // only work with buttons
    if ( !matchesSelector( event.target, 'li' ) ) {
      return;
    }
    var filterValue = event.target.getAttribute('data-filter');
    iso.arrange({ filter: filterValue });
  });
  // change is-checked class on buttons
  var buttonGroups = document.querySelectorAll('.button-group');
  for ( var i=0, len = buttonGroups.length; i < len; i++ ) {
    var buttonGroup = buttonGroups[i];
    radioButtonGroup( buttonGroup );
  }
});
function radioButtonGroup( buttonGroup ) {
  eventie.bind( buttonGroup, 'click', function( event ) {
    // only work with buttons
    if ( !matchesSelector( event.target, 'li' ) ) {
      return;
    }
    classie.remove( buttonGroup.querySelector('.is-checked'), 'is-checked' );
    classie.add( event.target, 'is-checked' );
  });
}
</script>

	<script type="text/javascript">
		$(document).ready(function() {
			/*
			 *  Simple image gallery. Uses default settings
			 */

			$('.fancybox').fancybox();

			/*
			 *  Different effects
			 */

			// Change title type, overlay closing speed
			$(".fancybox-effects-a").fancybox({
				helpers: {
					title : {
						type : 'outside'
					},
					overlay : {
						speedOut : 0
					}
				}
			});

			// Disable opening and closing animations, change title type
			$(".fancybox-effects-b").fancybox({
				openEffect  : 'none',
				closeEffect	: 'none',

				helpers : {
					title : {
						type : 'over'
					}
				}
			});

			// Set custom style, close if clicked, change title type and overlay color
			$(".fancybox-effects-c").fancybox({
				wrapCSS    : 'fancybox-custom',
				closeClick : true,

				openEffect : 'none',

				helpers : {
					title : {
						type : 'inside'
					},
					overlay : {
						css : {
							'background' : 'rgba(238,238,238,0.85)'
						}
					}
				}
			});

			// Remove padding, set opening and closing animations, close if clicked and disable overlay
			$(".fancybox-effects-d").fancybox({
				padding: 0,

				openEffect : 'elastic',
				openSpeed  : 150,

				closeEffect : 'elastic',
				closeSpeed  : 150,

				closeClick : true,

				helpers : {
					overlay : null
				}
			});

			/*
			 *  Button helper. Disable animations, hide close button, change title type and content
			 */

			$('.fancybox-buttons').fancybox({
				openEffect  : 'none',
				closeEffect : 'none',

				prevEffect : 'none',
				nextEffect : 'none',

				closeBtn  : false,

				helpers : {
					title : {
						type : 'inside'
					},
					buttons	: {}
				},

				afterLoad : function() {
					this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
				}
			});


			/*
			 *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
			 */

			$('.fancybox-thumbs').fancybox({
				prevEffect : 'none',
				nextEffect : 'none',

				closeBtn  : false,
				arrows    : false,
				nextClick : true,

				helpers : {
					thumbs : {
						width  : 50,
						height : 50
					}
				}
			});

			/*
			 *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
			*/
			$('.fancybox-media')
				.attr('rel', 'media-gallery')
				.fancybox({
					openEffect : 'none',
					closeEffect : 'none',
					prevEffect : 'none',
					nextEffect : 'none',

					arrows : false,
					helpers : {
						media : {},
						buttons : {}
					}
				});

			/*
			 *  Open manually
			 */

			$("#fancybox-manual-a").click(function() {
				$.fancybox.open('1_b.jpg');
			});

			$("#fancybox-manual-b").click(function() {
				$.fancybox.open({
					href : 'iframe.html',
					type : 'iframe',
					padding : 5
				});
			});

			$("#fancybox-manual-c").click(function() {
				$.fancybox.open([
					{
						href : '1_b.jpg',
						title : 'My title'
					}, {
						href : '2_b.jpg',
						title : '2nd title'
					}, {
						href : '3_b.jpg'
					}
				], {
					helpers : {
						thumbs : {
							width: 75,
							height: 50
						}
					}
				});
			});


		});
	</script>
        <script>
    $(function(){
        $("a.diapo1").fancybox({
            'transitionIn' : 'none',
            'transitionOut' : 'none',
            'titlePosition' : 'over',
            'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
            }
        });
    });
   

    </script>
</html>

Bonne journée,
E.
0

Discussions similaires

Durée d'une diapositive animée
bibibibi99 -
bibibibi99 -

2 réponses
Transition automatique diapo suivant
Héloïse -
laugreen -

4 réponses
Lecture d'un diaporama en automatique
fravernat -
Mike-31 -

2 réponses
Problème de crayon
Artatniap -
Artatniap -

2 réponses
avancement automatique des diapositives
NEOPHYTE4 -
NEOPHYTE4 -

11 réponses