JQuery-based image album slide-out extension, jquery album
Today we bring you a jQuery-based image album slide-out extension. Click the album image to display the image. This plug-in is applicable to browsers such as IE8, 360, FireFox, Chrome, Safari, Opera, aoyou, sogou, and windows of the world .. As follows:
Download Online Preview source code
Implementation code.
Html code:
<Div class = "menu"> <a href = "index.html"> demo 1 (default) </a> <a class = "cur" href = "index_2.html"> demonstration 2 (No animation) </a> <a href = "index_3.html"> demonstration 3 (automatic playback) </a> </div> <div class = "plusview"> <ul> <li> <a href = "images/1b.jpg" data-type = "image"> </a> </li> <a href = "images/2b.jpg" data-type = "image"> </a> </li> <a href = "images/3b.jpg" data-type =" image "> </a> </li> <a href =" images/4b.jpg "data-type = "image"> </a> </li> <a href = "images/5b.jpg" data -type = "image"> </a> </li> <a href = "images/6b.jpg "data-type =" image "> </a> </li> <a href =" images /7b.jpg "data-type =" image "> </a> </li> <a href = "images/8b.jpg" data-type = "image"> </a> </li>
Css code:
.plusview { width: 700px; margin: 0 auto; overflow: hidden; } .plusview ul { margin-left: -10px; list-style-type: none; } .plusview li { float: left; margin: 10px 0 0 10px; display: inline; } .plusview img { border: 0 none; } .PlusView-largeBg { background: #fafafa; text-align: center; position: relative; padding: 0 50px; zoom: 1; } .PlusView-button { width: 50px; position: absolute; border: 1px solid #f0f0f0; background: #fff; } .PlusView-button span { background: url(images/plusview_arrows.png) no-repeat; display: block; width: 50px; height: 50px; } .PlusView-button:hover { border: 1px solid #d0d0d0; } .PlusView-leftArrow { left: 0; } .PlusView-leftArrow span { background-position: -100px 0px; } .PlusView-leftArrow:hover span { background-position: -150px 0px; } .PlusView-rightArrow { right: 0; } .PlusView-rightArrow span { background-position: -50px 0px; } .PlusView-rightArrow:hover span { background-position: 0 0; }
Via: http://www.w2bc.com/Article/17048