This has the cdn for carofredsel also
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
<div id="wrapper"> <div id="carousel"> <div> <br /> <h3>Lazy load images</h3> <p>This example shows how to load images right before they come scrolling in the carousel. This behavior can be compared with what the <a href="http://www.appelsiini.net/projects/lazyload" target="_blank" rel="noopener noreferrer">jquery Lazy Load-plugin</a> does with images that come scrolling in the viewport.</p> <br /> <p><a href="#" id="start"><strong>Start scrolling »</strong></a></p> </div> <img data-original="img/sport1.jpg" src="http://lorempixel.com/400/200" width="500" height="500" border="0" /> <img data-original="img/sport2.jpg" src="http://lorempixel.com/400/200" width="500" height="500" border="0" /> <img data-original="img/sport3.jpg" src="http://lorempixel.com/400/200" width="500" height="500" border="0" /> <img data-original="img/sport4.jpg" src="http://lorempixel.com/400/200" width="500" height="500" border="0" /> <img data-original="img/sport5.jpg" src="http://lorempixel.com/400/200" width="500" height="500" border="0" /> <img data-original="img/sport6.jpg" src="http://lorempixel.com/400/200" width="500" height="500" border="0" /> <img data-original="img/sport7.jpg" src="http://lorempixel.com/400/200" width="500" height="500" border="0" /> <img data-original="img/sport8.jpg" src="http://lorempixel.com/400/200" width="500" height="500" border="0" /> <img data-original="img/sport9.jpg" src="http://lorempixel.com/400/200" width="500" height="500" border="0" /> <img data-original="img/sport10.jpg" src="http://lorempixel.com/400/200" width="500" height="500" border="0" /> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js"></script> <script> $(document).ready(function(){ $(function() { $('#carousel').carouFredSel({ direction: 'up', items: 1, auto: false, scroll: { onAfter: function( data ) { loadImage( data.items.old.prev() ); loadImage( data.items.visible.next() ); } }, onCreate: function( data ) { loadImage( data.items.next() ); } }); $('#start').click(function() { $('#carousel').trigger('play', true); $('#carousel').trigger('next'); return false; }); }); // load the actual image function loadImage( $img ) { if ( !$img.is( 'img' ) ) { $img = $img.find( 'img' ); } if ( $img.is( 'img' ) ) { if ( $img.attr( 'src' ).indexOf( '_placeholder' ) != -1 ) { $img.attr( 'src', $img.data( 'original' ) ); } } } }); </script> <style> html, body { height: 100%; padding: 0; margin: 0; } body { background-color: #f3f3f3; min-height: 600px; } body * { font-family: Arial, Geneva, SunSans-Regular, sans-serif; font-size: 14px; color: #333; line-height: 22px; } #wrapper { background-color: #fff; border: 1px solid #ccc; width: 500px; height: 500px; margin: -280px 0 0 -280px; padding: 30px; overflow: hidden; position: absolute; left: 50%; top: 50%; } #wrapper h3 { font-size: 20px; } #carousel img { display: block; } #carousel div { width: 400px; height: 400px; padding: 50px; } </style> |
