漂浮在缩略图上的漂亮照片更改标题

时间:2015-08-05 17:36:17

标签: javascript jquery prettyphoto

我使用prettyPhoto版本:3.1.6显示带缩略图的简单灯箱。 通常,标题属性显示在活动/所选图像的灯箱内。 我的客户要求进行此更改 http://i.stack.imgur.com/7932x.jpg 我怎么能做到这一点?

这是我的代码的一部分

<a rel="prettyPhoto[pp_gal]"href="1.jpg" title="Staring at the sun"><img src="2.jpg"></a>

1 个答案:

答案 0 :(得分:0)

试试这个jquery函数。你可能需要设计一点风格。

(function($)

{

$.fn.avia_activate_lightbox = function(variables)

{

var defaults =

{

autolinkElements: 'a[rel^="prettyPhoto"], a[rel^="lightbox"], a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg], a[href$=".mov"] , a[href$=".swf"], a[href$=".flv"] , a[href*="vimeo.com"] , a[href*="youtube.com"]'

};

var options = $.extend(defaults, variables);

var imagedefaults =

{

autolinkImages: 'img[title!=""]'

};

return this.each(function()

{

var elements = $(options.autolinkElements, this),

lastParent = "",

counter = 0;

var images = $(imagedefaults.autolinkImages, this),

imgcounter = 0;

var alltitlesalt = new Array();

var alltitles = new Array();

images.each(function()

{

if($(this).attr('alt') != undefined && $(this).attr('alt') !="")

{

alltitlesalt.push($(this).attr('alt'));

}

else

{

alltitlesalt.push("");

};

alltitles.push($(this).attr('title'));

});

elements.each(function()

{

var el = $(this),

parentPost = el.parents('.post-entry:eq(0)'),

group = 'auto_group';

if(parentPost.get(0) != lastParent)

{

lastParent = parentPost.get(0);

counter ++;

}

if((el.attr('rel') == undefined || el.attr('rel') == '') && !el.hasClass('noLightbox'))

{

el.attr('rel','lightbox');

el.attr('title',alltitles[imgcounter]);

el.attr('alt',alltitlesalt[imgcounter]);

imgcounter ++;

}

});

if($.fn.prettyPhoto)

elements.prettyPhoto({ "theme": 'premium_photo', 'slideshow': 5000 }); /* facebook /light_rounded / dark_rounded / light_square / dark_square */

});

};

})(jQuery);

Reference