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

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.

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)

Textpattern CMS

Textpattern CMS support forum

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

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

Board footer