Mootools slideshow using "aro_slideshow", "smd_gallery" totally lost??

tbJohnson · 2010-01-14 18:34:10

So I played with this for days, and I finally got a slideshow working, but I have to do it totally manually, I can’t use aro or smd, let me show what I did. I am using this slideshow

i my header I have.

<link rel="stylesheet" href="<txp:link_to_home />styles/slideshow.css" type="text/css" media="screen" /> <script src="<txp:site_url />js/mootools.js" type="text/javascript"></script> <script src="<txp:site_url />js/slideshow.js" type="text/javascript"></script>

then I have this as my gallery, still in the header.

<script type="text/javascript"> //<![CDATA[ window.addEvent('domready', function(){ var data = { '128.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' }, '162.jpg': { caption: 'A Ceibu tree.' }, '167.jpg': { caption: 'The view from Volcano Maderas.' }, '215.jpg': { caption: 'Beer and ice cream.' } }; var myShow = new Slideshow('show', data, { captions: true, delay: 15000, controller: true, height: 450, hu: 'images/', width: 800 }); }); //]]> </script>

This is where my images are used in the slideshow, of course, then in my body, I have this.

<div id="show" class="slideshow"> <img src="http://www.xxxxxxx.com/images/128.jpg" alt="" /> </div>

So it works, yeah!! I figured out enough of the JS to make a slideshow, BUT BUT BUT it has nothing to do with textpattern, and it is not automated by aro_slideshow or smd_gallery in any way.

I figured enough out that both aro_slideshow or smd_gallery

paste groups of images with javascript and some just pasts list of images, what I need is a way to have either of those plugins paste into my javascript in the header.

so my code to replace is

var data = { '128.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' }, '162.jpg': { caption: 'A Ceibu tree.' }, '167.jpg': { caption: 'The view from Volcano Maderas.' }, '215.jpg': { caption: 'Beer and ice cream.' } };

How can I use aro_slideshow or smd_gallery to paste my sections of images into that var data section?

I had the hardest time to even get this far, so I hope I don’t have to change how I have the javascipt setup, etc.. Any help out there?

MattD · 2010-01-14 19:12:56

tbJohnson wrote:

var data = { ‘128.jpg’: { caption: ‘Volcano Asención in Ometepe, Nicaragua.’ }, ‘162.jpg’: { caption: ‘A Ceibu tree.’ }, ‘167.jpg’: { caption: ‘The view from Volcano Maderas.’ }, ‘215.jpg’: { caption: ‘Beer and ice cream.’ } };

Using smd_gallery (and smd_if) :

var data = <txp:smd_gallery>{ '{name}': { caption: '{caption}' }<txp:smd_if field="{counter}" operator="eq" value="{totalimages}">};<txp:else/>,</txp:smd_if></txp:smd_gallery>

tbJohnson · 2010-01-14 19:31:28

Getting so close, there is an extra { in there somewhere, trying to figure that out..

tbJohnson · 2010-01-14 19:46:35

Hey Mattd, figured it out. This worked for me.

var data ={ <txp:smd_gallery> '{name}': { caption: '{caption}' }<txp:smd_if field="{counter}" operator="eq" value="{totalimages}">};<txp:else/>,</txp:smd_if></txp:smd_gallery>

Put the { in front of the <txp:smd_gallery>

Also, I have one more question, I am trying to figure this out, but if my image is named “charile.jpg”, text pattern names is “129.jpg” so it is only linked via /images/129.jpg

How can I either change the way <txp:smd_gallery> addresses the images or the way textpattern names them?

Thanks.

MattD · 2010-01-14 21:15:54

You can’t easily change how Textpattern handles images.

If the filename is what you need then you could use {imagedef} instead of {name}.

I’m not familiar with the slideshow you’re using so not what you need. If you need the entire url there’s {url} or the thumbnail {thumburl}.

Last edited by MattD (2010-01-14 21:16:28)

tbJohnson · 2010-01-14 21:59:05

Hey Matt, I did this and it seems to work.

var data = {<txp:smd_gallery category="homepage-slidehow"> '{id}.jpg': { caption: '{caption}' }<txp:smd_if field="{counter}" operator="eq" value="{totalimages}">};<txp:else/>,</txp:smd_if></txp:smd_gallery>

So for my images it goes

'{id}.jpg'

So id is dynamic and I put the .jpg behind it, this way it used the IMG id name as the image its looking for.

It might be kinda a hack, but its seems good enough for me at this level. I am still playing with having other sorting orders as well, since it sorts right now from low to high image id.

tbJohnson · 2010-01-14 22:00:59

sorry matt, your right, {imagedef} is the way to go. My way is silly.

MattD · 2010-01-14 22:37:33

tbJohnson wrote:

sorry matt, your right, {imagedef} is the way to go. My way is silly.

No worries, I thought about using {id}{ext} before I saw imagedef was there.

Textpattern CMS

Textpattern CMS support forum

#1 2010-01-14 18:34:10

Mootools slideshow using "aro_slideshow", "smd_gallery" totally lost??

#2 2010-01-14 19:12:56

Re: Mootools slideshow using "aro_slideshow", "smd_gallery" totally lost??

#3 2010-01-14 19:31:28

Re: Mootools slideshow using "aro_slideshow", "smd_gallery" totally lost??

#4 2010-01-14 19:46:35

Re: Mootools slideshow using "aro_slideshow", "smd_gallery" totally lost??

#5 2010-01-14 21:15:54

Re: Mootools slideshow using "aro_slideshow", "smd_gallery" totally lost??

#6 2010-01-14 21:59:05

Re: Mootools slideshow using "aro_slideshow", "smd_gallery" totally lost??

#7 2010-01-14 22:00:59

Re: Mootools slideshow using "aro_slideshow", "smd_gallery" totally lost??

#8 2010-01-14 22:37:33

Re: Mootools slideshow using "aro_slideshow", "smd_gallery" totally lost??

Board footer