Results 1 to 9 of 9
Hybrid View
-
21st Sep 2011, 09:45 PM #1Respected Developer
there are more ways but here is one simple for you to understand:
First off keep images only you wants to display on page load, so lets assume you wants only 10 images, so your html will look like this
PHP Code:<ul id="images">
<li><img class="quotes" src="/Quotes/ididntthought.png" alt="/"></li>
<li><img class="quotes" src="/Quotes/ijustwantto.png" alt="/"></li>
<li><img class="quotes" src="/Quotes/dowhat.png" alt="/"></li>
<li><img class="quotes" src="/Quotes/maybeill.png" alt="/"></li>
<li><img class="quotes" src="/Quotes/whenwe.png" alt="/"></li>
<li><img class="quotes" src="/Quotes/ihateyour.png" alt="/"></li>
<li><img class="quotes" src="/Quotes/iwonder.png" alt="/"></li>
<li><img class="quotes" src="/Quotes/icaninsult.png" alt="/"></li>
<li><img class="quotes" src="/Quotes/neverlookback.png" alt="/"></li>
<li><img class="quotes" src="/Quotes/icanttell.png" alt="/"></li>
</ul>
PHP Code:<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.endless-scroll.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$(document).endlessScroll({
bottomPixels: 500,
fireDelay: 10,
callback: function(i) {
// how many images you wants to add? after page stop , you have 30 more to display so add 30 images, after reaching 30 it should stop so add 31 below.
if(i == 31) { ceaseFire(); }
// ok lets add first image, image name is stones.png so i gave just stones, and dont forget alt ;)
if(i == 1) { var image = 'stones'; var alt = 'alt here';}
// lets add second image, image name is lotus.png i gave lotus
if(i == 2) { var image = 'lotus'; var alt = 'lotus alt here'; }
// lets add third image
if(i == 3) { var image = 'other'; var alt = 'other alt';}
// just repeat as above if(i == 4) with image names in img directory and alt you need how many you need
// now time to display,
$("ul#images li:last").after('<li><img src="/Quotes/' + image + '.png" alt="' + alt + '" />' + i + '</li>');
}
});
});
</script>
mRAza Reviewed by mRAza on . jQuery Infinite Scrolling Hey guys, I have a website where I post images everyday, and I don't want to make multiple pages, just one. But now I have about maybe what 40 images on the same page? And I tried multiple times to implement jQuery Scrolling in it (Kind of the same thing as the tumblr infinite page thing) Here's the source code: http://plugins.jquery.com/project/endless-scroll Example: Rating: 5Bots Development | Web Development | Wordpress Customization | PSD Conversion
Life has many twists and turns in it, you have to take what you are given and use it for the best.
Sponsored Links
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Similar Threads
-
[C#] Scrolling Label Function
By dcrew in forum Web Development AreaReplies: 0Last Post: 15th Sep 2012, 10:55 AM -
scrolling backround.
By AJ Blacklisted in forum IP.BoardReplies: 12Last Post: 8th Jun 2012, 11:22 AM -
Need scrolling updates/latest threads mod for vB
By click2down in forum Web Development AreaReplies: 7Last Post: 3rd Nov 2011, 03:38 PM -
[Selling] Scrolling Ads $1 a Month
By SᴩiDᴇЯ in forum Completed TransactionsReplies: 2Last Post: 26th Mar 2010, 05:13 PM -
[Selling] Scrolling Banner on all pages
By SᴩiDᴇЯ in forum Completed TransactionsReplies: 0Last Post: 23rd Mar 2010, 01:48 AM
themaManager - edit and manage...
Version 4.20 released. Open older version (or...