smd_gallery: calling all testing masochists :-)

Bloke · 2008-02-15 09:06:39

gluteus wrote:

—-Thumbpop—- It works! But if this crazy jumping (second example with mouse over) is normal, I don’t like it…

hehe, glad it’s going for you. Nice slimbox gallery, btw.

The thumbpop demo I provided was just to give an idea of the effect. I would not use it like that on a live site because of the ugly jumping effect you mentioned! The <img> tag automatically resizes to the size of the image, which is not what you want. If you fix the dimensions of the img by adding width="400" and height="300" (or something) to the fullsize img placeholder it’ll stop doing that, but of course all your pictures must then be the same size or they’ll be squashed/stretched by the browser.

You can take the thumbpop idea and go mad with it in terms of styling and positioning. And, yes, there’s nothing to stop you using smd_gallery to make a floating tooltip of an image when you wave over the thumb with your mouse; if you include the required main.js from that example link and follow the guide on setting it up you can translate the code directly into your form. If I get a chance later today I’ll see if I can set it up and add it to the examples page for you.

The first time I see an inexistent picture. It’s the placeholder for the full pics. Little bit ugly…

*cough* as before, that should probably be “/images/empty.jpg”, oops.

You could make empty.jpg an image that says “wave mouse over to see thumbs” or with some clever use of custom fields get it to show the first image in the gallery by default. If you use a div as a placeholder and change the javascript to populate it with a full img tag (for now it just changes the src attribute) you can even have it display text instead.

The flexibility of the plugin really comes down to how devious you are with javascript and the TXP article fields. Of course that doesn’t help people who don’t know JS very well… which is why I want to build up the examples page over time (I’ll make it a proper HTML document soon so it looks better) and encourage people to submit their gallery ideas.

A mouse out would be nice, that let disapear the full picture and you are in the state like in the beginning. Till now the last visited pic last in place.

If you want mouseout functionality, just add it to the form after the onmouseover; part (but before the return false;) :

onmouseout="document.getElementById('fullsize').src = "/images/empty.jpg";

Or something similar. That’s untested but it should work and display the empty.jpg when you move away from the thumbnail.

Hope that helps.

Last edited by Bloke (2008-02-15 09:09:15)

gluteus · 2008-02-15 10:15:55

Hi Stef

Unfortunetaly, it happens exactly nothing… less then before.

My form:
<a href="{url}" title="{title}" onmouseover="document.getElementById('fullsize').src = this.href;
onmouseout="document.getElementById('fullsize').src = "/images/17.jpg";
document.getElementById('fullcaption').innerHTML = this.title;
return false;">
<img src="{thumburl}" alt="{alt}" />
</a>

Second line is added.

But Stef, its ok, I’m looking more for that tooltip idea. I’m very interested in JS, but I’m still a beginner. Maybe I will try your hint to put the necessary code in my form and include that main.js.

Thank you for your compliment. I will tell my wife you like the gallery and her pictures! ;-)

But Stef, tell me, why did you collected similar …boxes? Slimbox and Lightbox are in my eyes the same… Was it a code-hacking challenge? :-)

dave

Bloke · 2008-02-15 11:12:03

gluteus

Ah, yes, sorry I gave you bogus information again (gee, I must be half asleep this morning).

Try this in your form:

<a href="{url}" title="{title}" onmouseover="document.getElementById('fullsize').src = this.href;
document.getElementById('fullcaption').innerHTML = this.title; return false"
onmouseout="document.getElementById('fullsize').src = '/images/17.jpg';
document.getElementById('fullcaption').innerHTML = ''; return false;">
<img src="{thumburl}" alt="{alt}" />
</a>

tell me, why did you collected similar …boxes?

Well, I didn’t exactly collect them, I just made the plugin able to use any of them. smd_slimbox was just for Slimbox, which requires mootools. Since TXP ships with jQuery now and using more than one library at once can cause problems or make pages bloatier than necessary, it made sense to offer the ability to use alternatives. Plus, some people simply prefer jQuery or prototype over mootools as their javascript library.

smd_slimbox could work with other libraries but it required hacking. smd_gallery doesn’t require such hacks — in the “modifying the plugin” sense; your definition of ‘hacking’ may vary ;-)

Slimbox itself is just a cut-down version (in terms of code size, not functionality) of Lightbox that uses mootools. Moonbox and Litebox are (both, I believe) jQuery ports of Slimbox. Thickbox additionally allows HTML in the output to allow previews of documents. And if anyone writes another type of lightbox effect or comes up with a new javascript framework, smd_gallery will most likely work with it.

So the underlying principle behind the plugin was one of choice for you to implement a gallery any way you want in TXP. And to define a “gallery” as loosely as possible to allow the most flexibility. I even toyed with the idea of allowing a “gallery” of articles / comments / files/ etc via Thickbox, but it made the plugin unnecessarily more complex than it already is — if that’s possible — and that sort of thing might be best left for xpattern. Mind you, the functionality is still partly available, hidden, in the code in case I find a good way of doing it in future!

