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>
添加容器html
<%@ 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>QQ图片</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);
}
});
});
分享到：
相关推荐
在本文中，我们将深入探讨如何使用jQuery来实现一个仿QQ相册的功能，这是一个常见的Web开发需求，特别是在构建个人或企业网站时。QQ相册因其直观的界面和丰富的交互性而广受欢迎，因此学习如何复制其核心特性对于...
这个"Python实现QQ相册自动上传照片源码"就是一个很好的例子，它利用编程技术实现了无人值守的照片上传功能，对于个人或企业来说，这可以极大地节省时间和精力。 首先，我们要了解这个项目的核心——Python编程语言...
QQ相册浏览特效是QQ产品中的一个重要组成部分，它为用户提供了一种类似QQ空间中查看图片的体验。在QQ空间中，用户可以方便地上传、分享和浏览照片，这些照片以相册的形式组织，并且在查看时有特定的浏览效果，如滑动...
QQ相册快快下载是一款专为用户设计的工具，旨在帮助用户轻松、快速地批量下载QQ相册中的图片。在日常生活中，QQ相册作为腾讯QQ的一项重要功能，让用户能够在线存储、分享个人照片和相册，但在某些情况下，用户可能...
在本实例中，我们将探讨如何使用JavaScript来实现一个类似于QQ相册的功能。QQ相册是一个让用户可以上传、浏览和分享照片的应用，它通常包括主图显示区和小图预览区。在这里，我们主要关注其核心特性：无限制地展示...
1，快速查看QQ相册列表； 2，快速将QQ相册里的相片，一键打包下载到本机电脑里慢慢查看； 3，集成在线查看QQ相册功能，快速在线预览QQ空间相片； 4，绿色版软件，不需要安装，直接删除就可以了，不需要卸载； 5，...
在Android开发中，"android仿QQ相册滑动多选"是一个常见的需求，它涉及到UI设计、触摸事件处理、图片加载以及数据管理等多个方面。在这个项目中，开发者需要实现一个可以滑动浏览相册，并且支持多选照片的功能，与QQ...
QQ相册批量下载器是一款专为用户设计的工具，旨在帮助用户快速、便捷地下载自己或他人在QQ相册上分享的照片。QQ相册作为腾讯QQ的一项重要功能，让用户能够在线存储、展示和分享个人照片。然而，由于平台本身并不提供...
《易图QQ相册下载器1.21(原图).zip》是一款专门针对QQ相册进行批量下载的工具，适用于那些需要快速保存大量QQ相册图片的用户。这款软件的核心功能是帮助用户轻松地获取并保存QQ相册中的高清原图，避免了手动下载的...
QQ相册是腾讯公司推出的一款在线照片存储服务，它允许用户上传、管理、分享自己的照片。在网页开发中，模仿QQ相册的空间布局和交互效果是一项常见的练习，可以帮助开发者掌握图片展示、用户交互以及前端技术的运用。...
在JavaScript和HTML的世界里，实现一个仿QQ相册的图片拖动排序功能是一项常见的交互设计需求。这个功能允许用户通过直观...通过以上步骤，我们可以构建一个功能完备、用户体验良好的图片排序系统，类似于QQ相册的功能。
在本项目中，我们主要探讨的是一个基于jQuery（简称为JQ）实现的仿QQ相册功能。这个功能旨在提供与QQ相册类似的用户体验，包括照片的浏览、切换以及一些基本的交互操作。以下是关于这一功能实现的关键知识点： 1. *...
在本项目中，我们主要探讨如何实现一个类似QQ相册的功能，这涉及到前端网页开发中的图像展示、交互设计以及JavaScript库的应用。QQ相册以其独特的浏览体验，包括顶部缩略图展示和下方大图预览，深受用户喜爱。我们将...
QQ相册JS代码是用于创建一个类似于QQ空间相册的功能的JavaScript代码库。在网页中，用户可以浏览图片，实现前后切换，就像在QQ空间中查看个人相册一样。这种功能增强了用户体验，使得图片展示更加流畅和互动。下面将...
QQ相册批量下载器是一款专为用户设计的工具，它能够帮助用户快速、方便地下载QQ空间中的相册图片，避免了手动一张张保存的繁琐过程。在数字化时代，网络相册成为了存储和分享个人照片的重要平台，而QQ作为国内极具...
在本项目"Java__QQ相册照片上传示例"中，我们主要探讨的是如何使用Java技术来实现一个Web应用，该应用能够实现用户通过QQ相册上传和管理个人照片的功能。这个项目对于开发者来说，是一个典型的Java Web开发实战案例...
在Android开发中，创建一个类似QQ相册的选择器是一个常见的需求，主要用于用户选取多张图片。这个项目"android仿QQ相册选择器"是基于Android Studio实现的，它提供了类似于QQ应用中的相册浏览和选择功能。下面我们将...
Web仿QQ相册图片上传控件 ，带预览的 ，支持单个图片进度条
【标题】：“类似QQ相册效果” 在网页设计和开发中，实现“类似QQ相册效果”是指创建一个用户界面，其展示照片的方式类似于腾讯QQ空间中的相册功能。这种效果通常包括滑动浏览、缩略图预览、分页导航等特性，旨在...
QQ相册第一张相片查看器 V1.0 是一个专为查看QQ相册设计的轻量级应用程序，尤其适用于那些希望通过简单快捷的方式获取他人QQ相册首张照片的用户。该工具的独特之处在于，它只需要输入QQ号码，就能直接展示对应QQ账号...