photobox

2018-07-13 admin

photobox是什么

什么是photobox,A lightweight CSS3 image gallery plugin for jQuery that is pretty to look and and easy to use.

photobox介绍、photobox使用

<a href="http://www.somedomain.com/images/image1_large.jpg">
    <img src="http://www.somedomain.com/images/image1_small.jpg"
        title="photo1 title">
</a>
<a href="http://www.somedomain.com/images/image2_large.jpg">
    <img src="http://www.somedomain.com/images/image2_small.jpg"
        alt="photo2 title">
</a>
<a href="http://www.somedomain.com/images/image3_large.jpg">
    <img src="http://www.somedomain.com/images/image3_small.jpg"
        title="photo3 title">
</a>
<a href="http://www.somedomain.com/images/image4_large.jpg">
    <img src="http://www.somedomain.com/images/image4_small.jpg"
        alt="photo4 title" data-pb-captionLink='Google website[www.google.com]'>
</a>
<a href="http://www.youtube.com/embed/W3OQgh_h4U4" rel="video">
    <img src="http://img.youtube.com/vi/W3OQgh_h4U4/0.jpg"
        title="PEOPLE ARE AWESOME 2013 FULL HD ">
</a>

</div> … … … <script> // applying photobox on a gallery element which has lots of thumbnails links. // Passing options object as well: //----------------------------------------------- $(’#gallery’).photobox(‘a’,{ time:0 });

// using a callback and a fancier selector
//----------------------------------------------
$('#gallery').photobox('li > a.family',{ time:0 }, callback);
function callback(){
   console.log('image has been loaded');
}

// destroy the plugin on a certain gallery:
//-----------------------------------------------
$('#gallery').photobox('destroy');

// re-initialize the photbox DOM (does what Document ready does)
//-----------------------------------------------
$('#gallery').photobox('prepareDOM');

</script>


## [](#videos)Videos

```text-html-basic
<div id='gallery'>
    ...
    <a href="http://www.youtube.com/embed/W3OQgh_h4U4" rel="video">
        <img src="http://img.youtube.com/vi/W3OQgh_h4U4/0.jpg"
            title="PEOPLE ARE AWESOME 2013 FULL HD ">
    </a>
    ...
</div>

A video link must have the rel attribute with the value of video. The url of the link must be the iframe embed (youtube, vimeo, etc.) And inside you can put a thumbnail of the video (of course)

Changing Effects Is Easy!

I designed Photobox (as an image viewer) to only show a single item at a time (image or video), and so, the changing between images works is that first the current image must transition itself “out”, and the javascript code will “listen” to that transition, and when it’s over, the code will reset some things to their initial state, replace the item with the new one, and will trantision that new item into view. The effects are done via CSS and are very easy to change!

The default transition is the the current image “grows” and fades out of view, and when it is completely gone, the new image will appear to grow, rotate until it is “flat” (a bit) and fade-in. Every time there’s an image change that is either next or previous, the pbOverlay element will have a class for that change ‘next’ or ‘prev’, so you can work with those to achieve an effect like the images are moving to the sides, depending on the direction, for example, you can use this CSS snippet to achieve that:

.pbHide .pbWrapper > *,
.pbHide .pbWrapper > .prepare{ opacity:0; transition:.2s ease-in; }

.pbWrapper > div,
.pbWrapper > img{
    transition:.2s ease-out;
    opacity: 1;
}

/*** when going to the next slide ***/
/* prepare next slide which will be shown */
.pbWrapper > *,
.pbHide.next .pbWrapper > .prepare{ transform:translatex(40%); }
/* prepare current slide which will "go away" */
.pbHide.next .pbWrapper > *{ transform:translatex(-40%);  }

/* when going to the previous slide */
.pbWrapper > *,
.pbHide.prev .pbWrapper > .prepare{ transform:translatex(-40%); }
.pbHide.prev .pbWrapper > *{ transform:translatex(40%); }

Custom Caption Links

you can add your own links along with the title or alt attributes texts, just add data-pb-captionLink to the image thumbnail:

data-pb-captionLink='Google website[www.google.com]'

Overriding defaults

It is always recommended not to touch the source code directly, because then you will have a version which is out-of-sync with any future version, and you might face some difficult merges with your own changes. So, if you want to change some stuff, I would recommend creating another file, typically called jquery.photobox.mod.js. This good practice also applies for the CSS file.

Example:

/*!
    photobox modifications,
    after it has been loaded
*/

(function(){
    "use strict";
    // adding a "userInfo" HTML to the overlay container:
    var userInfo = $('<div class="userInfo"><img><span></span>

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35914.html

文章标题:photobox

回到顶部