mybigimgbox

介绍

在WEB页面中展示图片，可用于页面首屏大图（多图切换），焦点图或二次开发后用于相册图片展示！自适应PC大屏、手机、平板等设备的屏幕！注释信息完善，无高难度繁复的代码，支持一般新手根据自己的需要修改代码！

所需插件

Jquery 1+

截图

目录说明

./example 此目录中为示例代码（简单展示用法）

查看案例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>mybigimgbox 焦点图功能 自适应PC 手机 平板等设备</title>
    <style>html,body {padding: 0px;margin: 0px;}</style>
    <link href="./css/mybigimgbox.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
</head>
<body>
    <div class="mybigimgbox" style="display: none;">
        <div style="display: none;">
            <a href="./" target="_self"><img src="./img/bigimg01.jpg" alt="测试一"></a>
            <a href="./" target="_self"><img src="./img/bigimg02.jpg" alt="测试二"></a>
            <a href="./" target="_self"><img src="./img/bigimg03.jpg" alt="测试三"></a>
            <a href="./" target="_self"><img src="./img/bigimg04.jpg" alt="测试四"></a>
            <a href="./" target="_self"><img src="./img/bigimg05.jpg" alt="测试五"></a>
        </div>
    </div>
    <script src="./js/mybigimgbox.js"></script>
</body>
</html>

建议下载本项目到本地后，在浏览器中打开 example/index.html

使用方法

第一步：在页面`<head>`区中添加如下内容：

<link href="./css/mybigimgbox.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>

第二步：在页面`<body>`区域添加内容

方法一：直接在页面`<body>`区域添加如下内容：

<div class="mybigimgbox" style="display: none;">
    <div style="display: none;">
        <a href="./" target="_self"><img src="./img/bigimg01.jpg" alt="测试一"></a>
        <a href="./" target="_self"><img src="./img/bigimg02.jpg" alt="测试二"></a>
        <a href="./" target="_self"><img src="./img/bigimg03.jpg" alt="测试三"></a>
        <a href="./" target="_self"><img src="./img/bigimg04.jpg" alt="测试四"></a>
        <a href="./" target="_self"><img src="./img/bigimg05.jpg" alt="测试五"></a>
    </div>
</div>
<script src="./js/mybigimgbox.js"></script>

方法二：将代码添加到其他已有的元素标签中

例如：将代码块添加到 class="box" 的DIV中

<div class="box">
    <div class="mybigimgbox" style="display: none;">
        <div style="display: none;">
            <a href="./" target="_self"><img src="./img/bigimg01.jpg" alt="测试一"></a>
            <a href="./" target="_self"><img src="./img/bigimg02.jpg" alt="测试二"></a>
            <a href="./" target="_self"><img src="./img/bigimg03.jpg" alt="测试三"></a>
            <a href="./" target="_self"><img src="./img/bigimg04.jpg" alt="测试四"></a>
            <a href="./" target="_self"><img src="./img/bigimg05.jpg" alt="测试五"></a>
        </div>
    </div>
</div>
<script src="./js/mybigimgbox.js"></script>

注意：css文件和js文件的引用地址需要根据实际目录结构修改，一个页面中只能引用一次

第三步：根据需要修改参数配置

打开文件./mybigimgbox.js，修改参数！

第四步：修改代码块中的内容

<a href="./" target="_self"><img src="./img/bigimg01.jpg" alt="测试一"></a>
<a href="./" target="_self"><img src="./img/bigimg02.jpg" alt="测试二"></a>
<a href="./" target="_self"><img src="./img/bigimg03.jpg" alt="测试三"></a>
<a href="./" target="_self"><img src="./img/bigimg04.jpg" alt="测试四"></a>
<a href="./" target="_self"><img src="./img/bigimg05.jpg" alt="测试五"></a>

注意：以上代码块中的 A标签和 Img标签内容可修改，但不要修改代码的结构

yesmyself / mybigimgbox

mybigimgbox

介绍

所需插件

截图

目录说明

查看案例代码

使用方法

第一步：在页面`<head>`区中添加如下内容：

第二步：在页面`<body>`区域添加内容

方法一：直接在页面`<body>`区域添加如下内容：

方法二：将代码添加到其他已有的元素标签中

第三步：根据需要修改参数配置

第四步：修改代码块中的内容

简介

发行版

贡献者

近期动态

yesmyself / mybigimgbox .gitee-modal { width: 500px !important; }

mybigimgbox

介绍

所需插件

截图

目录说明

查看案例代码

使用方法

第一步：在页面<head>区中添加如下内容：

第二步：在页面<body>区域添加内容

方法一：直接在页面<body>区域添加如下内容：

方法二：将代码添加到其他已有的元素标签中

第三步：根据需要修改参数配置

第四步：修改代码块中的内容

简介

发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

yesmyself / mybigimgbox

第一步：在页面`<head>`区中添加如下内容：

第二步：在页面`<body>`区域添加内容

方法一：直接在页面`<body>`区域添加如下内容：