当前位置: 首页 > 工具软件 > Galleria > 使用案例 >

galleria插件

朱睿
2023-12-01

一款简单的图片查看插件:http://galleria.io/

另一款感觉更好,不过是mootools的:http://www.efectorelativo.net/laboratory/noobSlide/

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head>	
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="galleria-1.2.7.min.js"></script>
</head>
<body>
<div id="galleria">
    <li>
    <img src="2.jpg" data-title="title" data-description="description" data-link="http://sina.com.cn">
    <!--img里的设置与dataConfig中的设置是重复的,择其一即可-->
     <p> image2</p>
    </li>
    <li>
    <img src="3.jpg">
     <p>image3</p>
    </li>
</div>
		 <script>
$('#galleria').galleria({
width: 700,
height: 467
});
Galleria.configure({
    transition: 'fade', <!--图片切换的效果-->
    imageCrop: true,   <!--是否去左右的切换按钮-->
    autoplay: 2000,   <!--隔几秒自动切换-->
    clicknext:true,    <!--设置点击大图切换到下一页-->
    showInfo:true,  <!--设置是否显示信息,左上角-->
    popupLinks:true,
     dataConfig: function(img) {
        return {
            title: 'a',
            description:$(img).next('p').html(),
            link: 'http://www.baidu.com' 
        };}
});
            Galleria.loadTheme('themes/classic/galleria.classic.min.js');
            Galleria.run('#galleria');
        </script>
	</body>
</html>
 
 类似资料: