Textpattern Forum

You are not logged in. Register | Login | Help

#11 2008-02-15 05:57:36

gluteus
Member
From: Switzerland
Registered: 2007-01-20
Posts: 74

Re: smd_gallery: calling all testing masochists :-)

Hi Stef

Thanks a lot for helping.

—-Thumbpop—-
It works! But if this crazy jumping (second example with mouse over) is normal, I don’t like it… I have several pictures in different sizes, so it’s nothing for me. See for yourself: Example-gallery.
If there are possibilities…
1. The first time I see an inexistent picture. It’s the placeholder for the full pics. Little bit ugly…
2. Could in some way the position of the full pics be fixed? So there would not be this jumping around. Horizontally.
3. 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.

But hey, these are peanuts! I like your development very much! I’m a great fan of slimbox, I like these smooth transitions. GREAT!

Thanks

dave

Last edited by gluteus (2008-02-15 05:58:05)

Offline

#12 2008-02-15 06:06:15

gluteus
Member
From: Switzerland
Registered: 2007-01-20
Posts: 74

Re: smd_gallery: calling all testing masochists :-)

It would be great, if somebody could turn thumbpops into something similar like tip messages. For example like these here. What do you think? ;-)

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 5,936
Website

Re: smd_gallery: calling all testing masochists :-)

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)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern.

Txp Builders – finely-crafted code, design and Txp

Offline

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

gluteus
Member
From: Switzerland
Registered: 2007-01-20
Posts: 74

Re: smd_gallery: calling all testing masochists :-)

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

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 5,936
Website

Re: smd_gallery: calling all testing masochists :-)

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)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern.

Txp Builders – finely-crafted code, design and Txp

Offline

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

gluteus
Member
From: Switzerland
Registered: 2007-01-20
Posts: 74

Re: smd_gallery: calling all testing masochists :-)

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.

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 5,936
Website

Re: smd_gallery: calling all testing masochists :-)

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.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern.

Txp Builders – finely-crafted code, design and Txp

Offline

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

gluteus
Member
From: Switzerland
Registered: 2007-01-20
Posts: 74

Re: smd_gallery: calling all testing masochists :-)

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)

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 5,936
Website

Re: smd_gallery: calling all testing masochists :-)

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.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern.

Txp Builders – finely-crafted code, design and Txp

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 5,936
Website

Re: smd_gallery: calling all testing masochists :-)

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).


The smd plugin menagerie — for when you need one more gribble of power from Textpattern.

Txp Builders – finely-crafted code, design and Txp

Offline

Board footer

Powered by FluxBB