A very good effect of the jquery plugin-lightbox

Today we introduce a very good jquery image to see the plugin-lightbox. This picture view plug-in experience is very good, not only the left and right two small arrows can browse the previous and next picture, but also support the mouse around the key to browse the previous and next picture. It's a bit like a Google Picture viewer. Look together:

Online preview Source Download

Let's look at the implementation code together:

HTML code:

<DivID= "wrapper">        <H1>Responsive Lightbox Portfolio</H1>        <ulID= "Portfolio"class= "Clearfix">            <Li><ahref= "Img/[email protected]"title= "Brick and Bay Windows">                <imgsrc= "Img/item01.jpg"alt= "Brick and by Windows"></a></Li>            <Li><ahref= "Img/[email protected]"title= "Simple IPad Icons">                <imgsrc= "Img/item02.jpg"alt= "Old-style ipad Icons"></a></Li>            <Li><ahref= "Img/[email protected]"title= "Mobile profile">                <imgsrc= "Img/item03.jpg"alt= "Mobile iphone App profile UI"></a></Li>            <Li><ahref= "Img/[email protected]"title= "New Shoes">                <imgsrc= "Img/item04.jpg"alt= "New Balance Shoes"></a></Li>            <Li><ahref= "Img/[email protected]"title= "Rive Radio Icon">                <imgsrc= "Img/item05.jpg"alt= "Rive Radio Icon"></a></Li>            <Li><ahref= "Img/[email protected]"title= "Blood pressure app">                <imgsrc= "Img/item06.jpg"alt= "blood pressure app UI"></a></Li>            <Li><ahref= "Img/[email protected]"title= "Memories Feed UI">                <imgsrc= "Img/item07.jpg"alt= "Memories Feed UI iphone"></a></Li>            <Li><ahref= "Img/[email protected]"title= "Vector Devices">                <imgsrc= "Img/item08.jpg"alt= "Apple device vector icons"></a></Li>        </ul>    </Div>

View Code

JS Code:

$(function () {            $(' #portfolio '). Magnificpopup ({delegate:A, type:' Image ', Image: {cursor:NULL, TITLESRC:' Title '}, Gallery: {enabled:true, preload: [0, 1],//Would preload 0-before current, and 1 after the current imageNavigatebyimgclick:true                }            }); });

View Code

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/5720

A very good effect of the jquery plugin-lightbox