The ‘price’ you pay for this flexibility is that you probably need to understand some JS to get the best from smd_gallery and understand the way TXP forms work. For most very very new users, this might be a problem, so for those people there are dedicated plugins to make the job a bit more automated (smd_slimbox, aro_slideshow, and rss_thumbpop to name three). But once the TXP basics are grasped, the idea is that you can migrate over to smd_gallery if you sit there one day and say “I wish I could make a gallery that did…”

And yes, I also enjoyed the challenge of making the plugin super flexible while trying to keep it accessible for people and to allow the power to grow as you become more comfortable with the syntax. Time will tell if I’ve succeeded.

Last edited by Bloke (2008-02-15 11:18:06)

gluteus · 2008-02-15 14:29:16

Bloke schrieb:

Try this in your form…

It works.

Thank you for your informations. Very interesting. If you wish I may help you to comment your plugin more “newbie-friendly”.

I will tell you later if I succeeded with my tooltip-idea.

Bloke · 2008-02-15 14:57:20

gluteus wrote:

If you wish I may help you to comment your plugin more “newbie-friendly”.

Brilliant, thank you. I have made a start with the documentation but it’s currently “factual” in the sense it’s just “these are the options, this is what they do”. You should be able to see how far I’ve got in the latest version of the plugin.

I certainly think a section that gives an overview — a sort of logical flow of how the plugin does what it does and how it interacts with the TXP forms — would be very beneficial. Hmmm, is that a nooberview :-P

That might help people get in the right headspace for using the plugin; after that, the various levels of debug output should help iron out the technical aspects and offer assistance on what variables are available for you to (ab)use. debug="4" is ideal here.

If you have any ideas on this, feel free to send them over and I’ll incorporate them in the plugin help and/or the examples if I can. My documentation is traditionally difficult to grasp or over-wordy, so any help in taming it is greatly appreciated.

gluteus · 2008-02-18 15:35:28

Hi Stef!

Now I got finally the full power of your plugin!
I took this JS-tooltip from Walter Zorn: wz-tooltip.
Added this to an article:
<txp:smd_gallery category="Bilder_Feb08" form="gallery-tooltip" />
And this is how my form “gallery-tootip” is looking like:
<span href="<txp:site_url />images/{id}{ext}"
onmouseover="Tip('<img src=\'<txp:site_url />images/{id}{ext}\' />', CENTERMOUSE, false, ABOVE, true, OFFSETY, -300, FADEIN, 300, FADEOUT, 300, BGCOLOR, '', BORDERCOLOR, 'black', BORDERWIDTH, 7, PADDING, 0, SHADOW, true, CLICKCLOSE, true)" ><txp:thumbnail id="{id}" /></span>

This is the result: Example gallery.

Thank you very much!

If you are really interested in my help writing a newbie part of your help-file, please E-Mail me.

dave

Last edited by gluteus (2008-02-18 15:41:13)

Bloke · 2008-02-18 15:57:17

gluteus wrote:

I took this JS-tooltip from Walter Zorn… Added this to an article… Now I got finally the full power of your plugin!

W00t! Niiiiice.

Some of the images are rather large and take a while to start downloading, which sometimes gives the impression that the gallery isn’t doing anything at first (hey, it’s coming all the way from Switzerland – it’s still pretty quick!), but as a showcase for the flexibility of smd_gallery it’s brilliant :-)

Many thanks for taking the time to tinker with it and congratulations on integrating it into your site like that. I’m totally stoked it works in a “real world” situation.

As you progress with it and try other stuff, if you have any feedback on how the plugin should behave by default or any improvements I can build in to make the plugin work better/smarter/make your life easier then please continue to post here and I’ll see what I can do.

If you are really interested in my help writing a newbie part of your help-file, please E-Mail me.

Cool, thanks again. When I get a chance I’ll drop you a line.

Bloke · 2008-02-19 21:24:55

Minor update to add an extra Replacement Tag {galleryid}. Thanks to rloaderro for spotting that oversight. It’s only really of use in collate mode, but it may be useful elsewhere too. I also added a few more lines of documentation to the plugin.

v0.2 (zipped).

jakob · 2008-02-19 23:05:43

man, I can’t wait to get some more time. Just gotta try this out :-)

masa · 2008-02-22 13:42:47

Bloke wrote:

If you fix the dimensions of the img by adding width="400" and height="300" (or something) to the fullsize img placeholder it’ll stop doing that, but of course all your pictures must then be the same size or they’ll be squashed/stretched by the browser.

I just tried that using <img id="fullsize" src="/images/10.jpg" width="450" height="299" /> but it doesn’t have any effect. The placeholder image tag starts out collapsed.

