MOVED: Infinite Scroll JS & News Module

[jtrein]

Anyone,

I tried my hardest to get infinitescroll.js (http://www.infinite-scroll.com/) working on WebsiteBaker, for the News module, to no avail.

My jQuery is up-to-date and I included the scripts as usual.

What I found when searching forums on GitHub (https://github.com/paulirish/infinite-scroll/issues/5) for the project was that the "/...php?p=5" - or whatever you have your news limit set to 50, 90, etc. -  is not expected from the script.  By default the AJAX, or whatever, is looking for something to effect of /pages/2, /pages/2.html

There has been steps taken in the most recent version to address this, but I still can't get it working!

This would be so awesome to get working, so we don't have to use/expose the [NEXT_PAGE_LINK].


Looking forward to any experimentation!

jtrein

[jtrein]

Update:  Sadly, still no good news.  I can't get it working.  It seems that the JS expects 2 things:

• 1) a number 2 in the URL for the script to kick off.
• 2) The mention of the word 'page' in the URL, since we're using .php URL endings, not .html (i.e. ?page=2)]

So, I even edited some of the News module where 'p' is set for ?p=...#..., to ?page=...#... .  I then set the increments for the News posts per page to multiples of 2, so you would get 2 for the page number, and not the standard 5.

This is a worthwhile script that can add a great amount of interactivity to News.

Any help is appreciated.  Anyone willing to make this a LibraryAdmin plugin?


Kindest,

jtrein

[dbs]

hi, why you post under "help and support"?
"jquery" would be better, hm?
it exists also a forum for libraryadmin: klick

you want infinityscroll for content_short? or content_long?

[jtrein]

Good catch and thank you  

News content_short would be best, I think.

Any help is much appreciated!

[dbs]

the infinitiscroll is very hard to implement ...

i give it up for the moment.
a try with another plugin was easier. the effect is maybe (at the moment) not so pretty: look

[NorHei]

Do i get you right that you want the short text of all news , maybe a few hundered  to scroll infinite on a page ?

Giving it a short thought , i think maybe its better to try whith a modified version of anynews. I schould not be too hard to modify it so it displays only one Newsentry selected by a GET paramater.

Does someone know if anynews supports displaying the images inside the news teaser ? 

[jtrein]

@dbs

That is awesome, dude!  You know, Infinite Scroll has plugin options that allow it to be decorated and further customized.

You make it look so easy.

Also, check this out: http://masonry.desandro.com/demos/infinite-scroll.html

[jtrein]

@NorHei

Do i get you right that you want the short text of all news , maybe a few hundred  to scroll infinite on a page ?

Giving it a short thought , i think maybe its better to try with a modified version of Anynews. I should not be too hard to modify it so it displays only one news entry selected by a GET parameter.

Does someone know if Anynews supports displaying the images inside the news teaser ? 

Cool idea!  As it's not unusual for me to get ahead of myself, I wanted to initially make mention of the possibilities of using other modules.  It would be so cool to just throw it in as a new WB plugin for LibraryAdmin.  Does Blackbird manage that?

This is still racking my brain, but any help is very appreciated!


Kindest,

jtrein

[dbs]

i hope for you norhei or anybody find a solution.
my way is working, but a nice fadin-effect is missing.

[jtrein]

@dbs

i hope for you norhei or anybody find a solution.
my way is working, but a nice fadin-effect is missing.

How did you implement it?

[dbs]

i have made a plugin for jqueryadmin/libraryadmin.
you know what it is or use you the register_frontend_m odfiles-methode?

[jtrein]

@dbs

i have made a plugin for jqueryadmin/libraryadmin.
you know what it is or use you the register_frontend_m odfiles-methode?

I wish I knew!  I'm quite novice when it comes to programming.  The extent of my skillset is: HTML, CSS, some jQuery, minimal PHP, minimal MySQL

Sorry I can't better answer your question!

[dbs]

for use jquery you don't have install a modul (like jqueryadmin or libraryadmin)?
you have changed the index.php of your template?
is there in the head somthing like this?:

Code: [Select]

