MOVED: Infinite Scroll JS & News Module

[dbs]

now i have seen it.
don't know if the right script for news, but a good script for an item-slider for bakery or other sliders.
(at the moment i use jcarousel-lite as item-slider).

i miss a pause-effect for mouseover and possibility of using mousewheel.

i'm wating for your results.

[Bug]

I am working on a Caroufredsel implementation to scroll news, pics etc

Anyone seen that script?

http://caroufredsel.frebsite.nl

[dbs]

i'm also some unhappy with the status quo, but my jquery-know-how is only basic.

with your 2nd link maybe somebody can give us hints for a solution.

[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

[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.

[dbs]

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

Code Select Expand

<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]

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/

[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

[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 Expand

<?php 
 if(function_exists('register_frontend_modfiles')) {
     register_frontend_modfiles('css');
     register_frontend_modfiles('jquery');
     register_frontend_modfiles('js');
 }
 <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 Expand

<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

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

[jtrein]

@dbs

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

jtrein

[dbs]

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

[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]

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.js):
http://ivorycity.com/blog/2011/04/19/jquery-lazy-loader-load-html-and-images-on-scroll/

you add this call:

Code Select Expand

<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 Expand

<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 Expand

<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

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 Expand


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


Kindest,

J. Trein

[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 Expand

<?php 
if(function_exists('register_frontend_modfiles')) {
    register_frontend_modfiles('css');
    register_frontend_modfiles('jquery');
    register_frontend_modfiles('js');
} 

[jtrein]

@dbs

i have made a plugin for jqueryadmin/libraryadmin.
you know what it is or use you the register_frontend_modfiles-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]

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

[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 hope for you norhei or anybody find a solution.
my way is working, but a nice fadin-effect is missing.

[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

[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

[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 ? 

[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

[jtrein]

Good catch and thank you  

News content_short would be best, I think.

Any help is much appreciated!