Cycleshow

[danielschut]

Ha Schop,

Thanks, that sounds like a good idea. I have never used Bonus Fields before but now is as good a time as any.

@Harm: sound advice, too. Thanks!

[Alciono]

Hi guys,


At first I would like to complement you all for this new version of pivot. I used the old one a couple of years ago, but now I'm developing a couple of sites and discovered pivotX, everything I missed in the old version is in it now! (made also a small donation for your great work).

I setted up my new site Alciono.com (just the templates etc, not the text) and now I'm struggling with the cycleshow extension. The case is; when I just click the page http://alciono.com/?p=about, everything is okay in Firefox (on Mac). But when I 'shift reload' in FF or open the page in Safari for the first time ór reload it in Safari, the photo is placed for to much on the right site of the screen, also the slide effect is not working as normal.
I took a look at the sources of the wrong and right page, no difference. When I change the line "margin: auto;" to "margin: 0;" in the cycle css file, the photo is placed correctly, but the transistion is not working right. So I think it has something to do with loading the CSS, anyone has an idea?

Kind regards,

Corné

[Harm10]

Please specify what parms you are using (especially the values for container location and show within container).
You could also try to test with some smaller images because the calculations of the position is known to be wrong with some effects.
Try effect fade for example and see what happens.

[Alciono]

Hi Harm,


I used center for both. But it is working now, I did not fill the value for 'default container height', when I use 600 there it is perfect, also with the bigger images. Thanks for your help!

[Sanzine]

I would like to use the 'pager' function like in the below example:

http://jquery.malsup.com/cycle/pager3.html

or

http://jquery.malsup.com/cycle/pager2.html

How should I do this? I have already tried to add the pager code into the extra parameters box and the neccessary css into my stylesheet, but this doesn't seem to work. Below the code for the first example.

Code: Select all

    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
        // return selector string for existing anchor
        return '#nav li:eq(' + idx + ') a';
    }

Thanks in advance for your help!

[Harm10]

I guess you did put an id called "nav" in your page? Because you need to have all the right elements in the page.
What I normally do to try and get a published sample of Cycle to work is to create and include member and put everything in it (see the code below).
When I get that working I think of what parts I want to be in the general setup (you do not want all your cycles to be the same..... ).
I think your problem is the $ character. As PivotX uses the noconflict option after its own set-up you need the specify an $ as jQuery for it to work (or do some other special code but changing the $ is the simplest way).
When I do that for one of your samples it just works (nice sample btw).
The code becomes then:

Code: Select all

<style type="text/css">
#slideshow { left: 20px; float: left; margin: 20px }
#nav { width: 270px; margin: 15px; float: left }
#nav li { width: 50px; float: left; margin: 8px; list-style: none }
#nav a { width: 50px; padding: 3px; display: block; border: 1px solid #ccc; }
#nav li.activeSlide a { background: #88f }
#nav a:focus { outline: none; }
#nav img { border: none; display: block }
pre { clear: left }
</style>
<script type="text/javascript">
jQuery('#slideshow').cycle({
    fx:     'turnDown',
    speed:  'fast',
    timeout: 0,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
        // return selector string for existing anchor
        return '#nav li:eq(' + idx + ') a';
    }
});
</script>
<div id="demos">
<ul id="nav">
<li class="activeSlide"><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="50" height="50" /></a></li>
<li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="50" height="50" /></a></li>
<li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="50" height="50" /></a></li>
<li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="50" height="50" /></a></li>
<li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="50" height="50" /></a></li>
<li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="50" height="50" /></a></li>
<li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="50" height="50" /></a></li>
<li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="50" height="50" /></a></li>
</ul>
<div id="slideshow" class="pics" style="position: relative;">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 9; opacity: 1;" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 7;" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 6;" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5;" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 4;" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3;" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2;" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1;" />
</div>
</div>

And gets included in the page by

Code: Select all

[[ include file="`$templatedir`/... location of your file ..." ]]

Hope this helps!

[Sanzine]

Hello Harm,

Thanks for this. When using the codes you mentioned, it works perfectly. However, now I want to use the images that I have put in the gallery of the page. So instead of the 'hardcoded' images as in your example, I want to use something like:

Code: Select all

<div class="gallery [[ cycleshow ]]">
    [[ gallery popup="fancybox" ]]
    <a href="%imageurl%%filename%" title="%title%" rel="gallery-%uid%" class="fancybox">
    <img src="%pivotxurl%includes/timthumb.php?src=%filename%&amp;h=175&amp;zc=1"
    alt="%alttext%" /></a>[[ /gallery ]]
</div>

But what do I put in de #nav list? And what in the #slideshow? And actually there is also not really a need to use the fancybox.

Thanks!

[Harm10]

