mediumLightbox.js 一款精简文章图片放大并滚动自动还原插件,兼容手机端

mediumLightbox.js 一款精简文章图片放大并滚动自动还原插件,兼容手机端

第一步引入bfwone

第二步执行插件

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["medium-lightbox", "medium-lightbox"], function() {
                MediumLightbox('figure.zoom-effect', {
                    //margin:300
                });
            });
        });
    </script>
</head>
<body>
    <div class="post">
        <h1>往下滚动,点击图片放大,然后继续滚动</h1>
        <h3>Scroll down and click over the images</h3>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos nam doloremque at architecto numquam quae id. Iste deleniti, aliquam cum quas! Quae nostrum dolorum temporibus, delectus quam facere eligendi. Nisi velit impedit esse sunt architecto officia, id, debitis hic aliquid blanditiis, expedita porro earum voluptatibus error maxime ratione, dolorem ad recusandae! Sequi hic perspiciatis inventore quia corporis, odit quam ipsa maiores reprehenderit, expedita itaque. Qui consectetur fuga eos esse. Placeat iure corrupti eos asperiores rem ratione accusamus, perspiciatis sit dolorum quo ex debitis corporis iste labore. Dolorum voluptatibus eaque sint consequatur neque, quos nobis laudantium alias error laborum quo, ipsa.
        <figure class="one-third left zoom-effect">
            <div class="aspectRatioPlaceholder">
                <div class="aspect-ratio-fill" style="padding-bottom: 75.78947368421053%;"></div>
                <img class="img" data-width="475" data-height="360" src="http://editor.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
            </div>
        </figure>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quibusdam dolore beatae adipisci nobis, odit doloremque reprehenderit, nam maxime aliquid impedit porro nihil, quo consequuntur ducimus! Nesciunt modi qui eaque fuga assumenda blanditiis, eos velit libero, ipsa, tenetur ipsam repudiandae harum magni accusantium! Iusto voluptas ipsum praesentium quisquam, dicta, accusantium eaque laborum. Quisquam inventore illum totam temporibus dolorum excepturi adipisci minus ea aspernatur dignissimos, laudantium qui blanditiis rem ut nulla impedit odio quo mollitia veniam, vero amet deleniti perferendis quibusdam. Labore perspiciatis consequatur similique optio totam dolor molestias eius quae corporis laudantium odio, cupiditate, sapiente nobis obcaecati doloremque aperiam iste expedita at sequi dignissimos. Delectus in, quaerat ab eum labore qui, assumenda illum itaque ad numquam fugiat adipisci impedit rerum? Unde dolore doloribus accusantium quod sapiente id nam cumque aliquam assumenda a corporis fuga ad qui odit hic possimus, blanditiis alias quia fugit. Sunt, excepturi provident ea modi at nesciunt eum enim dicta, veritatis illum aliquam distinctio perspiciatis quidem quo, sapiente earum velit autem. Explicabo, magni consequuntur. Debitis ea neque asperiores facere impedit sed saepe illo enim optio aut? Ad amet nostrum tempora recusandae explicabo voluptate quidem, esse, et nihil temporibus reprehenderit magni repellat sequi impedit dolore sed vitae cupiditate.
        <figure class="one-third right zoom-effect">
            <div class="aspectRatioPlaceholder">
                <div class="aspect-ratio-fill" style="padding-bottom: 209.96%;"></div>
                <img class="img" data-width="763" data-height="1602" src="http://editor.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
            </div>
        </figure>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum sequi aspernatur cumque nisi illo alias possimus ipsum numquam. Accusantium soluta fuga ipsa tempora mollitia, illum et aperiam officia! Dicta veritatis vitae culpa itaque praesentium eos ipsum maiores aspernatur quam hic. Consectetur, voluptas blanditiis velit dolores nihil eos, inventore, doloribus molestias dicta suscipit dolore rem quisquam quasi officia? Blanditiis, labore animi nesciunt exercitationem numquam velit nostrum, consequuntur illum quis laudantium enim quibusdam maxime, aliquam debitis sunt quam neque alias fugiat rem fugit explicabo nobis totam. Sit doloremque, quibusdam nostrum aliquam minima, asperiores vel atque! Est dignissimos veritatis expedita sunt ut, itaque ratione magnam tempora quo a repellat nobis, nostrum debitis ea aut optio tenetur aspernatur ipsa. Quisquam similique sint nihil veniam hic atque molestiae pariatur iure illo dicta quibusdam inventore, perspiciatis suscipit, illum esse laborum quidem quaerat in repellendus necessitatibus eveniet? Officiis impedit fuga, ea laboriosam ipsum autem dolores quo alias harum dignissimos consectetur repudiandae voluptatum voluptate fugiat qui facere vero laborum nam optio consequuntur! Saepe molestiae pariatur temporibus totam doloremque, dolorum minima consequatur doloribus voluptate nobis quaerat vel repellat error quasi optio sed aut? Maiores non eveniet, laborum nulla, voluptatem nisi, molestias perferendis temporibus, repellendus vero itaque dicta quidem! At.
        <figure class="half left zoom-effect">
            <div class="aspectRatioPlaceholder">
                <div class="aspect-ratio-fill" style="padding-bottom: 50%;"></div>
                <img class="img" data-width="900" data-height="450" src="http://editor.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
            </div>
        </figure>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eius soluta ipsa maxime officia quam corrupti, omnis dignissimos ea. Atque commodi, quasi officiis! Quod alias ad repellat, autem aut voluptas. Ipsa obcaecati reiciendis harum consequuntur animi, sequi atque commodi quam, laborum voluptatibus dolorem quidem ea nihil aspernatur ut dolor maiores, architecto, odit illo! Vitae mollitia magni similique rem dolor ex modi doloremque totam autem adipisci in praesentium sunt dignissimos unde nulla est eum amet neque, ab illum nobis. Eos eligendi aliquid minus, nesciunt accusantium quos rerum expedita magni minima obcaecati voluptatibus adipisci aliquam labore rem necessitatibus? Incidunt sed doloribus dicta reiciendis officia alias atque, nostrum, cum delectus vitae odit et harum eum deserunt dolor. Laborum nihil porro aspernatur numquam ex animi obcaecati amet, doloribus officia, dolor doloremque. Repellendus sunt tenetur, facilis hic quasi itaque eius sequi! Deserunt dolorum accusamus ut veritatis repellat dolorem eveniet tempora minima blanditiis, quibusdam facilis vel quisquam, facere distinctio vitae! Corporis hic qui mollitia impedit, distinctio laborum aspernatur a tenetur quaerat autem? Quis repellendus incidunt mollitia deleniti dolores ad tenetur, veniam, perferendis minima rem inventore. Saepe, molestiae iste qui necessitatibus. Nihil, animi odit cumque at ea minima eaque adipisci dolore quae, recusandae a rerum aliquam eius aspernatur voluptate unde placeat sint laudantium, dicta sunt non vitae soluta labore perspiciatis. Cupiditate esse id maiores a, excepturi culpa assumenda porro, non modi nihil, velit nostrum obcaecati placeat fuga quod. Placeat ab commodi itaque iusto provident nemo qui ducimus natus, delectus laudantium quia expedita, accusamus quisquam dicta magni! Ipsum reprehenderit, doloribus nisi in natus facere voluptatibus dolorem cupiditate nam voluptas sequi nobis recusandae veniam error et magnam unde pariatur ad velit, provident maiores. Quo unde obcaecati vitae earum exercitationem facere aliquid dolorum, eum dicta debitis pariatur nobis, hic recusandae accusantium beatae odio. Quo tenetur fugit unde quibusdam, voluptatibus repudiandae!
        <figure class="one-third right zoom-effect">
            <div class="aspectRatioPlaceholder">
                <div class="aspect-ratio-fill" style="padding-bottom: 56.25%;"></div>
                <img class="img" data-width="1920" data-height="1080" src="http://editor.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
            </div>
        </figure>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore et qui modi provident expedita, atque ipsum, rem quo a dignissimos illum maxime voluptatum aperiam commodi in eaque culpa obcaecati. Inventore incidunt numquam vero repellendus? Officia nam unde, obcaecati reprehenderit impedit, corrupti vel aut architecto necessitatibus, id explicabo saepe nisi facere quidem inventore deleniti itaque ullam recusandae! Doloribus harum temporibus quisquam hic maiores, alias tempore, omnis amet, fugiat officiis quod excepturi, cumque illum. Cum nemo maiores itaque velit sint facilis eum exercitationem, earum, quibusdam ratione quo nobis sequi fugit quaerat ducimus, quos magnam iusto. Impedit quas cum obcaecati error, nulla consequatur.
        <figure class="full left zoom-effect">
            <div class="aspectRatioPlaceholder">
                <div class="aspect-ratio-fill" style="padding-bottom: 100%;"></div>
                <img class="img" data-width="800" data-height="800" src="http://editor.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
            </div>
        </figure>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio facere odit culpa numquam cumque omnis nemo itaque assumenda! Quo amet vel laboriosam repellat, odit. Eveniet incidunt odio voluptates dolorum aperiam rerum veritatis delectus fuga nihil aut repellendus, optio saepe repudiandae quaerat vel itaque voluptatum consectetur veniam inventore! Ducimus doloremque reiciendis aspernatur, nihil quidem quod aliquam, fugit et placeat a vero aut sunt quis nesciunt quam, fuga corporis. Quisquam possimus odit iure ratione, blanditiis explicabo non numquam praesentium doloremque sequi illo provident itaque, dicta aperiam eligendi veniam ea dolorem ipsa similique rerum, molestiae veritatis quod. Consequatur nihil non, adipisci. Assumenda, consequatur quis ad voluptatibus mollitia sapiente eius autem ipsam dolores. Sapiente commodi delectus, minus laborum vero inventore totam necessitatibus deleniti recusandae voluptates, iste expedita pariatur est consequatur voluptate error officiis et laudantium, optio at eos. Nobis, quis! Officiis, nobis voluptatem. Omnis doloremque in maxime voluptatem perspiciatis sint, necessitatibus fuga neque, quasi, voluptas recusandae debitis, et ut repellat earum? Nesciunt at, iste et rem dignissimos ex, reiciendis sit sint assumenda voluptate ullam. Quaerat corrupti aliquid fugit labore quam, ducimus ab eos consequuntur itaque sit quod, similique tenetur reprehenderit libero quis voluptas numquam deleniti voluptatem non quibusdam. Dolor ea asperiores fugiat vero eius.
        <figure class="half right zoom-effect">
            <div class="aspectRatioPlaceholder">
                <div class="aspect-ratio-fill" style="padding-bottom: 40%;"></div>
                <img class="img" data-width="2560" data-height="1024" src="http://editor.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
            </div>
        </figure>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam dolor harum quis, provident! Provident, itaque eum quos eaque vel natus laborum illo modi molestias non dicta, voluptatibus debitis quaerat, reiciendis, amet porro deleniti. Impedit repellat, nulla iure odio labore dolorum vel laboriosam officiis eligendi, obcaecati eos magni animi voluptatibus optio repudiandae nobis quae. Officia quibusdam consequatur doloremque magnam voluptas, est ratione quidem qui cum, saepe, repudiandae! Amet repudiandae, officia tempora error nulla magni veniam, voluptatem autem voluptatum voluptate ipsa aliquam architecto adipisci dolorum rerum. Obcaecati provident voluptatum numquam odio eos, incidunt ullam totam, laboriosam nobis voluptas ipsa, quo consequatur error. Ex totam soluta molestias beatae ratione atque illo, et eveniet maiores in dolores sunt nobis culpa, alias commodi ducimus voluptas vitae, officiis eum magni sit fugit, distinctio repellendus quaerat! Deserunt, illum quod consectetur sequi similique nesciunt sint qui excepturi necessitatibus et tenetur assumenda minus dolore possimus maiores debitis fugit reiciendis nobis pariatur minima eligendi doloremque. Itaque quas earum accusamus vitae nisi est delectus cupiditate a. In quod, nobis iste neque, harum ad. Ipsum ipsa accusamus cum illum, ullam at explicabo. Minus quod non, nulla ad vel totam ipsa enim nam vero eaque tempore fugiat ea architecto illum aut velit placeat distinctio rerum hic? Aliquam tempore, deserunt sed quas sint, ex non omnis ab consequatur rem, tenetur. Nisi ipsam quia hic, temporibus voluptas ducimus, vel inventore. Quaerat voluptate aliquam nobis, tempore dignissimos amet aut in, dolores? Commodi optio, autem fuga beatae natus eum pariatur voluptatem iusto possimus at voluptate, similique perferendis nesciunt dolores facilis excepturi ad recusandae earum numquam velit officiis facere praesentium voluptates minus. A ea sunt dolor doloribus provident perferendis porro aliquam amet mollitia vero, nesciunt facere eaque eum voluptate quos laborum quod ratione voluptas labore rem tempore officiis! Alias ipsam ex maiores, sint, adipisci eius. Minus culpa at fugit accusantium maiores rem vero, soluta ex odit atque incidunt quaerat optio placeat ipsa modi est debitis alias nemo. Laborum deserunt repellat sit, nam ipsam fuga quis error ut eaque sed voluptatum laudantium alias omnis repellendus. Dolorem possimus modi, ratione reprehenderit magni, adipisci quo quos temporibus deserunt omnis laudantium eum fugit eveniet soluta delectus fuga, ut eaque architecto culpa odio hic quia. Cum voluptas provident aspernatur nemo inventore saepe quisquam tempora non cupiditate dolore, officiis ullam praesentium debitis repudiandae tempore ab explicabo totam delectus sunt quos qui. Mollitia iste repellendus iusto quod odit minus architecto earum, similique corporis quos voluptates debitis eligendi. Iure voluptates eum amet necessitatibus odio, molestias aperiam. Maiores natus, delectus quae suscipit voluptatum cumque corporis obcaecati eum quaerat facere maxime expedita? Placeat quisquam iste minus incidunt, autem at, odit aliquid debitis omnis ipsam harum numquam quasi non veniam doloremque officia voluptatibus eligendi possimus excepturi ullam exercitationem adipisci animi pariatur. Sequi id iure nesciunt eius ad dignissimos dolor ea, odit magni incidunt consequatur perspiciatis laudantium, quo rem expedita hic libero totam aliquid repellendus tenetur! Repellendus officiis officia iusto, aliquam debitis, neque dolorem possimus praesentium voluptatibus quis, reiciendis dolore itaque est voluptatem sed. Aperiam, illum rem facilis quo. Doloribus.
    </div>

</body>
</html>


官方地址https://github.com/davidecalignano/MediumLightbox

立即下载mediumLightbox.js查看所有js插件

网友评论0

程序员在线工具箱