Features / Usability

Update: I just noticed that jquery cycle is already in Tiki 3. See the Look & Feel admin page. Under the UI Effects tab is the JQuery Cycle (slideshow) checkbox. I haven't tried it. So just the wikitext and css things would have to be done.

Older: I don't know of examples, but looking at the page source for http://malsup.com/jquery/cycle/basic.html, seems like all you need to do is add the Cycle plugin javascript to the page's head section, and put your images in a div (using the DIV plugin in a wiki page, for example) with the class "slideshow". There's no admin method to include custom javascript in html head yet, so you'd have to edit templates/header.tpl. The javascript itself in header.tpl needs to go inside {literal}{/literal} tags. The CSS could be a custom.css file in the styles directory of the theme you're using or in the css/ directory (I'm not sure of this second way works, but I think so).

-- Gary

Hi

Thanks for the reply. Yes I looked in the header.tpl and the jquery classes are loaded if Jquery is enabled in the preferences. It is not obvious how it works however. The example comes with some extra JavaScript , a style for the .slideshow and DIV area that uses this style.
I've tried to add these to w tikiwik page with combinations of the pluging HTML, DIV and JQ but without success. All I see is the images loaded one below the other.

I think you need to add the extra javascript to the html head section, so that'd be in header.tpl.

-- Gary

Just an update on this: The jquery cycle slideshow will work, as suggested above. I did a little test to find out. I had to edit templates/header.tpl to add the few lines of CSS and javascript that are indicated in the Cycle demos (the Javascript is placed in literal tags). But there's no need to link to the jquery or cycle .js files; they're already loaded. The wiki page has, simply, a div plugin with the slideshow class, and the images.

(I'm hoping/expecting a coming release of Tiki to have a textarea on the Look and Feel admin page for adding html head lines, so no template editing will be needed. UPDATE: I committed the code for this, so it should be available in Tiki 4, scheduled for October.)

-- Gary

Hi Gary

I added the following to the end of header.tpl

.slideshow { height: 232px; width: 232px; }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }



{literal}
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
});
{/literal}



{* END of html head content *}

The literal tags are within the script tags of the javascript (I cant get them visible here) and there are style tags around .slideshow

and added the beach images from the example. I get one image displayed one after the other. Ive tried some variations with the literal tag but without success. Can you paste in here your code?

Cheers

I replaced angle brackets and curly braces with parentheses here so they'd show. Note that the literal tags are on the outside of the script tags. This is a straight copy/paste from the simplest Cycle demo, though I changed the transition type (a bunch of times 😉 ).

(style type="text/css")
.slideshow { height: 232px; width: 232px; }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
(/style)
(literal)
(script type="text/javascript")
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'scrollLeft' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
});
(/script)
(/literal)

-- Gary

I have exactly that but dont get the expected results
I have JQuery enabled in the features and the Plugin

What else could be missing?

I'm not sure what you mean by plugin. The only plugin needed is DIV, which has a parameter class="slideshow", and contains the images.

-- Gary

I made some progress. In header.tpl I needed the literal tags around the curly braces after .slideshow

If I view the source of the page I see the code as it should be and just before the end head tag

Now I get each of the beach photos in the expected picture frame but one below the other

Gary which version of tikiwiki are you running? I have 3.1

My first test was with the trunk development version, which I have installed on my laptop. But then I checked with 3.1 at http://zukakakina.com/jquery_cycle. To clarify, I used exactly what's in the head section shown in the page source at http://jquery.malsup.com/cycle/basic.html (the CSS style tags and content and the Javascript lines) except for adding the {literal}{/literal} tags. (No need to include the links to jquery.min.js or jquery.cycle.all.js - those are already loaded if jquery and jquery cycle are turned on in the admin pages.) One change from my previous posts, I realized the CSS style lines also need to go inside the literal tags for the CSS to be recognized.

-- Gary

Me too, I have copied and pasted and the code looks good when I read the source of the tikiwiki web page. The images show up respecting the CSS style but one below the other. The javascript isnt kicking in.

On http://zukakakina.com/jquery_cycle I see three images one below the other with some grey text in tehe middle of the page. I though it could be a browser issue but I get the same results on firefox and IE.

I can get this thing to work in a standalone HTML page but not withing tikwiki

I've been using Opera while doing this, and the slideshow has been working correctly in that browser. But after reading your last post, I checked in Firefox and see the problem with the images you describe.

I also checked the original demo in Firefox and found (using the Firebug add-on) that there the div class="slideshow" has a position:relative, and each image has a position:absolute property, so I added these to the CSS in header.tpl. Now it works correctly in Firefox too. The position properties are actually specified in jquery.cycle.all.js, and should be picked up for the Tikiwiki pages as they are in the demo; I noticed the version at the demo site is slightly newer, but don't suppose that's the reason for the problem. Anyway, adding the CSS manually corrects the image position problem. I'll check around to see about getting the newer version in Tikiwiki anyway, and will see if our resident jquery guy, Jonny Bradley, has an idea about the position properties not showing up in the wiki page slideshow.

-- Gary

Nearly, I now have in the header.tpl

.slideshow {literal} { position:relative; height: 232px; width: 232px; } {/literal}
.slideshow img {literal} { position:absolute; padding: 15px; border: 1px solid #ccc; background-color: #eee; } {/literal}

The outcome is the images stacked closely together like a pack of cards.

Update:

Hi Gary, I copied exactly what you have in the source of http://zukakakina.com/jquery_cycle but I still dont get the expected results.

A pair of literal tags needs to surround all of the new lines, not appear within lines. I attached my modified header.tpl to this message.

-- Gary

Hi Gary. I now have exactly the same header.tpl as you and still no joy 😑

Did you get any news from John Bradley?

He's super-busy so I didn't message him yet. But I didn't feel the urgency since Cycle is working at my site with the jquery version that is in TikiWiki now.

If you have exactly the same header, and your wiki page content is exactly the same (in terms of how the div plugins are used), and your admin configuration is the same (jquery and jquery cycle both turned on), then I don't know what else could be the problem.

Can you give the URL for your site?

-- Gary