Infinite scroll random image album

Question

I would need a simple page that loads all image from a specific folder a show them in random order putting them one after one, making an "infinite" vertical scroll page :)

Something like http://jasmin.com (NSFW)

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

There is a jQuery plugin called infinite-scroll that does most of what have described. Its methods allow you to decide when you would like to load more content to your page, what you would like to load, and where. I believe its core function is $('.selector').infinitescroll('scroll');.

EDIT
If this solution is too complex, there is a simple scroll detection example on stackoverflow here and here.

edited May 23 '17 at 10:33

Community

1
1

answered Sep 24 '14 at 22:12

Frumples

405
4
17

thank you! going to try it! Do you think it can resize automatically image size too? – ScrollerS Sep 24 '14 at 22:15
You have to specify what you would like to be loaded. I would recommend reading the documentation on the link I provided in my answer. Then you can decide whether it is something you can work with. – Frumples Sep 24 '14 at 22:25
why i can't see nothing? http://rfactorstreetcarstracks.altervista.org/scroller.htm – ScrollerS Sep 24 '14 at 22:36
I don't want to discredit your abilities, but, it would have taken me at least an hour to learn how to use 'infinite-scroll' in my own code. Can you tell me the steps you have taken to implement the plugin in your own code, so that I have a better idea of what you have done? – Frumples Sep 24 '14 at 22:43
dont worry, wait i reply :) – ScrollerS Sep 24 '14 at 22:47
can't see it...where? however, is there a demo page of infinite-scroll with image? It would be LOT helping :) – ScrollerS Sep 24 '14 at 23:10

score -1 · Answer 2 · edited May 24 '18 at 04:38

Firstly i uploaded all the zip content to my ftp.

After this I added:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://rfactorstreetcarstracks.altervista.org/jquery.infinitescroll.js"></script>


    <script type="text/javascript">
$('.selector').infinitescroll({
  loading: {
    finished: undefined,
    finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
                img: null,
    msg: null,
    msgText: "<em>Loading the next set of posts...</em>",
    selector: null,
    speed: 'fast',
    start: undefined
  },
  state: {
    isDuringAjax: false,
    isInvalidPage: false,
    isDestroyed: false,
    isDone: false, // For when it goes all the way through the archive.
    isPaused: false,
    currPage: 1
  },
  behavior: undefined,
  binder: $(window), // used to cache the selector for the element that will be scrolling
  nextSelector: "div.navigation a:first",
  navSelector: "div.navigation",
  contentSelector: null, // rename to pageFragment
  extraScrollPx: 150,
  itemSelector: "div.post",
  animate: false,
  pathParse: undefined,
  dataType: 'html',
  appendCallback: true,
  bufferPx: 40,
  errorCallback: function () { },
  infid: 0, //Instance ID
  pixelsFromNavToBottom: undefined,
  path: "/", // Can either be an array of URL parts (e.g. ["/page/", "/"]) or a function that accepts the page number and returns a URL
  maxPage:undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
});
</script>

Infinite scroll random image album

2 Answers2