smd_gallery: super-flexible gallery generator

Bloke · 2011-04-19 21:08:25

progre55

How about something like this:

imagearray: [[
<txp:smd_gallery category="some_cat" collate="1" collatedelim="],[">{url}</txp:smd_gallery>
]],

progre55 · 2011-04-19 21:20:41

Bloke:

Unfortunately, that pulls nothing.

Here is the whole section:

<script type="text/javascript">

var mygallery=new simpleGallery({
	wrapperid: "simplegallery1", //ID of main gallery container,
	dimensions: [1000, 294], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
		["http://www.xxxx.com/images/19.jpg"],
		["http://www.xxxx.com/images/25.jpg"],
		["http://www.xxxx.com/images/17.jpg"],
		["http://www.xxxx.com/images/18.jpg"]
	],

	autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	oninit:function(){ //event that fires when gallery has initialized/ ready to run
		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
	},
	onslide:function(curslide, i){ //event that fires after each slide is shown
		//Keyword "this": references current gallery instance
		//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
		//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
	}
})

Last edited by progre55 (2011-04-19 21:22:18)

progre55 · 2011-04-19 21:27:47

My bad:

I looked into the source and found what you provided returned the following code. But a blank space on the actual page.

imagearray: [[
http://www.xxxx.com/images/19.jpg],[http://www.xxxx.com/images/18.jpg],
[http://www.xxxx.com/images/17.jpg],[http://www.xxxx.com/images/15.jpg],
[http://www.xxxx.com/images/16.jpg],[http://www.xxxx.com/images/20.jpg],
[http://www.xxxx.com/images/23.jpg],[http://www.xxxx.com/images/22.jpg],
[http://www.xxxx.com/images/24.jpg],[http://www.xxxx.com/images/25.jpg
]],

As I look closer, what I believe it is missing is the quotes around the image path.

Last edited by progre55 (2011-04-19 21:32:05)

progre55 · 2011-04-19 22:07:25

Bloke:

I have tried to wedge the quotes in every possible place with no luck. I even tried to modify the code per your help file with no luck — hope this is as simple and I am overlooking and obvious and easy solution.

progre55

Bloke · 2011-04-20 07:47:42

progre55 wrote:

I have tried to wedge the quotes in every possible place with no luck.

Without looking at the docs for the gallery plugin you’re using I don’t know why it would need quotes, but if you want to quote every variable, does the smd_gallery attribute collate="quote:{url}" work?

progre55 · 2011-04-20 12:18:48

Bloke:

THANK YOU. When you use this:

imagearray: [[
<txp:smd_gallery category="animation" collate="quote:{url}" collatedelim="],[">{url}</txp:smd_gallery>
]],

It returns, this:

imagearray: [[
"http://www.xxxxx.com/images/19.jpg"],["http://www.xxxxx.com/images/18.jpg"],
["http://www.xxxxx.com/images/17.jpg"],["http://www.xxxxx.com/images/15.jpg"],
["http://www.xxxxx.com/images/16.jpg"],["http://www.xxxxx.com/images/20.jpg"],
["http://www.xxxxx.com/images/23.jpg"],["http://www.xxxxx.com/images/22.jpg"],
["http://www.xxxxx.com/images/24.jpg"],["http://www.xxxxx.com/images/25.jpg"
]],

Which works like a charm.

I thought I had even tried your suggestion, but your magic touch as always did the trick. You are a man amongst boys. A wiz with the keyboard. A TXP legend. (ok yes, I am laying it on thick because not only do I appreciate the help, but I know this probably will not be the last time.)

Thanks again.

progre55

lonelytraveller · 2011-05-11 18:54:09

Hello! I’ve played with smd_gallery for a week or so, and following exemple 6 in Stef’s documentation I’ve successfully built a page with multiple galleries, one for each image category, this has been relatively easy.

Since the galleries are pretty long, I need to put a ‘back to top’ link at the end of each gallery, so I thought that I could use something like countform="{totalimages}:gallery_foot:smd_below" but this outputs the content of the ‘gallery_foot’ form after the last image of the page, not at the end of each gallery.
Is there a way to do that? I’m using TXP 4.4.0 and MLP.

Looking for an alternative solution I thought that I could somehow ‘paginate’ the gallery, maybe using some jquery plugin and trying to output some hook tag every nth image, but if countform counts all the images on the page, then it’s not possibile to do that either.

I understand this is the intended behaviour of countform, but if someone can suggest a workaround I’d be happy to learn.

Bloke · 2011-05-11 20:22:36

lonelytraveller wrote:

I need to put a ‘back to top’ link at the end of each gallery

Hmmm, this is actually harder than it should be. A few ways to approach it, or at least something close. The first revolves around having two onchange counters: one to do the category title and the other to trigger a form that displays the Back to the top (BTTT) link. Here’s my stab at it:

<style type="text/css">.bttt1 { display:none; }</style>
<txp:smd_gallery onchange="category:bttt, category_title" onchangewraptag="h3">
   {onchange:category}
   {onchange:category_title}
   <txp:thumbnail id="{id}" />
</txp:smd_gallery>
<txp:output_form form="bttt" />

And in form bttt:

<a class="bttt bttt{counter}" href="#top">Back to the top</a>

Unfortunately it’s a bit of a hack because it renders the BTTT above the category heading, which means you get one at the start, hence the inline style and the class on the anchor which serves to silence the first one. The other downside is that you don’t get one after the last gallery so you have to trigger it manually with the final output_form. Moving the {onchange:category} elsewhere in the container doesn’t help matters.

There’s no way I can think of to hook into countform because the image counter isn’t reset at the end of each gallery. The only fields that reset are {thumbindex} and {thumbcounter}. You might be able to utilise those with some cunning but I couldn’t figure it out, besides using this smd_if logic in the container:

<txp:smd_if
     field="{counter}, {thumbindex}"
     operator="gt, eq"
     value="1, 0">
   <txp:output_form form="bttt" />
</txp:smd_if>

But that effectively did the same as the first method so, in the interests of keeping the plugin count down, we might as well stick with the native gallery method.

For some reason I couldn’t reliably trigger an smd_if inside the bttt form that was called from onchange. No idea why. I could output the value of {counter} fine (as demonstrated in the form above), but if I tried to test it, the result was always true; no matter what. No idea why, I’m probably just being dense.

Anyway, see if any of that lot helps you out or gives you some inspiration. Sorry it’s not trivial. If inspiration strikes I’ll see if there’s anything else I can offer or a fix to the plugin to make things simpler.

Last edited by Bloke (2011-05-11 20:23:39)

lonelytraveller · 2011-05-11 21:51:03

Hi Stef,
thanks for your quick reply and the explanation.
I tried the first method but for some reason it didn’t work as expected: actually it outputs two ‘bttt’ blocks, one inside the group container div and one outside (I’m using your example 6, including {grouptagstart} and {grouptagend}).

I’ll try the second method tomorrow, while looking for inspiration.

Last edited by lonelytraveller (2011-05-11 21:51:36)

Bloke · 2011-05-12 12:12:36

lonelytraveller wrote:

it outputs two ‘bttt’ blocks, one inside the group container div and one outside

Weird, with the same bttt form as in my post above, the following works fine for me:

<style type="text/css">.bttt1 { display:none; }</style>
<txp:smd_gallery
     category="!SMD_EMPTY"
     onchange="category:bttt, category_title"
     onchangewraptag="h3"
     grouptag="div" groupclass="box">
   {onchange:category}
   {onchange:category_title}
   {grouptagstart}
   <txp:thumbnail id="{id}" />
   {grouptagend}
</txp:smd_gallery>
<txp:output_form form="bttt" />

Wonder why it’s misbehaving for you? Can you post your tag/form please and I’ll see if I can figure out what’s going wrong?

lonelytraveller · 2011-05-18 16:15:20

I’m still missing the replies from the forum, even if I subscribed this topic, so sorry for being late.
For now I just used some jquery code to add the link at the end of each gallery, ‘cause the site had to be online on monday, and I didn’t have enough time to fix this. It’s not the most elegant solution, so I still want to try your solution and understand why it doesn’t work.

Wonder why it’s misbehaving for you? Can you post your tag/form please and I’ll see if I can figure out what’s going wrong?

I cleaned up my code before launching the website, then went back to the development site and gave your code another try, now in my gallery page I have the following tag:

 <txp:smd_gallery 
    onchange="category:bttt, category_title" 
    onchangewraptag="h3"
    grouptag="div"
    groupclass="gallery"
    form="gallery" />
<txp:output_form form="bttt" />

my “gallery” form looks like this:

{onchange:category}
{onchange:category_title}
{grouptagstart} 
<div class="gallery_item">
<a href="{url}" rel="lightbox-{category}">
{object}
</a>
</div>
{grouptagend}

and I just copied/pasted your “bttt” form:

<a class="bttt bttt{counter}" href="#top">Back to the top</a>

Now I get an even stranger behaviour: the first gallery has an h3 title “Back to the top”, and at the beginning of the page, right after the body tag I can see the following link <a class="bttt bttt{counter}" href="#top">Back to the top</a>
Maybe there’s some unclosed tag somewhere, but I can’t find it. Reverting to the old code the gallery works perfectly and the page validates.
You can see the “strange” output on the gallery page of the website where you tested smd_calendar (it’s the same project).

Bloke · 2011-05-18 18:52:54

lonelytraveller wrote:

the first gallery has an h3 title “Back to the top”

I managed to get this behaviour at some point but it went away after I put the anchor inside it’s own wrapper. Go figure.

at the beginning of the page, right after the body tag I can see the [bttt] link

If it’s appearing immediately after the body then yes I’d wager there’s a missing tag or something, or your gallery is inside some other list/table structure and the remaining anchor isn’t. But I must confess the fact that it displays the class="bttt bttt{counter}" is my fault, sorry. Outputting the form itself after the smd_gallery has terminated will indeed render the {counter} verbatim as it has ‘lost’ the gallery context. If you need the bttt link after the gallery, you’ll have to just add it yourself directly into the markup instead of calling the bttt form. My apologies for the bogus advice there.

Last edited by Bloke (2011-05-18 18:53:32)

Textpattern CMS

Textpattern CMS support forum

#817 2011-04-19 21:08:25

Re: smd_gallery: super-flexible gallery generator

#818 2011-04-19 21:20:41

Re: smd_gallery: super-flexible gallery generator

#819 2011-04-19 21:27:47

Re: smd_gallery: super-flexible gallery generator

#820 2011-04-19 22:07:25

Re: smd_gallery: super-flexible gallery generator

#821 2011-04-20 07:47:42

Re: smd_gallery: super-flexible gallery generator

#822 2011-04-20 12:18:48

Re: smd_gallery: super-flexible gallery generator

#823 2011-05-11 18:54:09

Re: smd_gallery: super-flexible gallery generator

#824 2011-05-11 20:22:36

Re: smd_gallery: super-flexible gallery generator

#825 2011-05-11 21:51:03

Re: smd_gallery: super-flexible gallery generator

#826 2011-05-12 12:12:36

Re: smd_gallery: super-flexible gallery generator

#827 2011-05-18 16:15:20

Re: smd_gallery: super-flexible gallery generator

#828 2011-05-18 18:52:54

Re: smd_gallery: super-flexible gallery generator

Board footer