开发者

how to add title to neteye's touch gallery large image view

开发者 https://www.devze.com 2023-03-21 04:27 出处:网络
How would I display the image\'s title in touch gallery?What code could I insert and where? The call looks like this:

How would I display the image's title in touch gallery? What code could I insert and where?

The call looks like this:

$('.rssBody a').touchGallery();

and it's using jquery.touch-gallery-1.0.0.js script.

Here's the touchGallery function:

    $.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;
};

this may be helpful also:

    /**
 * 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.e开发者_C百科ach(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');
            };
        }
    });
}
0

精彩评论

暂无评论...
验证码 换一张
取 消