[Django]-How to show content by scrolling down?

2👍

This would help 🙂

Run the code snippet and check.

As you keep scrolling the page, the remaining images on the screen would get displayed if the window scroll position is greater than the last image scroll position.

function showImages(){
    
  var imgStartIndex = 0;
  var nextSetOfImages = 10;
  var incrementImageLimit = 10;
  var collectionOfImages = $(".thumbnail img");
  var noOfImages = collectionOfImages.length;

  return function(){
  
    for (var i = imgStartIndex; i < nextSetOfImages; i++){
      $(collectionOfImages[i]).fadeIn().addClass("shown");
    } 

    imgStartIndex = imgStartIndex + incrementImageLimit;
    nextSetOfImages = imgStartIndex + nextSetOfImages;
    nextSetOfImages = (nextSetOfImages >= noOfImages) ? noOfImages : nextSetOfImages;

  };
    
}

var disImg = showImages();

$(document).ready(function(){
  disImg();
  
  $(document).scroll(function(){
    
    var scollPostion = $(window).scrollTop();
    var imgShownLast = $(".thumbnail img.shown").last();
    var imgShowFist = $(".thumbnail img.shown").first();
    var imgLastScrollPos = $(imgShownLast).offset().top;
    var imgFirstScrollPos = $(imgShowFist).offset().top;
    scollPostion = scollPostion + imgFirstScrollPos + 200; 
    if(scollPostion > imgLastScrollPos){ 
      disImg();
    }
    
  });
  
});

.thumbnail img{
  width:100px;
  height:100px;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
      <h2>Pictures of Coffee</h2>
      <div class="row">
        <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
      </div>

    </div>

👤Edison Trutwein

[Django]-Stripe: Error "This application is not authorized to edit this account" while updating the account in stripe

0👍

event for scroll is:

$(window).on('scroll', function() {

 //write your logics to load your images as per requirements

})

👤Sunny

0👍

First of all bootstrap divide a row in 12 columns so for example:

<div class="container">
        <div class="row">
             <div class="col-xs-4 col-lg-4 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
             <div class="col-xs-4 col-lg-4 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
             <div class="col-xs-4 col-lg-4 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
        </div>
</div>

use another row with columns like above (in the container). To make the scroll effects you need three components: Animate ccs https://daneden.github.io/animate.css/
viewportchecker https://github.com/dirkgroenen/jQuery-viewport-checker jquery http://code.jquery.com/jquery.js
Follow this example add this in the tag head of the html template. Where you find href or src you must overwrite with the path where you store the three files above OR you can directly use external file, for example http://code.jquery.com/jquery.js

<link rel="stylesheet" type="text/css" href="animate.css" />
<script src="viewportchecker.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<style>
    .hidden{opacity:0;}
    .visible{opacity:1;}
</style>

in the body tag add this, replace the container with your code BUT remember that the script add the effect to “.post” class so maybe you will want change the name of your code class or you can also change the class in the script:

<div class="container">
            <div class="post"> <!-- Post content goes here --> </div>
            <div class="post"> <!-- Post content goes here --> </div>
            <div class="post"> <!-- Post content goes here --> </div>
            <div class="post"> <!-- Post content goes here --> </div>
            <div class="post"> <!-- Post content goes here --> </div>
            <div class="post"> <!-- Post content goes here --> </div>
</div>

👤lausent

Source:stackexchange.com

Leave a comment Cancel reply