Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: Using jquery for fading in and out articles (like a flash banner)
hi, i’m trying this plugin out but not having much luck. first i tried it in txp and now i’m just doing basic html so i can figure out what i’m doing wrong. i just get three images stacked on top of each other vertically with grey borders.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Cycle Demo</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#s1').cycle('fade');
});
</script>
</head>
<body>
<div class="pics">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
</div>
</body>
</html>.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}Offline
Re: Using jquery for fading in and out articles (like a flash banner)
Elliot, this bit still refers to the div with id="s1" which you don’t have in your code so it doesn’t find it:
$(document).ready(function() {
$('#s1').cycle('fade');
}); Either change $('#s1') to read $('.pics') or set your div to be s1, e.g. <div id="s1">.
TXP Builders – finely-crafted code, design and txp
Offline
Re: Using jquery for fading in and out articles (like a flash banner)
jakob wrote:
Elliot, this bit still refers to the div with
id="s1"which you don’t have in your code so it doesn’t find it:
bc.. $(document).ready(function() { $(‘#s1’).cycle(‘fade’);
});
p. Either change$('#s1')to read$('.pics')or set your div to be s1, e.g.<div id="s1">.
ok that worked, thanks. now if i move on to beginner demo two on the cycle page, it breaks!
<script type="text/javascript">
$(document).ready(function() {
$('.pics').cycle({
fx: 'scrollDown'
});
</script>Last edited by mrtunes (2008-11-19 22:48:17)
Offline
Re: Using jquery for fading in and out articles (like a flash banner)
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 pluginOffline
Re: Using jquery for fading in and out articles (like a flash banner)
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
Offline
Re: Using jquery for fading in and out articles (like a flash banner)
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 />Offline
Re: Using jquery for fading in and out articles (like a flash banner)
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.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: Using jquery for fading in and out articles (like a flash banner)
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.
Offline
Re: Using jquery for fading in and out articles (like a flash banner)
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
Offline
Re: Using jquery for fading in and out articles (like a flash banner)
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.
:)
Offline
Re: Using jquery for fading in and out articles (like a flash banner)
yeah i also posted my initial jquery cycle question on stackoverflow.com which got answered very fast.
Offline
Re: Using jquery for fading in and out articles (like a flash banner)
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.
Offline