<?php 
if(function_exists(&#39;register_frontend_modfiles&#39;)) {
    register_frontend_modfiles(&#39;css&#39;);
    register_frontend_modfiles(&#39;jquery&#39;);
    register_frontend_modfiles(&#39;js&#39;);
} 

[jtrein]

@dbs

Oh, I apologize!  Well, I went crazy, one could say, and took the long way around.

I minimally rewrote the News module's view.php file.  Added a WYSIWYG section to the News page and there I included my jQuery script.

So, I guess you could say I used just plain jQuery, without a module.  I created a folder called 'scripts' and just threw it on my server.

No changes to my template file, except to include <script> reference to the infinitescroll.js file.

Included in my template file:

Code: [Select]

<?php
// automatically include optional WB module files (frontend.css, frontend.js)
if (function_exists(&#39;register_frontend_modfiles&#39;)) {
register_frontend_modfiles(&#39;css&#39;);
register_frontend_modfiles(&#39;js&#39;);
} ?>

Kindest,

J. Trein

[dbs]

your way is also a way.  
_{but wb has jquery onboard and with the lines i posted it is activated.}

in your way:
you load this script (jquery.lazyloader.j s):
http://ivorycity.com/blog/2011/04/19/jquery-lazy-loader-load-html-and-images-on-scroll/

you add this call:

Code: [Select]

<script type=”text/javascript” >
$(document).ready( function()
{
    $(’pre.i-am-lazy’).lazyLoad();
});
</script>
you change this in news options (2. field from top):

Code: [Select]

<tr class="post-top"><td class="post-title"><a href="[LINK]">[TITLE]</a></td>
<td class="post-date">[PUBLISHED_DATE], [PUBLISHED_TIME]</td>
</tr>
<tr>
<td class="post-short" colspan="2">[SHORT]<span style="visibility:[SHOW_READ_MORE];"><a href="[LINK]">[TEXT_READ_MORE]</a></span></td></tr>
to this (copy&paste):

Code: [Select]

<pre class="pre.i-am-lazy"><!--<tr class="post-top"><td class="post-title"><a href="[LINK]">[TITLE]</a></td>
<td class="post-date">[PUBLISHED_DATE], [PUBLISHED_TIME]</td>
</tr>
<tr>
<td class="post-short" colspan="2">[SHORT]<span style="visibility:[SHOW_READ_MORE];"><a href="[LINK]">[TEXT_READ_MORE]</a></span></td></tr>--></pre>
if this makes problems change pre.i-am-lazy   to    pre.lazy (2x)

you choose in options all news (not only 5 or 10)

[jtrein]

@dbs

Very interesting!  Thank you very much for that.

So, I can use this method that you posted, or write a plugin for jQueryAdmin / LibraryAdmin to include InfiniteScroll.js (crazy-awesome options)?


Kindest,

J. Trein

[dbs]

use your way for today and test it
the other ways need a little bit more reading tuts and time.

[jtrein]

@dbs

Thanks!  I will do that hopefully tonight, when I get home.

jtrein

[jtrein]

@dbs

Man, I'm at a loss.  The LazyLoader won't work in Firefox.  I have vers. 6, but others reported the same behavior.

I'm not sure I desire LazyLoader's functionality for this, but it is a great idea.

Next steps are uncertain.  Any advice?  I tried again tonight with the InfiniteScroll, to no avail!


Thanks as always!

jtrein

[dbs]

i have also tried, again and again (with lazyloader incl. fade-in-effect).
without fade-in at the moment no problem.

you want lazyloader use?
with libraryadmin or jquery from wb?

with jquery from wb you need this at the end of your head (index.php in your template-folder):

Code: [Select]

<?php 
 if(function_exists(&#39;register_frontend_modfiles&#39;)) {
     register_frontend_modfiles(&#39;css&#39;);
     register_frontend_modfiles(&#39;jquery&#39;);
     register_frontend_modfiles(&#39;js&#39;);
 }
 <script type="text/javascript" src="<?php echo WB_URL; ?>/your-script-folder/jquery.lazyloader.js"></script>
 <script type=”text/javascript” >
   $(document).ready( function()
   {
       $(’pre.i-am-lazy’).lazyLoad();
   });
 </script>
</head>
 
next: backend news-page > settings > Post Loop (replace with this):

Code: [Select]

<pre class="pre.i-am-lazy"><!--<tr class="post-top"><td class="post-title"><a href="[LINK]">[TITLE]</a></td>
<td class="post-date">[PUBLISHED_DATE], [PUBLISHED_TIME]</td>
</tr>
<tr>
<td class="post-short" colspan="2">[SHORT]<span style="visibility:[SHOW_READ_MORE];"><a href="[LINK]">[TEXT_READ_MORE]</a></span></td></tr>--></pre>
helpful?

dbs

[jtrein]

@dbs

Thanks, man!  I'll give that a try and post back the results.

I also wonder if @NorhHei was onto something with this quote earlier in the forum post:

Giving it a short thought , i think maybe its better to try with a modified version of Anynews. I should not be too hard to modify it so it displays only one news entry selected by a GET parameter.

Anynews is quite versatile, too.


Your support is second to none!

Kindest,

jtrein

[jtrein]

I may try jQuery Appear.  If you want to see a demo, sites such as IMDB.com use it for images at the bottom of an actor/actress landing page.

http://code.google.com/p/jquery-appear/

[dbs]

seems to be a good idea.
try this (don't forget to load the jquery.appear.js in the head):

Code: [Select]

<script type="text/javascript">
$('tr').appear(function() {
$(this).hide();
$(this).fadeIn(1000);
});
</script
or test the plugin appear with jQueryAdmin/LibraryAdmin.
it will work for all 'tr'.

[gelöscht durch Administrator]

[jtrein]

@dbs

Nice!  Good move, sir.

Check this out: http://someplacespecial5k.com/pages/news.php

I wonder what else we can come up with...endless possibilities.

[jtrein]

However, they're all loading into the DOM, but the effect is there.  I wonder if AJAX would work, setting the News listing to, say 5, for example.

See the Append content with AJAX: http://code.google.com/p/jquery-appear/wiki/Examples