jquery插件 Awkward Showcase

Awkward Showcase

使用这款插件可以实现各种内容的幻灯片展示效果，例如文本、图片、视频等等，在线演示

载入时定位自定义，传入要定位到得图片的名字：

1、在jquery.aw-showcase.js末尾添加

this.changeContent = changeContent;
return this;

 2、修改页面上的js如下

script type="text/javascript">

$(document).ready(function()
{
	var id = 0;
	var name = getUrlParam('name');
	var cases = $("#showcase").awShowcase(
	{
		content_width:			700,
		content_height:			470,
		fit_to_parent:			false,
		auto:					false,
		interval:				3000,
		continuous:				false,
		loading:				true,
		tooltip_width:			200,
		tooltip_icon_width:		32,
		tooltip_icon_height:	32,
		tooltip_offsetx:		18,
		tooltip_offsety:		0,
		arrows:					true,
		buttons:				true,
		btn_numbers:			true,
		keybord_keys:			true,
		mousetrace:				false, /* Trace x and y coordinates for the mouse */
		pauseonover:			true,
		stoponclick:			true,
		transition:				'fade', /* hslide/vslide/fade */
		transition_delay:		300,
		transition_speed:		0,
		show_caption:			'onhover', /* onload/onhover/show */
		thumbnails:				true,
		thumbnails_position:	'outside-last', /* outside-last/outside-first/inside-last/inside-first */
		thumbnails_direction:	'horizontal', /* vertical/horizontal */
		thumbnails_slidex:		0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
		dynamic_height:			false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
		speed_change:			false, /* Set to true to prevent users from swithing more then one slide at once. */
		viewline:				false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
	});
	
	
	
	$("div[id^='showcase-thumbnail-']").each(function(index,item){
		var curImg = $(this).children('img');
		var curImgSrc = curImg.attr('src');
			if(curImgSrc.toString().indexOf(name)>-1){
				var curId = $(this).attr('id');
				id = curId.substring(curId.lastIndexOf('-')+1,curId.length);
			}
	});
	cases.changeContent(id, null);
});

//获取URL地址栏上参数
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
}

 

评论

1 楼 zhoudaobao 2012-07-25