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

mrtunes · 2008-11-20 23:20:37

ok sorry to bump back in here, but i got all my jquery stuff worked out.

i’m wondering though, if my article and article form have say image and text, once it gets piped into the Cycle what happens is the image takes up a different slide. but the two are supposed to co-exist into one slide. does anyone know how to make them into one? i’m assuming this problem happens by default when you use this plugin

renobird · 2008-11-20 23:38:59

What’s getting cycled is whatever is inside of the <div> .pics

If they are supposed to co-exist – then wrap them in a container <div> and cycle that.

Post your form and I’ll see if I can help.

—
Tom

mrtunes · 2008-11-21 00:42:55

hey, i changed my div class to .text
my apologies ahead of time, this script looks great but there’s not much documentation on it, and i have a long way to go in learning javascript. thanks

<script type="text/javascript">
$(document).ready(function() {
$('.text') 
.before('<div id="slidenav">') 
.cycle({ 
    fx:     'fade', 
    speed:  'slow', 
    timeout: 6000, 
    pager:  '#slidenav',
   pause: 1 
});
});            
</script>

scrolling down

<div id="featured">
 <div class="text">   
<txp:article_custom form="slidetext" section="slide" limit="5" />
</div> 
</div>

slidetext form:

<txp:article_image thumbnail="1" /> 
<txp:body />

Bloke · 2008-11-21 01:20:47

mrtunes wrote:

does anyone know how to make them into one?

I’m not sure I’ve got the right end of the stick here, but note at the bottom of the options page the slideExpr attribute. I had a <div> that contained a whole load of <img> tags, each followed by a <span> (containing the caption). The cycle plugin cycled <img> <span> <img> <span>... which was not what I wanted.

By setting slideExpr: 'img' it filtered the results so only the images were cycled. Not sure if it helps, but combined with some other tricks on this page, it might.

renobird · 2008-11-21 01:29:14

Hi Elliot,

I think you need to change your slidetext form to:

<div>
<txp:article_image thumbnail="1" />
<txp:body />
</div>

The plugin cycles the elements inside the container <div> – in this case .text.
So you need to “group” the image and the body by wrapping them in a container <div>.
That way they get treated as one element and will get cycled together.

mrtunes · 2008-11-21 01:34:04

thanks tom, that fixed it. but where did you find that info out?

bloke, sorry that’s probably a bit more complicated than tom’s suggestion.

jFlow was a bit easier to figure out on the surface, but didn’t have any of the features that Cycle does. if anyone is looking for something that just tabs content, you can look into jFlow 1.2

renobird · 2008-11-21 01:45:17

Hey Elliot,

The info is on the site – it’s just not spelled out all that clearly.

I’ve been using it for quite a while now – so I’ve learned a lot through trial-and-error.

Also, the #jquery channel on IRC is pretty helpful

Glad you got it working.

:)

mrtunes · 2008-11-21 01:50:03

yeah i also posted my initial jquery cycle question on stackoverflow.com which got answered very fast.

mrtunes · 2009-02-27 02:13:17

if i want to just throw images from a specific image category into this cycle plugin, do i have to use smd_gallery? i dont want to use any articles.

decoderltd · 2009-04-02 10:35:23

Hi everyone,

For a new website I’ve decided to delve into using Javascript to create a transition of images. I’ll be using cycle.js and smd_gallery to make everything work, but having read through the various posts and documents and not having worked with JS before, I’ve run into a problem – or two!

I have a section called ‘Garden Projects’ which are portfolio type articles which use the ‘Article Image’ field to store the relevant images. These fullsize images are then displayed as a slideshow together with numbered tabs (so they can be manually navigated) when an article is opened. I’ve been trying to work my way through the example form without much luck -

<div class="slideshow" id="slideshow1">
<img src="<txp:site_url />images/{id#1}.jpg"
alt="{alt#1}" width="{width#1}" height="{height#1}" />
</div>

<script type="text/javascript">
myShow1 = new Slideshow("slideshow1",
{ hu: "<txp:site_url />images/",
images: [{imglist}],
captions: [{alt}],
classes: ["prev","next","active"],
type: "fade"
});
</script>

The images will appear in #slideshow and need to pulled from the article currently on display. My javascript in the header is –
<script type="text/javascript"> $(document).ready( function(){ $(".slideshow").after('<div id="slideshownav">').cycle({ fx: 'fade', timeout: 6000, speed: 500, pager: '#slideshownav' }); }); </script>

In addition, on the home page I want to run a slideshow (without the ‘pager’ tabs) that randomly pulls those fullsize project images and displays them. This I’ve managed in a fashion using the following code –

