将鼠标悬停在缩略图上时，prettyPhoto 更改标题答案

【问题标题】：prettyPhoto change title on hover over thumbnail将鼠标悬停在缩略图上时，prettyPhoto 更改标题
【发布时间】：2015-08-05 17:36:17
【问题描述】：

我使用 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>

【问题讨论】：

如果此答案有效，请勾选它旁边的复选标记。当您将鼠标悬停在答案旁边时，它就会出现

标签： javascript jquery prettyphoto

【解决方案1】：

试试这个 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

【讨论】：