Display a diferent "object" when each jQuery Galleria image loads

Question

I'm looking for a way to trigger for a different function on each individual image. I'm using the Galleria Jquery plugin and have it set up on my site. The problem is i want to display a div with information depending on which image is loaded. I can't figure out how to capture which image is displayed and how to create a condition based on it.

Answer 1

I'm not very familiar with that plug-in, but if your images are being pulled from a database, you could associate either a set range of data (like categories) or specific data per each item (like, say, a caption) with each of the images, so when they're pulled over, you can have jQuery extrapolate that data into your plug-in.

Answer 2

There's an "onImage" callback, and it's passed the image element being displayed. If you give each image an "id" value, or if you just look at the "src" attribute, then you can know what information to display.

Answer 3

UPDATED

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

without hacking the original Galleria plugin, just adding this into your code!

CSS PART:

    /* 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 ( Latest Version ) PART:

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

This Do exactly what you want! ;-)

let me know!