Afficher un autre « objet » lorsque chaque chargement de l'image de jQuery Galleria

StackOverflow https://stackoverflow.com/questions/2434826

  •  19-09-2019
  •  | 
  •  

Question

Je suis à la recherche d'un moyen de déclencher une fonction différente sur chaque image individuelle. J'utilise le plug-in Galleria Jquery et avoir mis en place sur mon site. Le problème est que je veux afficher un div avec des informations en fonction de l'image est chargée. Je ne peux pas comprendre comment capturer l'image qui est affichée et comment créer une condition sur cette base.

Était-ce utile?

La solution

  

MISE À JOUR

DEMO: http://jsbin.com/egavo/6

sans le piratage du plug-in Galleria original, tout en ajoutant ceci dans votre code!

CSS PARTIE: 

    /* HOVER CSS EFFECT */

.imageteaser {
  margin: 0;
  overflow: hidden;
  float: left;
  position: relative;
}

.imageteaser:hover {
  cursor: pointer;
}

.imageteaser .more {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: 1.2em;
  color: #fff;
  background: #000;
  padding: 5px 10px;
  filter:alpha(opacity=65);
  opacity:.65;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.imageteaser  .desc {  display: none; }
.imageteaser:hover .more { visibility: hidden;}
.imageteaser:hover .desc{
  display: block;
  font-size: 1.2em;
  background: #111;
  filter:alpha(opacity=75);
  opacity:.75;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
  color: #fff;
  position: absolute;
  bottom: 11px;
  left: 0;
  padding: 10px 5px;
  margin: 0;
  width: 702px;
  border-top: 1px solid #999;
  text-align:left
}

  .imageteaser:hover .desc strong {
  display: block;
  margin-bottom: 5px;
  font-size:1.5em;
        float:right;
        margin-right:20px
}

JQUERY (dernière version) PARTIE: 

$(".gallery_demo_unstyled img").click( function() {

  var src = $(this).attr('src');

  $('.imageteaser').remove();

  $('.galleria_wrapper').before('<div class="imageteaser">'+
  '<img src="'+src+'" alt="" />'+
  '<span class="more">> read more</span>' +
  '<span class="desc">'+
  '<strong>click</strong>'+
  $(this).attr('title') +
  '</span></div>');

  $('.galleria_wrapper').attr('style','display:none');

}).filter(':first').click();  

   $(".imageteaser .desc strong").live( 'click' , function() {
     alert('run function!');
   });

Faites exactement ce que vous voulez! ; -)

laissez-moi savoir!

Autres conseils

Je ne suis pas très familier avec ce plug-in, mais si vos images sont tirées d'une base de données, vous pouvez associer soit une plage de jeu de données (comme les catégories) ou des données spécifiques par chaque élément (comme, par exemple, une légende) avec chacune des images, quand ils sont tirés sur, vous pouvez jQuery extrapoler ces données dans votre plug-in.

Il y a un rappel « onImage », et il est passé l'élément d'image affichée. Si vous donnez chaque image une valeur « id », ou si vous regardez juste l'attribut « src », vous pouvez savoir quelles sont les informations à afficher.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top