Created
March 21, 2018 00:08
-
-
Save HuanxinHu/7d01273baed54f0864615e618d4b9c5e to your computer and use it in GitHub Desktop.
JS Bin lazyload gallery // source http://jsbin.com/mukixej
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="lazyload gallery"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| img{ | |
| width: 200px; | |
| display: block; | |
| float: left; | |
| } | |
| .container{ | |
| height: 125px; | |
| left: 0; | |
| position: relative; | |
| transition: left 1s; | |
| } | |
| .view-box{ | |
| overflow: hidden; | |
| width: 200px; | |
| height: 125px; | |
| border: 3px solid green; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="view-box"> | |
| <div class="container"> | |
| </div> | |
| </div> | |
| <button id="left"><</button> | |
| <button id="right">></button> | |
| <script src="https://code.jquery.com/jquery-3.1.0.js"></script> | |
| <script id="jsbin-javascript"> | |
| var srcs = [ | |
| 'https://images.pexels.com/photos/226721/pexels-photo-226721.jpeg?h=350&auto=compress&cs=tinysrgb', | |
| 'https://images.pexels.com/photos/339614/pexels-photo-339614.jpeg?h=350&auto=compress&cs=tinysrgb', | |
| 'https://images.pexels.com/photos/371450/pexels-photo-371450.jpeg?h=350&auto=compress&cs=tinysrgb', | |
| 'https://images.pexels.com/photos/35884/amazing-beautiful-beauty-blue.jpg?h=350&auto=compress&cs=tinysrgb', | |
| 'https://images.pexels.com/photos/417186/pexels-photo-417186.jpeg?h=350&auto=compress&cs=tinysrgb' | |
| ]; | |
| var idx = 0; | |
| function init(){ | |
| var $container = $('.container'); | |
| $container.css({width: srcs.length*200}); | |
| var imgs = srcs.map((src, index) => { | |
| if(idx===index || idx+1 ===index){ | |
| return `<img src=${src}/>` | |
| }else{ | |
| return `<img data-src=${src} alt=${index}>` | |
| } | |
| }).join(''); | |
| $container.append(imgs); | |
| } | |
| $(document).ready(function(){ | |
| init(); | |
| }); | |
| $('#left').on('click', function(e){ | |
| if(idx===0) return; | |
| idx--; | |
| $('.container').css({ left: -idx*200 }); | |
| }); | |
| $('#right').on('click', function(e){ | |
| if(idx===srcs.length-1) return; | |
| idx++; | |
| var img = $($('img')[idx+1]); | |
| if(img && !img.attr('src')){ | |
| img.attr('src', img.data('src')); | |
| } | |
| $('.container').css({ left: -idx*200 }); | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">img{ | |
| width: 200px; | |
| display: block; | |
| float: left; | |
| } | |
| .container{ | |
| height: 125px; | |
| left: 0; | |
| position: relative; | |
| transition: left 1s; | |
| } | |
| .view-box{ | |
| overflow: hidden; | |
| width: 200px; | |
| height: 125px; | |
| border: 3px solid green; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var srcs = [ | |
| 'https://images.pexels.com/photos/226721/pexels-photo-226721.jpeg?h=350&auto=compress&cs=tinysrgb', | |
| 'https://images.pexels.com/photos/339614/pexels-photo-339614.jpeg?h=350&auto=compress&cs=tinysrgb', | |
| 'https://images.pexels.com/photos/371450/pexels-photo-371450.jpeg?h=350&auto=compress&cs=tinysrgb', | |
| 'https://images.pexels.com/photos/35884/amazing-beautiful-beauty-blue.jpg?h=350&auto=compress&cs=tinysrgb', | |
| 'https://images.pexels.com/photos/417186/pexels-photo-417186.jpeg?h=350&auto=compress&cs=tinysrgb' | |
| ]; | |
| var idx = 0; | |
| function init(){ | |
| var $container = $('.container'); | |
| $container.css({width: srcs.length*200}); | |
| var imgs = srcs.map((src, index) => { | |
| if(idx===index || idx+1 ===index){ | |
| return `<img src=${src}/>` | |
| }else{ | |
| return `<img data-src=${src} alt=${index}>` | |
| } | |
| }).join(''); | |
| $container.append(imgs); | |
| } | |
| $(document).ready(function(){ | |
| init(); | |
| }); | |
| $('#left').on('click', function(e){ | |
| if(idx===0) return; | |
| idx--; | |
| $('.container').css({ left: -idx*200 }); | |
| }); | |
| $('#right').on('click', function(e){ | |
| if(idx===srcs.length-1) return; | |
| idx++; | |
| var img = $($('img')[idx+1]); | |
| if(img && !img.attr('src')){ | |
| img.attr('src', img.data('src')); | |
| } | |
| $('.container').css({ left: -idx*200 }); | |
| }); | |
| </script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| img{ | |
| width: 200px; | |
| display: block; | |
| float: left; | |
| } | |
| .container{ | |
| height: 125px; | |
| left: 0; | |
| position: relative; | |
| transition: left 1s; | |
| } | |
| .view-box{ | |
| overflow: hidden; | |
| width: 200px; | |
| height: 125px; | |
| border: 3px solid green; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var srcs = [ | |
| 'https://images.pexels.com/photos/226721/pexels-photo-226721.jpeg?h=350&auto=compress&cs=tinysrgb', | |
| 'https://images.pexels.com/photos/339614/pexels-photo-339614.jpeg?h=350&auto=compress&cs=tinysrgb', | |
| 'https://images.pexels.com/photos/371450/pexels-photo-371450.jpeg?h=350&auto=compress&cs=tinysrgb', | |
| 'https://images.pexels.com/photos/35884/amazing-beautiful-beauty-blue.jpg?h=350&auto=compress&cs=tinysrgb', | |
| 'https://images.pexels.com/photos/417186/pexels-photo-417186.jpeg?h=350&auto=compress&cs=tinysrgb' | |
| ]; | |
| var idx = 0; | |
| function init(){ | |
| var $container = $('.container'); | |
| $container.css({width: srcs.length*200}); | |
| var imgs = srcs.map((src, index) => { | |
| if(idx===index || idx+1 ===index){ | |
| return `<img src=${src}/>` | |
| }else{ | |
| return `<img data-src=${src} alt=${index}>` | |
| } | |
| }).join(''); | |
| $container.append(imgs); | |
| } | |
| $(document).ready(function(){ | |
| init(); | |
| }); | |
| $('#left').on('click', function(e){ | |
| if(idx===0) return; | |
| idx--; | |
| $('.container').css({ left: -idx*200 }); | |
| }); | |
| $('#right').on('click', function(e){ | |
| if(idx===srcs.length-1) return; | |
| idx++; | |
| var img = $($('img')[idx+1]); | |
| if(img && !img.attr('src')){ | |
| img.attr('src', img.data('src')); | |
| } | |
| $('.container').css({ left: -idx*200 }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment