Отображать разные «объекты» при загрузке каждого изображения jQuery Galleria.
Вопрос
Я ищу способ запускать разные функции для каждого отдельного изображения.Я использую плагин Galleria Jquery, и он установлен на моем сайте.Проблема в том, что я хочу отобразить div с информацией в зависимости от того, какое изображение загружено.Я не могу понять, как определить, какое изображение отображается, и как создать на его основе условие.
Решение
ОБНОВЛЕНО
ДЕМО: 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!');
});
Это Делайте именно то, что хотите!;-)
дайте мне знать!
Другие советы
Я не очень знаком с этим плагином, но если ваши изображения извлекаются из базы данных, вы можете связать либо заданный диапазон данных (например, категории), либо конкретные данные для каждого элемента (например, подпись). с каждым изображением, поэтому, когда они будут остановлены, вы сможете экстраполировать эти данные в плагин jQuery.
Существует обратный вызов «onImage», и он передает отображаемый элемент изображения.Если вы присвоите каждому изображению значение «id» или просто посмотрите на атрибут «src», вы сможете узнать, какую информацию отображать.