У меня есть несколько альбомов в базе данных. Есть несколько изображений в каждом. Я получаю эти альбомы и изображения по php:
var data = [
[
{'href': 'http://31.media.tumblr.com/ed86baf7b4e9538aeaebc406aaa56cbc/tumblr_mmwaozmUKo1s0o4s9o1_500.jpg'},
{'href': 'http://25.media.tumblr.com/6623ddd110dd18bffb35457cf83f771c/tumblr_mm8tcct2Av1rphpc2o1_500.jpg'},
{'href': 'http://25.media.tumblr.com/d4fe3fcc6326cde88c14d658d521eaee/tumblr_mvbnqtsX2P1rgd6gxo1_500.jpg'}
],
[
{'href': 'http://25.media.tumblr.com/6816c5b46d93ceebde243a9cf48f02dc/tumblr_mvn9jdNiiq1rgd6gxo1_r1_500.jpg'},
{'href': 'http://31.media.tumblr.com/0c27cb0ba446c1f1c778452c4590eafd/tumblr_mvmwp0Cq4f1rgd6gxo1_r1_500.jpg'},
{'href': 'http://31.media.tumblr.com/72c1f613c537f12c10e8689dc0bf093c/tumblr_mvtqoxy0N11r9asaso1_500.jpg'}
],
[
{'href': 'http://25.media.tumblr.com/bbfb7445c08e139d945296507ad9146c/tumblr_mjdkktCfhO1qa9opio1_500.jpg'},
{'href': 'http://31.media.tumblr.com/73924815d177266083b59d20db9c287e/tumblr_mvss8vVZew1qa9opio1_500.jpg'},
{'href': 'http://25.media.tumblr.com/3cd96a8148b263514ffbcb32e6a0ebf8/tumblr_mvss8geomy1qa9opio1_500.jpg'}
]
];
Тогда я использую fancybox:
$(document).ready(function() {$('#gallery').on('click', 'img', function() {
var index = $(this).parent().index();
$.fancybox(data[index], {
title: {
type: 'inside'
},
title: $(this).attr('rel'),
afterLoad: function () {
this.title = this.title + ' ' + $(this.element).find('img').attr('alt');
}
});
return false;
});
});
Код превью выглядит и генерируется с помощью php:
<ul id="gallery">
<li><img src="preview1.jpg"></li>
<li><img src="preview2.jpg"></li>
<li><img src="preview3.jpg"></li>
....
</ul>
Я хочу видеть статичное описание всего альбома в любом месте (внизу, справа, слева), когда я смотрю галерею. Я имею в виду, когда я вставляю свои изображения в кого-то из альбомов, я вижу описание этого альбома. В модальном окне тоже. Реально ли это от Fancybox? И я хочу видеть статичное название также.
Может кто-нибудь мне помочь? Если вы не понимаете, вы можете задать мне вопросы для более подробного ответа.
Благодарю.
Самый простой способ — добавить описание альбома в заголовок изображения после некоторого разделителя, например, пары <br>
«S. Вы можете взять описание альбома из атрибута <img>
,
Вот пример для вас: http://jsfiddle.net/n21vma5m/1/
Других решений пока нет …