Как бы я отобразил заголовок изображения в сенсорной галерее?Какой код я могу вставить и где?
Вызов выглядит так:
$('.rssBody a').touchGallery();
и использует скрипт jquery.touch-gallery-1.0.0.js.
Вот функция touchGallery:
$.fn.touchGallery = function(opts) {
opts = $.extend({}, $.fn.touchGallery.defaults, opts);
var thumbs = thi.s;
this.live('click', function(ev) {
ev.preventDefault();
var clickedThumb = $(this);
if (!clickedThumb.is('.open')) {
thumbs.addClass('open');
openGallery(thumbs, clickedThumb, opts);
}
});
return this;
};
это также может быть полезно:
/**
* Creates DOM elements to actually show the gallery.
*/
function showGallery(thumbs, index, clickedImage, getSrcCallback) {
var viewport = fitToView(preventTouch($('<div id="galleryViewport">').css({
position: 'fixed',
top: 0,
left: 0,
overflow: 'hidden'
}).transform(false).appendTo('body')));
var stripe = $('<div id="galleryStripe">').css({
position: 'absolute',
height: '100%',
top: 0,
left: (-index * getInnerWidth()) + 'px'
}).width(thumbs.length * getInnerWidth()).transform(false).appendTo(viewport);
setupEventListeners(stripe, getInnerWidth(), index, thumbs.length-1);
$(window).bind('orientationchange.gallery', function() {
fitToView(viewport);
stripe.find('img').each(centerImage);
});
thumbs.each(function(i) {
var page = $('<div>').addClass('galleryPage').css({
display: 'block',
position: 'absolute',
left: i * getInnerWidth() + 'px',
overflow: 'hidden',
height: '100%'
}).width(getInnerWidth()).data('thumbs', thumbs).data('thumb', $(this)).transform(false).appendTo(stripe);
if (i == index) {
var $img = $(clickedImage).css({position: 'absolute', display: 'block'}).transform(false);
makeInvisible(centerImage(index, clickedImage, $img)).appendTo(page);
zoomIn($(this), $img, function() {
stripe.addClass('ready');
loadSurroundingImages(index);
});
insertShade(viewport);
}
else {
page.activity({color: '#fff'});
var img = new Image();
var src = $.proxy(getSrcCallback, this)();
page.one('loadImage', function() {
img.src = src;
});
img.onload = function() {
var $this = $(this).css({position: 'absolute', display: 'block'}).transform(false);
centerImage(i, this, $this).appendTo(page.activity(false));
page.trigger('loaded');
};
}
});
}