Using jquery for fading in and out articles (like a flash banner)

joel · 2008-08-07 00:18:30

Hello!

I’m quite new to javascript and I would like to learn how to implement jquery into textpattern’s architecture.

Is it possible to use jquery for fading in and out articles? What I need is something similar to a “flashbanner” that shows a bunch of articles one by one (with a flashy transition in between of course). Clicking next/prev would also be nice.

All I’ve found so far is image slideshow plugins. :)

Thanks!

renobird · 2008-08-07 03:17:59

Joel,

If I understand you correctly you need a jQuery plugin that will allow you to view HTML content as a slideshow.
In this case the HTML will be article content output using Textpattern.

jquery.cycle will do this. Check out Intermediate Demos (Part 2).
You can specify a prev/next link or use the “pager” feature.

You don’t need to do anything special with Textpattern – just have it output the articles – jQuery will do the rest.

Hope that helps.

Last edited by renobird (2008-08-07 03:19:07)

joel · 2008-08-07 15:19:54

Thanks!

Worked like a charm! :)

renobird · 2008-08-07 15:27:29

Glad to help.

candyman · 2008-08-07 16:26:25

joel wrote:

Worked like a charm! :)

It would be nice it you could post a mini-tutorial showing how did you solved the problem: it would be useful!
BTW can you give us a link, at least? Thanks.

Last edited by candyman (2008-08-07 16:26:42)

renobird · 2008-08-07 17:39:37

Candyman,

Here’s a quick rundown on how you do it.

In the <head>

<script src="/includes/jquery-1.2.6.js" type="text/javascript"></script>
<script src="/includes/jquery.cycle.js" type="text/javascript"></script>

@<script type=“text/javascript”>
$(document).ready(
function(){

$(“.slideshow”).after(‘<div id=“slideshownav”>’).cycle({
fx: ‘fade’,
timeout: 6000,
speed: 500,
pager: ‘#slideshownav’
});
});
</script>@

In the <body>

<div class="slideshow">

<txp:article form="article-features" limit="5" />

</div>

Article Features Form

- Optionally you could use rss_auto_excerpt

Of course you can customize all the jquery.cycle plugin attributes.
This example uses the “pager” feature that adds a div for the navigation after the slideshow div.

—
T

Last edited by renobird (2008-08-07 17:48:47)

joel · 2008-08-07 17:40:37

candyman wrote:

It would be nice it you could post a mini-tutorial showing how did you solved the problem: it would be useful!
BTW can you give us a link, at least? Thanks.

No problem!
I will do that when the site is online! :)

Last edited by joel (2008-08-07 17:41:14)

renobird · 2008-08-07 17:44:45

Oops.

~~Forgot to show you the “article-features” form.~~

Added above.

—
T

Last edited by renobird (2008-08-07 17:49:18)

candyman · 2008-08-07 17:53:34

Thank you very much renobird! I was looking for detailed infos like you posted!

I would be nice to use a pagination effect like scrollRight (click) to make rolling, for example, the latest 10 articles posted in a blog: in a way like the turning of the pages of a newspaper. I’ll give a try: in the menatime I’ll wait for joel’s solutions.

Very interesting thread.

joel · 2008-08-09 07:56:21

Here is my contribution

I simply used sticky articles for the cycle and regular articles for the news below.

in the Head

<script type="text/javascript" src="http://sundsvallsidrottsmassa.se/js/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="http://sundsvallsidrottsmassa.se/js/jquery.cycle.all.min.js"></script> <script type="text/javascript">
$(function() {

$('#s1').cycle({ 
    fx:   'fade',
    speed:	700,
    timeout:	6000, 
    delay: 1000,
    cleartype:1,
    cleartypeNoBg:1,
    prev: '#prev2', 
    next: '#next2'

});
});

</script>

In your page template

<txp:if_article_list> <div id="splash"> <div id="s1"> <div> <img src="<txp:site_url />gfx/splash.jpg" width="880" height="360" style="margin:-50px -30px -20px -20px; border:none; position:absolute;" /> </div> <txp:article status="sticky" listform="sticky" sort="Posted asc" /> </div> </div> <div id="slidenav"> <a href="#" id="prev2" title="föregående">Föregående</a> <a href="#" id="next2" title="nästa">Nästa</a> </div> <br class="clear" /> </txp:if_article_list>

In your article form “sticky”

<div> <h2><txp:title /></h2> <txp:if_excerpt> <txp:excerpt /> <p><a href="<txp:permlink />" title="Permanentlänk till hela nyheten" class="knapp-liten"><span>Läs mer</span></a></p> <br class="clear" /> <txp:else /> <txp:body /> </txp:if_excerpt> </div>

And some additional css styling of course.

Thanks renobird for all the help! :)

Last edited by joel (2008-08-09 08:00:28)

candyman · 2008-08-09 12:35:38

Is there a limit for the number of sticky articles? Can’t I do with regulars articles? I mean putting the latest five articles as random cycle?

joel · 2008-08-09 17:23:31

Of course you can use “status live”. The reason why I use Live and sticky is that I want two kinds of content on this page without using categories.

I think there is no limit for sticky articles.

Textpattern CMS

Textpattern CMS support forum

#1 2008-08-07 00:18:30

Using jquery for fading in and out articles (like a flash banner)

#2 2008-08-07 03:17:59

Re: Using jquery for fading in and out articles (like a flash banner)

#3 2008-08-07 15:19:54

Re: Using jquery for fading in and out articles (like a flash banner)

#4 2008-08-07 15:27:29

Re: Using jquery for fading in and out articles (like a flash banner)

#5 2008-08-07 16:26:25

Re: Using jquery for fading in and out articles (like a flash banner)

#6 2008-08-07 17:39:37

Re: Using jquery for fading in and out articles (like a flash banner)

#7 2008-08-07 17:40:37

Re: Using jquery for fading in and out articles (like a flash banner)

#8 2008-08-07 17:44:45

Re: Using jquery for fading in and out articles (like a flash banner)

#9 2008-08-07 17:53:34

Re: Using jquery for fading in and out articles (like a flash banner)

#10 2008-08-09 07:56:21

Re: Using jquery for fading in and out articles (like a flash banner)

#11 2008-08-09 12:35:38

Re: Using jquery for fading in and out articles (like a flash banner)

#12 2008-08-09 17:23:31

Re: Using jquery for fading in and out articles (like a flash banner)

Board footer