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;
}
分享到:
相关推荐
Awkward Showcase 使用这款插件可以实现各种内容的幻灯片展示效果,例如文本、图片、视频等等,在线演示3. Waypoints 这款插件可以让你实现当滚动到某个目标元素的时候执行特定的动作,例如回到顶部,在线演示4. ...
More Information on Awkward Showcase – A jQuery PluginDiapo More Information on DiapoSmooth Div Scroll More Information on Smooth Div ScrollBox Slider More Information on Box Slider
AWKWARD
资源来自pypi官网。 资源全名:awkward-0.12.13.tar.gz
资源分类:Python库 所属语言:Python 资源全名:awkward-1.4.0rc2.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
Awkward 是一个基于 NodeJS 开发的终端模拟器。在 Awkward 终端中一切都是对象,例如:(ps -ef)().map(a => [a[0], a[7]]).forEach(a => console.log(a))安装方法:npm install -g awkward 标签:Awkward
awkward
资源来自pypi官网。 资源全名:awkward-0.3.0.tar.gz
资源分类:Python库 所属语言:Python 资源全名:awkward-1.1.1.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
尴尬数组(Awkward Array)是一个库,用于存储类似于NumPy的习惯用法的可变大小的嵌套数据,包括任意长度的列表,记录,混合类型和丢失的数据。 数组是动态类型的,但是对它们的操作可以快速编译。 当数组尺寸是规则...
python库。 资源全名:awkward-0.12.10-py2.py3-none-any.whl
python库。 资源全名:awkward1-0.4.0-cp38-cp38-win32.whl
python库。 资源全名:awkward-1.3.0-cp27-cp27m-win32.whl
资源分类:Python库 所属语言:Python 资源全名:awkward-cpp-0.12.12.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
资源分类:Python库 所属语言:Python 资源全名:awkward-numba-0.11.0rc7.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
资源来自pypi官网。 资源全名:awkward-0.6.1-py2.py3-none-any.whl