I was also wondering whether it could be modified to pick a random image from the ones in the gallery?

The flexibility of the plugin really comes down to how devious you are with javascript and the TXP article fields. Of course that doesn’t help people who don’t know JS very well… which is why I want to build up the examples page over time (I’ll make it a proper HTML document soon so it looks better) and encourage people to submit their gallery ideas.

My knowledge of JS equals the one of a tomato, so I shall be looking forward to your samples :-)

What I would really like to be able to do is farming out the entire smd_gallery tag to a form and have it build the gallery from a custom field value that contains the image category. I have tried that with rss_thumbpop, but to no avail.

Cheers Martin

Bloke · 2008-02-22 14:14:58

masa wrote:

I just tried that using <img id="fullsize" src="/images/10.jpg" width="450" height="299" /> but it doesn’t have any effect. The placeholder image tag starts out collapsed.

Hmm, it should work, thanks for the report. I’ll look into it. What tag and form are you using?

I was also wondering whether it could be modified to pick a random image from the ones in the gallery?

I should think so. I’ll take a look at adding that explicitly but you can do it now by pulling out all the images you want, adding sort="random" then displaying just the first one :-)

My knowledge of JS equals the one of a tomato, so I shall be looking forward to your samples :-)

Hehehe, I’ll be hopefully updating the example text file in the next few days and making it a proper page.

What I would really like to be able to do is farming out the entire smd_gallery tag to a form and have it build the gallery from a custom field value that contains the image category.

Easy :-) Say you want a thickbox gallery, load your js/css libraries in the head of your page then put this in your form:

<txp:smd_gallery category="?my_custom_field">
  <a class="thickbox" href="{url}" alt="{alt}" title="{title}" height="{height}" width="{width}">
    <txp:thumbnail id="{id}" />
  </a>
</txp:smd_gallery>

And in your article just add the usual <txp:output_form /> where you want the gallery to appear. btw, your chosen custom field can have more than one category in it, comma separated. And don’t forget sublevel :-)

masa · 2008-02-22 18:51:09

Bloke wrote:

Hmm, it should work, thanks for the report. I’ll look into it. What tag and form are you using?

Pretty much the sample from the documentation. I currently have this in my article:

<p><img id="fullsize" src="/images/10.jpg" width="450" height="299" /></p>
<p id="fullcaption"></p>
<div><txp:smd_gallery sublevel="ALL" category="xxxxx" form="gallery2" /></div>

and in the form gallery2:

<a href="{url}" title="{title}" onmouseover="document.getElementById('fullsize').src = this.href; document.getElementById('fullcaption').innerHTML = this.title; return false;">
<img src="{thumburl}" alt="{alt}" />
</a>

I changed the image reference to point at an existing image, but it still doesn’t pull up anything.

Easy :-) Say you want a thickbox gallery, load your js/css libraries in the head of your page then put this in your form:

<txp:smd_gallery category="?my_custom_field">
<a class="thickbox" href="{url}" alt="{alt}" title="{title}" height="{height}" width="{width}">
<txp:thumbnail id="{id}" />
</a>
</txp:smd_gallery>

OK, I’ll try that next.

And in your article just add the usual <txp:output_form /> where you want the gallery to appear. btw, your chosen custom field can have more than one category in it, comma separated. And don’t forget sublevel :-)

Yeah, I’m still making my way through the documentation and to be honest, it sometimes reads like the manual of a Klingon Battle Cruiser. ;-)

Mind you, this is not meant as a negative comment. I do realise the potential of the plugin and the fact that the wealth of customisation options comes with a learning curve. :-)

Thanks very much for your efforts!

Textpattern CMS

Textpattern CMS support forum

#13 2008-02-15 09:06:39

Re: smd_gallery: calling all testing masochists :-)

#14 2008-02-15 10:15:55

Re: smd_gallery: calling all testing masochists :-)

#15 2008-02-15 11:12:03

Re: smd_gallery: calling all testing masochists :-)

#16 2008-02-15 14:29:16

Re: smd_gallery: calling all testing masochists :-)

#17 2008-02-15 14:57:20

Re: smd_gallery: calling all testing masochists :-)

#18 2008-02-18 15:35:28

Re: smd_gallery: calling all testing masochists :-)

#19 2008-02-18 15:57:17

Re: smd_gallery: calling all testing masochists :-)

#20 2008-02-19 21:24:55

Re: smd_gallery: calling all testing masochists :-)

#21 2008-02-19 23:05:43

Re: smd_gallery: calling all testing masochists :-)

#22 2008-02-22 13:42:47

Re: smd_gallery: calling all testing masochists :-)

#23 2008-02-22 14:14:58

Re: smd_gallery: calling all testing masochists :-)

#24 2008-02-22 18:51:09

Re: smd_gallery: calling all testing masochists :-)

Board footer