Galleriffic-jquery图片画廊插件
插件网址:http://www.twospy.com/galleriffic/index.html
使用方法
引入JQ库与插件js
<link rel="stylesheet" href="css/basic.css" type="text/css" /> <link rel="stylesheet" href="css/galleriffic-3.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript" src="js/jquery.galleriffic.js"></script> <script type="text/javascript" src="js/jquery.opacityrollover.js"></script> <script type="text/javascript" src="js/function.js"></script>
需要显示的页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>相册展示</title>
<link rel="stylesheet" href="css/basic.css" type="text/css" />
<link rel="stylesheet" href="css/galleriffic-3.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<script type="text/javascript" src="js/function.js"></script>
</head>
<body>
<div id="page">
<div id="container">
<h1>安全检查相册</h1>
<h2>0905</h2>
<!-- Start Advanced Gallery Html Containers -->
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<c:forEach items="${imageList}" var="img">
<li>
<a class="thumb" name="leaf" href="uploadImages/${img}" title="图片">
<img width="100" height="80" src="uploadImages/${img}" alt="图片" />
</a>
</li>
</c:forEach>
</ul>
</div>
<!-- End Advanced Gallery Html Containers -->
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>
初始化插件
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px','float':'left'});//导航宽度
$('div.content').css('display', 'block');//内容样式为显示
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;//朦胧系数
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',//快速显示
exemptionSelector: '.selected'//选中的图片
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,//幻灯延时
numThumbs: 10,//分页数量
preloadAhead: 5,//预加载图片的数量
enableTopPager: true,//顶部分页链接
enableBottomPager: true,//底部分页链接
//maxPagesToShow: 7,
//显示图片的位置与样式
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,//是否开始幻灯片播放
renderNavControls: true,//右上角的上下页
playLinkText: '幻灯片播放',
pauseLinkText: '暂停幻灯片播放',
prevLinkText: '‹ 上一张图片',
nextLinkText: '下一张图片 ›',
nextPageLinkText: '下一页 ›',
prevPageLinkText: '‹ 上一页',
//enableHistory: true,//是否启用历史记录
autoStart: false,//幻灯片是否自动开始
syncTransitions: true,//同步
defaultTransitionDuration: 900,//右边显示图片的淡入淡出的时间
//幻灯片切换的效果
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
}
});
});
相关推荐
产品相册展示插件Slideshow是一款专为网站设计的组件，用于高效地呈现产品图片集，以吸引用户注意力并提升用户体验。在网页设计中，视觉元素往往起到关键作用，而Slideshow作为一款相册展示工具，能以动态、交互的...
从给定的文件信息来看，我们正在探讨的主题是“QQ空间相册展示”，这是一个与网页设计、前端开发以及用户体验相关的领域。以下是对该主题涉及的关键知识点的深入解析： ### 1. HTML结构与布局 在代码片段中，我们...
Flex相册展示源码是一种基于Adobe Flex技术实现的动态相册应用。Flex是ActionScript 3.0的一个框架，主要用于构建富互联网应用程序（RIA），它允许开发者创建具有丰富图形、交互性和动画效果的Web应用程序。在本项目...
了了个人相册展示系统 1.1 更新内容：2010-10-15 1.美化了后台管理界面 2.增加了相册展示模板，让你随心随意更换更酷的展示效果 3.修复第一版中展示相册分页问题 4.相册前台展示，使用smarty模板引擎 安装方法： ...
本压缩包"JS弹性相册展示代码.rar"提供了一种实现动态、弹性效果的相册展示方案，这在网页设计中是非常常见且实用的功能。 首先，我们要理解弹性相册的概念。弹性相册是指能够根据用户屏幕大小或设备特性自适应调整...
【图片相册展示代码】是一种常见的网页开发技术，主要用于在线展示和管理一组图片，为用户提供交互式的浏览体验。在网页设计中，图片相册功能可以让用户以美观且易于操作的方式查看一系列图片，常用于个人博客、摄影...
支持响应式触屏手机端的jQuery图片相册展示特效代码，基于jQuery插件lightGallery.min.js实现， 弹出图片显示支持左右按钮切换，可关闭相册展示，插件支持自定义是否循环播放，是否自动播放， 播放的间隔时间，...
在本项目中，"相册展示效果"是一个基于jQuery实现的动态相册，适用于创建吸引人的图片展示，如个人相册或课程课件中的图片集。这个相册设计旨在提供美观且互动性强的用户体验，利用HTML、CSS和JavaScript（特别是...
全屏个性相册展示特效是网页设计中一种吸引用户注意力并增强用户体验的常见技术，尤其在个人作品集、摄影网站或者艺术展示平台中广泛应用。在这个项目中，我们使用了JavaScript库JQuery来实现这一功能。JQuery是一个...
本压缩包“相册展示类CSS模板-相册 展示 相片 黑色.rar”提供了一个专门用于相册展示的CSS模板，其设计风格为黑色，能够为网站的相册部分增添专业且时尚的视觉效果。 首先，我们要理解CSS模板的作用。CSS模板是一种...
HTML网站源码，专为图片展示打造。这份源码简化了开发流程，节省您构建个人作品集或图片库的时间。具备响应式设计，适应各种屏幕和设备，无论在求职...快速部署，提升工作效率，让每一次展示都成为赢得机会的关键时刻。
【标题】：“FLASH相册展示（带源文件）”是一个以Adobe Flash技术为基础的多媒体项目，它包含了制作完成的相册展示以及相关的源文件。这个相册不仅是一个静态的图片集合，而是一个交互式的多媒体体验，能够动态地...
特别是【旋转相册展示】，这款特别设计的应用程序，成为了表白的得力助手，为想要表达爱意的人们提供了一个全新的展示平台。 【旋转相册展示】之所以被誉为表白神器，是因为它创造性地将静态图片转变为生动的视觉...
标题中的“图片相册展示CSS模板-图片 相册 展示 web20 Gallery 深蓝 jquery.rar”指的是一个基于CSS和jQuery的图片相册模板，设计风格为深蓝色，符合web20的设计规范。这个模板可能包含了用于创建一个交互式、视觉...
"桃源相册相册展示系统"是一款专为在线照片展示设计的应用，它允许用户上传多张照片，并自动生成缩略图，以便于在互联网上更有效地展示个人或集体的相册。这款系统的核心功能围绕着照片管理、相册创建以及用户互动...
在本项目"JS相册展示效果"中，我们将探讨如何使用JavaScript来实现一个功能丰富的相册展示功能。 首先，我们要了解基本的HTML结构，因为JavaScript通常与HTML和CSS结合使用来构建网页。在HTML中，我们可以创建一个...
标题中的“一个强大的图片缩放和相册展示JQ插件”揭示了这个资源是一个基于jQuery的库，专门用于处理图像的缩放和在相册中展示。这意味着它可能包含一系列的功能，如动态调整图像大小，创建交互式的相册，以及提供...
【腾讯QQ空间相册展示特效】是一个以jQuery库为基础实现的网页交互效果，它旨在模拟QQ空间中相册展示的方式，提供用户友好的图片浏览体验。这个特效可能包含动态加载、图片预览、滑动切换等多种功能，使得网页中的...
QQ相册展示与QQ新闻频道图片特效是网络应用中常见的功能，主要涉及到前端开发技术，尤其是JavaScript（JS）的应用。这一领域关注的是如何利用代码来实现动态、吸引人的视觉效果，提升用户体验。以下是对这些标签和...