smd_gallery: super-flexible gallery generator

chume · 2011-03-29 15:16:27

Hello,

Great plugin Stef.
Any idea how Jonathan got his project done with smd_gallery. I would like to know the plugins he used to achieve the result in http://spaintennisacademy.com/photos/.

Thank you.

Chume

tye · 2011-03-29 21:40:51

Hey chume – I think he would have used http://www.twospy.com/galleriffic/

Not sure if he used smd_gallery for this – because he has wrote 2 tutorials on txptips.com without, one old method and one using native txp tags

chume · 2011-03-29 22:44:08

Thank you Tye for responding.
I think he used smd_gallery for that particular project based on his forum posts but I wanted to know if other plugins are used to make it happen.

Chume

Last edited by chume (2011-03-29 23:18:51)

maxk · 2011-04-04 18:28:15

Greetings,

I am trying to set up a site using the smd_gallery, and also smd_tags. I need the ability to put images into multiple categories, and it seems that smd_tags is the way to go, but I haven’t been able to figure out how to use the tags to serve as my image/gallery categories.

The galleries are simple, no captions just the images. I am simply outputting a list of images to the page and using jquery cycle plugin to create a slideshow.

Ultimately, I also need to modify the cno_image_order plugin so that images in multiple categories can be put in an absolute order in each gallery, but I am considering that a problem to solve later. I don’t think this is relevant to my question, but wanted to throw this in in case it might cause a problem.

My site is here: http://jameskegley.com/txp/

I am not sure how to find images using the tags, and then pass them into the smd_gallery for output?

Any suggestions or advice would be greatly appreciated. thanks.

progre55 · 2011-04-19 20:53:04

Guys:

Hope someone can help me out. I have used smd_gallery in the past and it worked great. I am now attempting to use it with a different player (http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm) and I am coming across an issue. I have been unsuccesful in referencing it so the player works. The player I am trying to integrate it with now, pulls the images as follows:

imagearray: [
		["http://www.xxxxx.com/images/19.jpg"],
		["http://www.xxxxx.com/images/25.jpg"],
		["http://www.xxxxx.com/images/17.jpg"],
		["http://www.xxxxx.com/images/18.jpg"]
	],

In the past, the players have all referenced the images as straight lists which I could integrate easily.

Any assistance would be appreciated.

progre55

Last edited by progre55 (2011-04-19 20:54:14)

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?

Textpattern CMS

Textpattern CMS support forum

#811 2011-03-29 15:16:27

Re: smd_gallery: super-flexible gallery generator

#812 2011-03-29 21:40:51

Re: smd_gallery: super-flexible gallery generator

#813 2011-03-29 22:44:08

Re: smd_gallery: super-flexible gallery generator

#814 2011-04-04 18:28:15

Re: smd_gallery: super-flexible gallery generator

#815 2011-04-19 20:53:04

Re: smd_gallery: super-flexible gallery generator

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

Re: smd_gallery: super-flexible gallery generator

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

Re: smd_gallery: super-flexible gallery generator

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

Re: smd_gallery: super-flexible gallery generator

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

Re: smd_gallery: super-flexible gallery generator

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

Re: smd_gallery: super-flexible gallery generator

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

Re: smd_gallery: super-flexible gallery generator

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

Re: smd_gallery: super-flexible gallery generator

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

Re: smd_gallery: super-flexible gallery generator

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

Re: smd_gallery: super-flexible gallery generator

#825 2011-05-12 12:12:36

Re: smd_gallery: super-flexible gallery generator

Board footer