Отображать разные «объекты» при загрузке каждого изображения jQuery Galleria - PullRequest
Новая
       12

Отображать разные «объекты» при загрузке каждого изображения jQuery Galleria

0 голосов
/ 12 марта 2010

Я ищу способ активировать различные функции для каждого отдельного изображения. Я использую плагин Galleria Jquery и настроил его на своем сайте. Проблема в том, что я хочу отобразить div с информацией в зависимости от того, какое изображение загружено. Я не могу понять, как захватить, какое изображение отображается и как создать условие на его основе.

Ответы [ 3 ]

0 голосов
/ 12 марта 2010

Есть обратный вызов onImage, и он передает отображаемый элемент изображения. Если вы дадите каждому изображению значение «id» или просто посмотрите на атрибут «src», вы сможете узнать, какую информацию отображать.

0 голосов
/ 13 марта 2010

ОБНОВЛЕНО

ДЕМО: http://jsbin.com/egavo/6

не взламывая оригинальный плагин Galleria, просто добавив это в свой код!

ЧАСТЬ CSS: 

    /* 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 (последняя версия) ЧАСТЬ: 

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

Делай, что хочешь! ; -)

дай мне знать!

0 голосов
/ 12 марта 2010

Я не очень знаком с этим плагином, но если ваши изображения извлекаются из базы данных, вы можете связать либо набор данных (например, категории), либо конкретные данные для каждого элемента (например, скажем, подпись) с каждым из изображений, поэтому при их перетаскивании jQuery может экстраполировать эти данные в ваш плагин.

...