Translating the piece of working code into a tag driven piece is really not that hard.
First of all you have to understand the structure.
In my sample there are 4 code parts: style, script, ul list and img list.
The style part should be coded somewhere in a stylesheet.
The script part is the part that is there for cycleshow.
The ul and img list are the html parts where cycleshow acts upon.
So before cycleshow can work style, ul list and img list should be there.
As I do not use gallery but the far better bonusgallery implementation of extension bonusfields my sample will contain code for that.

So first of all you have to translate the working ul and img list into a tag driven construction by bonusgallery:

Code: Select all

<div id="demos2">
[[bonusgallery assign='gallerytest' content=$page.extrafields.galleryimagelist fancybox='1']]
<ul id="nav2">
[[foreach from=$gallerytest item='imagetest' name='ulbuilder' ]]
   [[ if $smarty.foreach.ulbuilder.first ]]<li class="activeSlide">[[ else ]]<li>[[ /if ]]
    <a href="#"><img src="[[$imagetest->getImgSrc('',50,'zc=3')]]" alt="[[$imagetest->alt|escape]]"
    title="[[$imagetest->title|escape]]" width="50" height="50"/></a></li>
[[/foreach]]
</ul>
<div id="slideshow2" class="pics" style="position: relative;">
[[foreach from=$gallerytest item='imagetest' name='imgbuilder' ]]
    <a href="[[$imagetest->src]]" class="fancybox" title="[[$imagetest->title|escape]]" rel="[[$imagetest->rel]]">
    <img src="[[$imagetest->getImgSrc('',175,'zc=3')]]" alt="[[$imagetest->alt|escape]]"
    title="[[$imagetest->title|escape]]" /></a>
[[/foreach]]
</div>
</div>

The bonusgallery tag gets the defined galleryimagelist and puts it into var gallerytest. The 2 foreach loops construct the ul list and the img list respectively.
If you add a hard coded cycleshow script then you again have a working sample:

Code: Select all

<script type="text/javascript">
jQuery('#slideshow2').cycle({
    fx:     'turnDown',
    speed:  'fast',
    timeout: 0,
    pager:  '#nav2',
    pagerAnchorBuilder: function(idx, slide) {
        // return selector string for existing anchor
        return '#nav2 li:eq(' + idx + ') a';
    }
});
</script>

If you want the cycleshow to produce a similar script then the code becomes:

Code: Select all

<div id="demos3">
[[bonusgallery assign='gallerytest' content=$page.extrafields.galleryimagelist fancybox='1']]
<ul id="nav3">
[[foreach from=$gallerytest item='imagetest' name='ulbuilder' ]]
   [[ if $smarty.foreach.ulbuilder.first ]]<li class="activeSlide">[[ else ]]<li>[[ /if ]]
    <a href="#"><img src="[[$imagetest->getImgSrc('',50,'zc=3')]]" alt="[[$imagetest->alt|escape]]"
    title="[[$imagetest->title|escape]]" width="50" height="50"/></a></li>
[[/foreach]]
</ul>
<div class="pics [[ cycleshow class='slideshow3' css='slideshow3css' slidefx='turnDown'
container_pos='left' speed=1000 timeout=0 width='240px' effect=0
extraparms='
    pager:  \'#nav3\',
    pagerAnchorBuilder: function(idx, slide) {
        // return selector string for existing anchor
        return \'#nav3 li:eq(\' + idx + \') a\';
    }
'
 ]]"
style="position: relative;">
[[foreach from=$gallerytest item='imagetest' name='imgbuilder' ]]
    <a href="[[$imagetest->src]]" class="fancybox" title="[[$imagetest->title|escape]]" rel="[[$imagetest->rel]]">
    <img src="[[$imagetest->getImgSrc('',175,'zc=3')]]" alt="[[$imagetest->alt|escape]]"
    title="[[$imagetest->title|escape]]" /></a>
[[/foreach]]
</div>
</div>

Notice the backslashes to escape the quotes in the extraparms. The only difference from the hard coded sample is that the cycleshow starts automatically because the extension wraps the code in a ready function. Personally I even like that more because the show starts and the pager accompanies that.

I hope you can understand my explanation. If not please do not hesitate to ask me more (but then perhaps use PM?).

[Sanzine]

Wow! This works brilliantly. Thanks so much for your help. I couldn't have figured this out myself eventhough you mentioned that it it really not that hard...

[Effevee]

Hey Harm,

I was wondering if I could use the same combination of a bonusfield gallery with the cycleshow extension in the header template of my site to rotate some banner images. I now have hard coded all images directly in the header template with html tags. Problem is that the bonusfield gallery can only be linked to an entry or a page, as I understand the documentation.

Is this at all possible ?

Thanks for your input.

Frank