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

Bloke · 2009-04-02 16:47:04

Glad it’s working now. I’d never have spotted that if it hadn’t been for you guys keeping me on my toes: thanks!

decoderltd wrote:

Interesting to hear that javascripts can go anywhere in a document

Well the jury’s still out a bit. Purists argue (probably rightly) that JS should actually always be a separate file for lots of good reasons.

But a hunk of js can occur anywhere you like, and with jQuery the distinction between where is ‘best’ for inline JS is blurred due to the fact you tend to tell jQuery to execute code when the DOM is ready (which is usually before the page is actually rendered as you see it). Thus it’s not that important where your code actually resides since the browser has to ‘get to the end’ of the page first to prepare the DOM.

At least that’s my understanding; it may be wrong, but I’ve not noticed any ill effects, aside from some occasionally idiotic IE6 behaviour with embedded (Flash) content.

as I have a dedicated full width div for the images is there a way of have them separate to the article?

Not quite sure I follow. You can put your smd_gallery tag anywhere you like. But of course if you want to use the article_image to hold the image IDs then you cannot put the smd_gallery tag anywhere ‘outside’ a <txp:article /> or <txp:article_custom /> tag.

If you have a fixed list of images you want to put at the top of, say, an article list page then you can certainly put an smd_gallery tag directly in a Page template. Either hard-code the IDs in the tag itself or store them in a variable. e.g. <txp:variable name="image_ids" value="24,18,37,4,19" /> and then <txp:smd_gallery id="?image_ids" ... />. Or use an image category to hold your pictures instead.

Last edited by Bloke (2009-04-02 16:49:30)

decoderltd · 2009-04-02 16:51:49

Thanks for the clarification Stef, I was indeed trying to put the image outside the <txp:article /> tag – will need to work on my layout!

Gallex · 2009-10-12 13:36:58

decided to try jquery in my testpage head . uploaded both js files, wrote

this between <head> tags

<script type="text/javascript" src="/textpattern/javascripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/textpattern/javascripts/jquery.cycle.lite.js"></script>
<script type="text/javascript">
$(function() { $('#head').cycle({ delay: 2000, speed: 500 });
</script>

and this to <body>

	<div id="head">
<txp:image id="57" /><txp:image id="56" /><txp:image id="55" />
	</div>

but it won’t work. could anybody tell me what’s wrong here?

decoderltd · 2009-10-12 14:33:46

Hi Gallex,

You could do something like this:

Create an image category called ‘header-images’ (or any other name) and assign this to the images you want to use, then add this:

<div id="head">
   <txp:smd_gallery wraptag="div" html_id="fade" class="pics" category="header-images" sublevel="all" sort="random" />
</div><!--ends #head-->

This code searches through any sub-categories and displays them in a random order. Of course, you’ll also need to install Stef’s fantastic little gallery plug-in (and don’t forget smd_lib while you’re there).

Hope that helps.

Last edited by decoderltd (2009-10-12 15:04:00)

uli · 2009-10-12 15:01:39

I’m no jQuery specialist, I just count. In $(function() { $('#head').cycle({ delay: 2000, speed: 500 }); you open 1 more curly bracket and 1 more parenthesis than you close.

Gallex · 2009-10-13 10:03:52

uli wrote:

I’m no jQuery specialist, I just count. In $(function() { $('#head').cycle({ delay: 2000, speed: 500 }); you open 1 more curly bracket and 1 more parenthesis than you close.

re-downloaded and re-uploaded js files, checked the file paths in total validator, played with different javascript code. below the solution i copied from here . still nothing…don’t get it…

<script type="text/javascript" src="http://www.muinasjutupidu.ee/textpattern/file_download/9/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://www.muinasjutupidu.ee/textpattern/file_download/8/jquery.cycle.lite.js"></script>
<script type="text/javascript">$(document).ready(function() {
    $('#head').cycle({ fx: 'fade', speed: 2500	});
});

decoderltd, but i see no reasons why it should not work with just 3 images – without gallery plugin, do you? like in this sample solution

colak · 2009-10-13 10:10:26

Gallex wrote:

<script type="text/javascript" src="http://www.muinasjutupidu.ee/textpattern/file_download/9/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://www.muinasjutupidu.ee/textpattern/file_download/8/jquery.cycle.lite.js"></script>
<script type="text/javascript">$(document).ready(function() {
    $('#head').cycle({ fx: 'fade', speed: 2500	});
});

Try

<script type="text/javascript" src="<txp:site_url />files/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<txp:site_url />files/jquery.cycle.lite.js"></script>
<script type="text/javascript">$(document).ready(function() {
    $('#head').cycle({ fx: 'fade', speed: 2500	});
});

Last edited by colak (2009-10-13 10:31:13)

uli · 2009-10-13 10:37:39

Gallex, your paths are clickable in FF’s source code, so they should be correct.

Edit: Deleted overhasty crap.

Last edited by uli (2009-10-13 10:45:19)

Gallex · 2009-10-13 10:56:58

colak wrote:

Try

<script type="text/javascript" src="<txp:site_url />files/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<txp:site_url />files/jquery.cycle.lite.js"></script>
<script type="text/javascript">$(document).ready(function() {
    $('#head').cycle({ fx: 'fade', speed: 2500	});
});

nope…

Gallex · 2009-10-13 11:21:44

tried with jquery-1.3.1.js and jquery-1.3.2.mini.js libraries and jquery.cycle.all.js plugin but nothing…

so, paths are correct, plugin and library files are correct, transition code is correct, images paths are correct – what left…? ;)

uli · 2009-10-13 11:25:53

Gallex, so simplex: close the script by adding </script> to the fx: 'fade', speed: 2500 part.

Gallex · 2009-10-13 11:47:34

uli wrote:

Gallex, so simplex: close the script by adding </script> to the fx: 'fade', speed: 2500 part.

good morning… :) thank’s again uli!
yessss!

Textpattern CMS

Textpattern CMS support forum

#37 2009-04-02 16:47:04

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

#38 2009-04-02 16:51:49

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

#39 2009-10-12 13:36:58

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

#40 2009-10-12 14:33:46

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

#41 2009-10-12 15:01:39

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

#42 2009-10-13 10:03:52

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

#43 2009-10-13 10:10:26

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

#44 2009-10-13 10:37:39

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

#45 2009-10-13 10:56:58

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

#46 2009-10-13 11:21:44

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

#47 2009-10-13 11:25:53

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

#48 2009-10-13 11:47:34

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

Board footer