codehaven - php snippets - coding help
Generic filters
Exact matches only
    • octopus energy discount code

    Carousfredsel lazyload

    14th April 2015

    Jquery Misc

    jquery icon

    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 &raquo;</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>
     

    Was this code snippet helpful?

    RSS Latest Snippets
    LINKS
    A Repository of Code Snippets in many Programming Languages:-

    PHP – JQUERY
    CSS – MYSQL
    WORDPRESS – JAVASCRIPT
    WOOCOMMERCE – HTML

    © 2022 CODEHAVEN