`

JQuery的Galleria插件的使用

JQuery Galleria JS 前端框架 web前端 
阅读更多

    前一阵在研究JQuery的插件，其中有一款插件(Galleria )可以用来显示图片的，下面是一系列小图片，上面是当前查看的大图，发现用起来很简单，一点也不难。把代码贴在这里跟大家一起分享，效果图我已经传入附件中。

 

Galleria.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="$!Server/static/js/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="$!Server/static/js/jquery/galleria.js"></script>
<title>Galleria Test</title>
<style type="text/css">
  .images{width:500px; height:400px;margin:20px auto}
</style>
<script type="text/javascript">
  $(document).ready(function(){
    Galleria.loadTheme('$!Server/static/js/jquery/themes/galleria.classic.js');
        $('.images').galleria({
           image_crop:true,
           transition: 'fade',
        });
  });
</script>
</head>
<body>
    <div class="images">
           <img src="$!Server/static/images/TestImage/1.gif">
           <img src="$!Server/static/images/TestImage/2.gif">
           <img src="$!Server/static/images/TestImage/3.gif">
    </div>
</body>
</html>

  • 大小: 119 KB
分享到：
| 转自-51cto-福布斯 不得不了解的大数据工 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery图片组展示插件Galleria使用简介

    本文将简要介绍如何使用Galleria插件，并提供一个基本的使用示例。 1. **Galleria概述** Galleria是一款基于JavaScript库jQuery的图片展示插件，它提供了一个全屏的图片浏览体验，支持触摸设备，并具有多种主题和...

    Jquery学习笔记-2009Juery年度插件之galleria

    使用Galleria插件首先需要在页面中引入jQuery库和Galleria插件的JavaScript及CSS文件。接着，设置Galleria数据源，通常是从HTML元素（如`&lt;ul&gt;`或`&lt;div&gt;`）或者JSON数据。例如： ```html ...

    jquery图片轮播插件之galleria1.26

    该插件更新到2011-11-16.加入加载等待中效果，是一款超强的轮播插件。支持点击图片放大，全屏查看功能，且效果超炫，如同看播放器视频一样，适合做图片展示功能。附上js文件，注意demo页面在\galleria-1.2.6\...

    jQuery图片展示插件Galleria.zip

    Galleria是一个采用jQuery开发的图片展示插件。它通过缩略图导航一张一张的显示大的图片。支持通过CSS设置整个相册的风格。能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片。能够触一些事件，因此可以...

    galleria 最新插件

    绚丽的jquery相册插件 [removed][removed] [removed][removed] [removed] Galleria.loadTheme('galleria.classic.js'); $('#galleria').galleria({}）; [removed]

    最新 最流行 jquery 图片插件大全

    4. **Galleria**：Galleria是一款全功能的图像画廊插件，提供多种主题和布局，支持视频集成，且高度可定制。它的响应式设计使其在不同屏幕尺寸下都能良好展示。 5. **Slick**：Slick不仅是一个图片轮播插件，也可以...

    jquery 插件jquery 插件jquery 插件jquery 插件

    这个文件名可能指的是Aino Galleria插件的一个版本。Galleria是一个强大的JavaScript图片画廊框架，它可以优雅地展示图像和视频，支持响应式设计。该插件利用jQuery库，提供丰富的主题、过渡效果和自定义选项，使得...

    Jquery特效插件集合

    10. **图库/相册插件**：如Flickity或Galleria，用于创建专业级的图片展示效果，支持触摸滑动和各种过渡动画。 以上只是部分jQuery特效插件的应用场景和功能，实际上jQuery生态系统中有无数的插件可供选择，覆盖了...

    jquery 相册插件 非常棒！

    Galleria作为一个成熟的jQuery相册插件，提供了丰富的定制选项和扩展能力，帮助开发者轻松实现各种复杂的相册效果。在实际项目中，开发者可以根据需求选择适合的插件或自行编写代码，以满足特定的交互和视觉设计要求...

    jQuery 相册插件

    使用jQuery相册插件通常涉及以下步骤： - **引入jQuery库**：首先确保页面中已包含jQuery库的引用。 - **下载并引入插件**：从官方网站或GitHub获取插件文件，并在HTML中引入CSS和JavaScript文件。 - **HTML结构...

    7 个漂亮的 jQuery 照片插件

    在使用这些插件时，你需要确保已正确引入 jQuery 库和相应的插件文件，并根据文档提供的说明进行配置。很多插件允许通过 JavaScript API 或者数据属性来控制其行为，比如设置自动播放、改变过渡效果等。此外，CSS3 ...

    jquery画廊插件

    Galleria jquery画廊插件 上面图片，下面是缩略图，效果还不错

    jQuery插件

    3. **Bootstrap Grid System**：虽然并非严格的jQuery插件，但与jQuery配合使用时，可以创建响应式的栅格布局。Bootstrap的网格系统提供了12列的布局，可适应不同设备屏幕大小。 4. **Isotope**：类似于Masonry，...

    jquery图片浏览插件

    四、如何使用jQuery图片浏览插件 1. **下载与引入**：首先，从官方仓库或第三方资源网站下载jQuery库和所选插件的源码，然后在HTML文件中引入它们。 2. **HTML结构**：设置好图片容器和图片标签，可以添加额外的...

    jQuery酷炫效果插件集

    这个“jQuery酷炫效果插件集”显然包含了一系列用于创建吸引人眼球的视觉效果的jQuery插件，使得网站设计更具吸引力和互动性。 首先，jQuery的核心特性在于它的选择器，它允许开发者通过CSS语法来选取DOM元素，这...

    jquery图片显示--aino-galleria-a09cdb0

    Aino Galleria是一款优秀的JavaScript图片画廊插件，它利用jQuery框架，实现了无缝滚动、预加载、全屏浏览等多种功能，为用户提供了流畅且引人入胜的图片浏览体验。"aino-galleria-a09cdb0"这个版本，是Aino ...

    jquery插件集-图片展示 幻灯片效果 图片浏览

    在IT行业中，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。标题提到的“jquery插件集-图片展示 幻灯片效果 图片浏览”聚焦于利用jQuery实现的图片展示解决方案，...

    jqueryImagePlugin galleria

    首先，Galleria作为一个jQuery插件，它的核心优势在于易于使用和高度可定制性。jQuery的强大选择器和事件处理机制使得Galleria可以轻松地与网页元素进行交互，为用户提供流畅的图片浏览体验。无论是初学者还是经验...

    Jquery库与插件

    **jQuery库概述** ...总的来说，jQuery库和插件极大地提高了前端开发的效率，使得开发者能够专注于解决问题，而不是编写底层的JavaScript代码。无论是在小型项目还是大型应用中，jQuery都是一个值得信赖的工具。

Magicbox
Global site tag (gtag.js) - Google Analytics