jQuery Plugins – AjaxScroll

AjaxScroll is an lightweight jQuery plugins . Provided the ajax scollpane to replace the Next/Previous buttons, behaviour similar as MSN Image Search(Live.com Search).

MSN Image Search
image

AjaxScroll Plugins
image

Demonstration

Basic
Integrate Fullsize Plugins – (Fullsize Homepage)

Download

Version 0.1 – Download (full demo and source code)

Bugs

Please comment here if you found it, i will kill the bugs ^_^

Related posts:

  1. jQuery Plugins – CheckTree(ycTIN Edition) This edition is compatible with CheckTree, fixed some bugs and...
  2. jQuery Plugins – Month Picker Good user experience month selector, easily to choose the report...
  3. [PHP] Force download the files Some time you may want the user download the file...
  4. Best JavaScript IDE – Aptana Sutdio The Aptana Studio based on the Eclipse IDE, is a...
  5. jQuery Overview jQuery is a fast and concise JavaScript Library that simplifies...


1 Star2 Stars3 Stars4 Stars5 Stars (16 votes, average: 4.00 out of 5)
Loading ... Loading ...
Tags: , , , ,  

46 Comments

  1. Hi,
    thank you for your beautifull script : could I have some explanation about your code :
    I have to display a list of data item from 0 to 1200, and I want to display them by blocks of 100 items when there are needed :
    – how could I configure the batchNum, batchSize, maxOffset ?
    – what are those variables for ?
    Thank you for your help.

    ycTIN Reply:

    Hi Lek,

    I explain the variables first.

    maxOffset : the max number of items you wants to displays
    batchNum : the number of sets will be append, when the scroll to bottom
    batchSize : the number of items in each sets/blocks

    you want diplay 0 ~ 1200, the maxOffset should be set to 1200
    but the batchNum and batchSize, i can’t answer with you because its need consider scroll direction , the container and the items size

    Regards,
    Timmy

    Reply

  2. Hi Timmy,
    thank you for your answer.
    Here a some informations :
    I want to use a vertical scroll
    the container is a div with a total height of 200 px
    the items are div lines with a total height of 12px
    Does this informations help you ?
    Thank you again for your help.

    Regards,
    Lek.

    ycTIN Reply:

    div lines = 1 item per row ? if so
    batchSize = 200 px / 12px = i suggest 17~20 (the sum of items size should be lager than container window size)
    batchNum = 5(default)

    you can fine tune the values to get the best effect

    Reply

  3. All right,
    thank you, it look cool. I have to play with it a little but I am very happy with the actual result.
    Thanks for sharing & keep up the good work,
    Regards,
    Lek

    Reply

  4. Hello,

    Can you please help me understand how to integrate “Fullsize”?
    http://www.addfullsize.com/

    I added the required ‘longdesc’ attribute to the ‘img’ tags, and I’ve tried adding the call to fullsize() in every place that I can think of, except for in your .js file… In my ‘head’, I’m pulling in ‘jquery-1.3.2.min.js’, ‘jquery.ajaxscroll.min.js’, and ‘jquery.fullsize.pack.js’, in that order…

    Can you think of anything?

    Thanks for sharing!

    ycTIN Reply:

    Hi Phoenix,

    You can easily to integrate other image plugins because the AjaxScroll is i develop for my gallery project. Just need call the fullsize plugins in ajax callback function, more detail please find my updated post and download an new source code pack.

    Regards,
    Timmy

    Reply

  5. Awesome, ycTIN.

    I actually just saw your new demo, before coming back here to read your reply…

    What a nice surprise!

    Thank-you so much :)

    Respect ++

    Reply

  6. Hi, I like the idea of this. I am interested to know if you could get it to include asp pages, dynamic ones like .asp?xxxx, or if you could just include images from one folder.
    Thanks
    Richard

    ycTIN Reply:

    Hi richard,

    I am not sure understand your question, but this sure can be dynamic loading any server side page. I using static html in the demo, because my hosting processing the php very slow. You can make few change to support any server side content(php,asp,jsp,cgi …)

    Example
    html:
    $obj.load('vdata/' + $obj.attr('offset') + '.html');
    php:
    $obj.load('data.php?offset=' + $obj.attr('offset'));
    asp:
    $obj.load('data.asp?offset=' + $obj.attr('offset'));

    Regards,
    Timmy

    Reply

  7. I like your demo and thinking of using this plug in, I’d like to display a list of jpeg, and every jpeg should have a link, so that when user click it, it will jump somewhere, possible? thanks.

    ycTIN Reply:

    Yes, you can do this. just need add the link into the image.

    Reply

  8. Great plugin and very responsive. Can you tell me how to change the number of columns in the vertical mode?
    Thanks,
    Esmond

    Reply

  9. I’ve worked out you just need to set the container size and let it flow so please ignore my last message

    Reply

  10. Hi, can u explain how I can use your script, if I have images in my DB and I show them dynamically on every website page? I can only use an ID of an image to exctract it from DB. So how can I use $obj.load(’show_image.php?offset=’ + $obj.attr(‘offset’)); if I have for example 10 images and their IDs are 10, 111, 200, 13, …, X.

    The point is that in your script ‘offset’ is always a beautiful sequence of numbers from 1 to X, and in my case this sequence can be what ever it can be. :)

    ycTIN Reply:

    Hi Konstantin,

    In the SQL, you can locate you records by offset.
    MySQL example: SELECT * FROM images WHERE album_id = 1 LIMIT $offset, 1

    Regards,
    Timmy

    Reply

  11. Hi!

    to start, thank you for this nice scroll ! really usefull!

    could you just tell me if it is possible to use several “ajaxscroll” (horizontal way) on the same page, one under the other?

    actually i’d like to use it to make a picture portfolio, but I need to put several categories of photos on the same page (for instance: portraits, cars, landscapes …)

    each different category using the 1 “ajaxscroll”…, how can I achieve this?

    thanks!

    ycTIN Reply:

    Sure, you can do it. My demo also used two AjaxScroll in single page, you can download the demo source code and try to modify them.

    Regards,
    Timmy

    Reply

  12. hello,

    Could you tell me how to use the script, if I have the datatable (as a datasource for the Grid needs continuous scrolling) with various fields which is formatted in JSon?

    Regards,
    Dat

    Reply

  13. thanx for code…

    Reply

  14. Jeroen De Dauw

    Hey,

    Under what licence is this code released? Also, is there a non-1-line version available somewhere? (I’d like to have a better look at the exact code before using it.)

    Cheers

    Reply

  15. Jeroen De Dauw

    Never mind the licence, it’s in the file, and I somehow missed it >_>

    Reply

  16. Hey Timmy,

    Sweet little plugin dude! Think I maybe biting off more than I can chew so apologies if this seems amateur. Wondered if you, or anyone else would know how to pull in Wordpress posts, any idea what I should be adding?

    Many thanks in advance,

    Rob

    Reply

  17. Nice plugin, how to implement this plugin to wordpress ?

    Reply

  18. thank you it is very usefull, i will use that

    Reply

  19. Hi, congratulations by the plugin!

    I have some question, maybe you can help me.

    Scrollpane: width: 700px; height: 500px;
    It box: width: 700px; height: 150px;

    But, in each box there is a link that can extend the height of the box to 175px; Is it possible to use this plugin with “boxes” with variable height?

    Also, I would like to use batchSize: 1 and batchNum: 1
    But I am having some problems, probably because 1*1 => height=150px is lower than 500px (height of the container), right?

    Thanks in advance!!!

    Reply

  20. Another thing, about that comment: “0 to 1200, and I want to display them by blocks of 100″

    Dont you think the maxOffset should be set to 1200/100 = 12???

    []s

    Reply

  21. Sorry about the floody of comments, maybe you can try to join them.

    I think I reproduce my problem in the basic_demo:

    I change from this:

    } #example_vertical {
    height: 400px;
    width: 700px;
    }

    To this:

    } #example_vertical {
    height: 400px;
    width: 200px;
    }

    After this the loading stop working. I think it is dangerous to have a script fragile to layout changes.

    Suggestion: Maybe the script could load dynamically the width and height of the elements.

    Thanks in advanced e congratulations in the same way by this nice plugin!

    Reply

  22. Hi,How could i replace wp_pageNavi plugins with ajaxscroll?thanks!just email me!

    Reply

  23. Thanks for sharing!

    Reply

  24. what does updateEnd method do?

    is there any possibility to stop making multiple calls, bcos when user scrolls down it makes multiple requests to the server even before the first one finished,

    at a point I have seen it made 55 calls in one go, which is hammering my server, is there any way to stop it from making that many calls,

    Adrina.

    ycTIN Reply:

    May be is your frame size problem. In normally only will make 2~5 requests as time.
    Your can try to change the size of frame, or the scrollDelay and endDelay.

    Hope this help.

    Reply

Leave a Reply

*