加载每个jQuery Galleria图像时显示不同的“对象”

我正在寻找一种方法，在每个单独的图像上触发不同的函数。我正在使用Galleria Jquery插件，并在我的网站上进行了设置。问题是我想显示一个div，其中包含的信息取决于加载的图像。我不知道如何捕获显示的图像以及如何基于该图像创建条件。

我对该插件不太熟悉，但如果您的图像是从数据库中提取的，您可以将一组数据（如类别）或每个项目的特定数据（如每个图像的标题）关联起来，因此，当它们停在路边时，您可以让jQuery将该数据外推到插件中。

有一个onImage回调，它传递给正在显示的image元素。如果为每个图像指定一个id值，或者只查看src属性，则可以知道要显示哪些信息

更新

演示：

没有黑客的原始Galleria插件，只是添加到您的代码

CSS部分：

JQUERY最新版本部分：

这正是你想要的-

---

让我知道

非常感谢您的代码和演示！那是一个加号！！我只是想知道在每个图像下运行哪些代码，这与@Pointy试图实现的目标类似。不过，我认为这是最接近的。再次感谢！抱歉，但是您是否看到了警报“运行函数！”；用你的函数替换它吧-我试着读取source属性，甚至$galleria.current，它保存了正在显示的图像的url，但没有成功。我的代码有些地方无法在正确的时间访问相应的值。

    /* 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
}

$(".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!');
   });