<div class="slideshow">
<txp:smd_gallery category="garden-projects" sublevel="all" />
</div>

I’d really appreciate it if anyone can help and point me in the right direction. Thanks.

Last edited by decoderltd (2009-04-02 10:42:33)

Bloke · 2009-04-02 13:14:31

decoderltd wrote:

I’ll be using cycle.js and smd_gallery to make everything work

Cool, should be no problem with that combination. But the examples in the help are for Aeron’s slideshow2 plugin and not jQuery cycle so that may explain why the thing isn’t working! If you want to use slideshow, have a look on the smd_gallery thread at mlarino’s implementation, and also search for posts in the same thread by progre55; he’s done that sort of thing before and is out resident expert on all things slideshow & smd_galleryish.

For jQuery cycle, things are much simpler.

<h2>Fade gallery</h2>
<txp:smd_gallery id="?article_image" wraptag="div" html_id="fade" class="pics">
   <txp:image id="{id}" />
</txp:smd_gallery>

And somewhere in your <head> section (or anywhere else if you don’t care about the sucked-in breaths from the “your javascript must go in the head” crowd) :

<script type="text/javascript">
jQuery(function() { 
   jQuery('#fade').cycle();
});
</script>

Game over. Salt with options to taste.

EDIT: code typo, d’oh!

Last edited by Bloke (2009-04-02 14:20:57)

decoderltd · 2009-04-02 14:12:41

Hi Stef,

Many thanks for your continued support. I’ve had a look at posts you suggested and truth be told I’m a little lost and would really appreciate a little extra guidance – this is where I’m at…

slideshow_project form:
<div id="feature_panel" class="slideshow">
<txp:smd_gallery id="?article-image" wraptag="div" html_id="fade" class="pics">
<txp:image id="{id}" />
</txp:smd_gallery>
</div>

<script type="text/javascript">
jQuery(function() {
jQuery('#fade').cycle();
});
</script>

Article form:
<txp:smd_gallery
id="?article_image" form="slideshow_project"
collate="quote:{imagedef}:{alt}" />

<h2><txp:title /></h2>
<h6>Posted on: <txp:posted /></h6 >
<br />
<txp:body />

…but it doesn’t seem to be pulling in any images. If it makes it any easier here’s the projects page in question. It should pull in the relevant images as a slideshow together with navigation tabs, much like the home page

Bloke · 2009-04-02 14:20:34

decoderltd wrote:

it doesn’t seem to be pulling in any images.

*cough* my bad. It’s ?article_image not ?article-image (post corrected above)

Just to get this clear in my head, which method are you trying to use where? Do you want to use jQuery cycle or Slideshow2 on the garden-projects pages? At the moment you’re mixing and matching the two, it seems. The smd_gallery tag for Slideshow2 is significantly more complicated than the one for Cycle so you need to choose a method and we’ll focus on that first.

Last edited by Bloke (2009-04-02 14:21:55)

decoderltd · 2009-04-02 14:52:36

Hi Stef,

Thanks for your reply. I had hoped to use Cycle as it’s simple, offers a variety of effects and uses jQuery.

Bloke · 2009-04-02 15:06:29

decoderltd wrote:

I had hoped to use Cycle

Good call! In which case, in your article form for the slideshow-project section you just need:

<div id="feature_panel" class="slideshow">
<txp:smd_gallery id="?article_image" wraptag="div" html_id="fade" class="pics">
   <txp:image id="{id}" />
</txp:smd_gallery>
</div>

Since you’re using smd_gallery as a container you don’t need any more forms. Thus, that creates your list of images in the same way they do in the HTML source code on the cycle demo page.

To start the effect rolling, you just need this somewhere on the page:

<script type="text/javascript">
jQuery(function() {
   jQuery('#fade').cycle();
});
</script>

And that’s it. Stick a comma-separated list of image IDs in your article image field and it’ll run.

Textpattern CMS

Textpattern CMS support forum

#16 2008-11-20 23:20:37

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

#17 2008-11-20 23:38:59

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

#18 2008-11-21 00:42:55

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

#19 2008-11-21 01:20:47

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

#20 2008-11-21 01:29:14

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

#21 2008-11-21 01:34:04

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

#22 2008-11-21 01:45:17

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

#23 2008-11-21 01:50:03

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

#24 2009-02-27 02:13:17

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

#25 2009-04-02 10:35:23

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

#26 2009-04-02 13:14:31

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

#27 2009-04-02 14:12:41

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

#28 2009-04-02 14:20:34

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

#29 2009-04-02 14:52:36

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

#30 2009-04-02 15:06:29

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

Board footer