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

decoderltd · 2009-04-02 15:32:15

Hi Stef,

Thank you for the info. I’ve dropped it into place but still no joy on images or pager tabs appearing (I also have a div conflict as you’ll see, but I’ll fix that up later!). Any suggestions?

Bloke · 2009-04-02 15:37:51

decoderltd wrote:

still no joy

Hmmm, it’s writing the javascript but no images which implies it can’t find the image IDs in the article_image field. Is your site in debugging mode? If not, try refreshing the page with it on. See if you get any spurious errors like this (fix).

Also, try adding debug="2" to your smd_gallery tag so we can see what it thinks it should be generating.

If this is the problem, I’m going to have to work around this in some way be checking the PCRE version.

decoderltd · 2009-04-02 15:47:48

Hi Stef,

Added debug and got:

++ INCLUDED/EXCLUDED IDs AND CATs ++
array (
0 => '\'?article_image\'',
)
++ WHERE CLAUSE ++
(1=1 AND  (txp_image.id IN ('?article_image')) ) ORDER BY txp_image.id asc

			SELECT DISTINCT txp_image.name,txp_image.id,txp_image.alt,txp_image.caption,txp_image.category,txp_image.author,txp_image.date,txp_image.ext,txp_image.w,txp_image.h,txp_image.thumbnail, txp_category.title AS category_title
			FROM txp_image LEFT JOIN txp_category
			ON txp_image.category = txp_category.name
			WHERE (1=1 AND  (txp_image.id IN ('?article_image')) ) ORDER BY txp_image.id asc
			LIMIT 0, 99999

++ COMBOs ++
array (
)

Last edited by decoderltd (2009-04-02 15:51:14)

Bloke · 2009-04-02 15:54:43

decoderltd wrote:

array (0 => ‘\’?article_image\’‘,)

Dammit! Same problem as everyone else this week. A fix to smd_lib will be arriving in a few minutes. Here is some soothing hold music…

Bloke · 2009-04-02 16:11:18

Done.

decoderltd · 2009-04-02 16:22:35

Thanks Stef, works a treat now. Interesting to hear that javascripts can go anywhere in a document, that makes life a lot easier since I’ve implemented ‘Textpattern Solutions’ approach to header/meta information being static and dynamic forms and I didn’t want to load unnecessary scripts.

PS One final question, and then I’ll disappear – as I have a dedicated full width div for the images is there a way of have them separate to the article?

<!--////////////full width feature panel////////////-->

        #FEATURE_PANEL (slideshow of article images)

<!--////////////////////content////////////////////-->

         #CONTENT (article)
         #SIDEBAR (article listing)

Last edited by decoderltd (2009-04-02 16:34:02)

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…

Textpattern CMS

Textpattern CMS support forum

#31 2009-04-02 15:32:15

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

#32 2009-04-02 15:37:51

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

#33 2009-04-02 15:47:48

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

#34 2009-04-02 15:54:43

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

#35 2009-04-02 16:11:18

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

#36 2009-04-02 16:22:35

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

#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)

Board footer