smd_gallery: super-flexible gallery generator

Bloke · 2008-06-02 15:45:20

progre55 wrote:

unfortunately your response did not solve the problem.

Dammit :-(

OK, just to clear things up. When you say Slideshow 2, do you mean aro_slideshow v2 or Slideshow 2 ? I’m talking about the 2nd one. Just wanna be sure we’re not getting our wires crossed.

What I get is it acted like a “lightbox” type effect.

Yes, you will because I added rel="lightbox" to the gallery form. Take it out and it’ll just become a normal clickable image. Remove the entire <a href …> and just leave the <img…> tag to stop the image being clickable at all (I believe you will also have to remove the linked:true if this is the intended behaviour).

I also get five bullet points after the image itself.

That is odd, since your source doesn’t show that. The ‘bullets’ are sometimes placeholders for image thumbnails without alt text. Check in Firebug that they are true bullets from, say, a <li> tag or if they are very tiny image borders.

Either way, the plugin should not output these in collate mode as it is only supposed to process the form once. It may well be a bug but your source backs this up: it has correctly replaced the {imagedef} with two images and placed the first of those in the placeholder div. Hmmmmm.

I get an error on the page message that states “Object does not support this method”

I agree that’ll be the start() method; take the line out. I did say it was a guess… :-) Maybe cuda’s suggestion of wrapping the content in addEvent() is the correct way of starting the slideshow? I haven’t done it myself yet so I’ve never tried it. If I get a chance I’ll give it a go and report back here.

Also, when I scroll over the actual images I see the path as “images//3.jpg”

Yes, that must be because the {imagepath} outputs a trailing slash and slideshow also adds one before the image file name. It won’t hurt the URL (just looks a bit odd) but there are 3 possible fixes I can think of:

ask rloaderro to detect if hu has a trailing slash already and omit the 2nd one if so
Hard-code the path as hu: '/images'
Wait for me to add a feature to remove trailing slashes to the gallery plugin

is the most immediate ;-)

My guess is it’s almost working. It looks to me as if smd_gallery is doing its bit and feeding the right content into the gallery format that slideshow requires. The key now is to figure out how to ‘start’ the slideshow. If anyone has any experience in this, please let us know; it might be a few days before I can play with it myself.

progre55 · 2008-06-02 16:24:01

Bloke:

Yes, we are on the same page Slideshow 2

Regarding the “Lightbox effect” I removed the sited references and it acts as you described.

The one item I forgot to mention, and it is even more noticeable now, is that the image appears not as the full image, but as a small box of an image and does not appear until a click. This also occurred when it was giving me the lightbox effect, but after I clicked on the image the first time that went away. Not sure why, but I am hoping the below sheds some light on the issue.

Firebug shows:

<div id="my_show" class="slideshow" style="display: block; position: relative;">
<div class="slideshow-images" style="overflow: hidden; display: block; height: 219px; position: relative; width: 740px;">
<a href="http://www.xxxxxx.com/images/3.jpg">
<img alt="" src="http://www.xxxxxx.com/images/3.jpg" style="display: block; position: absolute; z-index: 212; height: 219px; visibility: hidden; width: 740px; left: 0px; top: 0px;"/>
</a>
<a href="http://www.xxxxxx.com/images/4.jpg">
<img src="http://www.xxxxxx.com/images/4.jpg" style="display: block; position: absolute; z-index: 211; visibility: hidden; height: 219px; width: 740px; left: 0px; top: 0px;"/>
</a>
<div class="slideshow-loader"/>
</div>
<div class="slideshow-controller">
<ul>
<li class="first">
</li>
<li class="prev">
</li>
<li class="pause">
</li>
<li class="next">
</li>
<li class="last">
</li>
</ul>
</div>
</div>

Now we can see, the bullet points are the controls elements to the slideshow. Not sure what the fix is, but at least I am not going crazy (yet)

You were correct, taking out start() method; did remove the error. Adn I know you said that this was a guess, but MOST of your guesses seem to be correct. :) I would like to implement Cuda’s suggestion, just not sure where it goes (think css) and how it hooks in.

If my only problem is the double slash, I would be a happy man. :)

I hope the above addiitonal information is usefull.

progre55

Last edited by progre55 (2008-06-02 16:24:46)

cuda · 2008-06-02 16:51:05

progre55…..what was my suggestion??? Including the default slideshow.css file?

If that is the one just add the call in your head

<link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" />

with the correct path to your css on your site of course that file was included with the download of Slideshow 2!

….otherwise I am lost

Last edited by cuda (2008-06-02 16:52:07)

jstubbs · 2008-06-02 18:03:51

cuda wrote:

Jstubbs, Correct me if I’m wrong stef but wouldn’t you just use

<txp:smd_gallery category="?article_image" form="fancy_zoom_form" />

then create the form as needed….I think you may be getting caught up on calling the gallery tag twice because you have the one gallery on the right and then you need to reference a different image on the left for the article so for that you will need to call the tag again in your template. Hope I was following your problem

Thanks for this cuda – my main objective is to place the image in the article, not the template, so I am not sure if your example is workable. I’ll try your suggestion though (or think of another way around this) unless Stef has a better idea.

cuda · 2008-06-02 20:30:40

jstubbs,

You want it in the article body itself and in different places for each article…ok just call the tag in the article I have done this here with this tag in the article body:

<txp:smd_gallery category="ron-louque" form="eo-gallery" />

It works for me so that should work for your case I think….and put the styling you need around it.

Last edited by cuda (2008-06-02 20:31:50)

Bloke · 2008-06-02 20:55:27

jstubbs wrote:

my main objective is to place the image in the article, not the template

I’m not quite sure I follow this, sorry. You can add smd_gallery in your article (or default form) to insert it into the flow of the page and pull the ?article_image or some other image from a ?custom field. And remember you can use smd_gallery as a container tag so the form is optional. Something like:

<txp:smd_gallery id="?article_image">
  <a href="{imagedef}"><txp:thumbnail id="{id}" /></a>
</txp:smd_gallery>

should get you going. And yes there’s no reason you can’t use upm_image at the same time as smd_gallery. Should work fine. For utmost craziness you can even call upm_image from within smd_gallery but I doubt that’ll gain you much (apart from a headache!)

progre55 · 2008-06-03 02:40:46

Bloke/Cuda:

It works. :) and the missing piece was …. I needed to add Aaron’s style sheet to mine. But then I came across some additional niggles. I have highlighted them below to hopefully help the next person.

First, here is all the code that was used:

Header

<script type="text/javascript" src="http://www.yourwebsite.com/js/mootools.js"></script>
<script type="text/javascript" src="http://www.yourwebsite.com/js/slideshow.js"></script>

Tag:

<txp:smd_gallery category="main" form="gallery" collate="quote:{imagedef}" />

Gallery Form:

<div id="my_show" class="slideshow">
<img src="{imagepath#1}{imagedef#1}" alt="{alt#1}" />
</div>
<script type="text/javascript">
  var data = [{imagedef}];
  var myShow = new Slideshow('my_show', data, {controller: true, hu: '{imagepath#1}', linked: true});
</script>

CSS:

To get it to work, I had to include Aaron’s stylesheet inside of mine. There is probably a better way of handling it, but I just tacked his on to the end of mine.

Aaron’s original style sheet creates the upward wipe effect. It took me a while to figure out where the effects are controlled and how to do a fade. So that I may save someone some time, if you locate this part of Aaron’s stylesheet heer are the necessary changes:

/* fade effect
.slideshow-images-next {
        left: 0;
        opacity: 0;
        top: 0;
}
.slideshow-images-prev {
        left: 0;
        opacity: 0;
        top: 0;
} 
*/
/* wipe effect
.slideshow-images-next { 
	left: 0; 
	opacity: 0; 
	top: 360px; 
}
.slideshow-images-prev { 
	left: 0; 
	opacity: 0; 
	top: -360px; 
}
*/

Slideshow2 Javascript

Where as the CSS controls alot of Aaron’s work, there are also options that can be set in the slideshow.js.

Here is a copy of the one I used:

Slideshow = new Class({
	Implements: [Chain, Events, Options],

options: { captions: false, center: true, classes: [], controller: false, delay: 2000, duration: 750, fast: false, height: 219, href: ‘’, hu: ‘/’, linked: false, loader: {‘animate’: [‘/css/loader-#.png’, 12]}, loop: true, match: /\?slide=(\d+)$/, overlap: true, paused: false, quick: false, random: false, replace: [/\.(.{3})$/, ‘t.$1’], resize: false, slide: 0, thumbnails: false, transition: function(p){return -(Math.cos(Math.PI * p) – 1) / 2;}, width: 740 },

What took me some time (ok too much time) was trying to figure out why in Firefox it worked fine, but in IE I got a small box to start and it required me to click that box and then go back to the page to make it work. The answer I found was in two places.

Although the height and width are optional. I found them necessary to get things to work as I wanted. In addition, The resize elemnet is defaulted to True. I needde to set that as false to get IE and Firefox to act the same.

Thank you Bloke and Cuda for assisting me. I hope the above helps someone out ther when they go to integrate Aaron’s awsome code with Bloke’s great plug in.

progre55

Last edited by progre55 (2008-06-06 12:49:31)

castanet · 2008-06-04 11:09:07

Thanks to Stef and progre55, and after 48 hours of tweaking and re-tweaking, I have got a Slideshow2 gallery up and running!
However, I am stuck on the captions. Aeron’s code shows:

var data = {‘01.jpg’: { ‘caption’: ‘Lorem ipsum dolor sit amet, consectetuer adipiscing elit.’ } }

Mine is:

var data = [“2.jpg”,“3.jpg”,“4.jpg”,“6.jpg”,“7.jpg”,“8.jpg”,“9.jpg”,“10.jpg”];

Presumably I have to put {imagedef} and {title} together somehow?
While I am on the subject, would it be possible to have the captions to the side of the images??

Thanks again for all the useful info that’s been posted so far.

Bloke · 2008-06-04 22:55:43

@progre55:

Glad it’s working now. Thanks for the detailed breakdown on how you did it, and thanks cuda for suggesting the missing CSS; I never would have spotted that!

@castanet:

Aeron’s code shows: var data = {‘01.jpg’: { ‘caption’: ‘Lorem ipsum dolor sit amet, consectetuer adipiscing elit.’ } }

Right, yes you would need to combine them so I suggest making a combo like this:

<txp:smd_gallery ..blahblah.. combo="imagecap::'{imagedef}': { 'caption': '{title}' }" collate="1" paramdelim="::" />

And then use {imagecap} in place of {imagedef} in the gallery form.

I have no idea if it’ll work because of the nested {} symbols, but if it doesn’t then let me know. I can add the ability to override the { and } surrounding replacement variables in the plugin.

Note that in the above you are manually quoting inside the combo so you can just switch collate mode on with a 1. And you must also change the paramdelim because the combo uses : in its own definition. Remember this will affect your custom label tags and ‘changed’ replacement tags as well.

While I am on the subject, would it be possible to have the captions to the side of the images??

Yep. Place the caption after the thumbnail in your gallery form and then use CSS to float it (or the thumb) one side or the other.

castanet · 2008-06-05 09:06:30

Brilliant. I got it to work by changing var data = [{imagecap}]; to var data = {{imagecap}};

Now I’ll go and play with the captions. Aeron already has them in a div class=“slideshow-captions”, so it should just be a css issue.

Thanks once again

zero · 2008-06-05 17:55:07

My photos aren’t great. Does your plugin enhance them, Stef? For example could it turn my dross into wonderful photos like this?

Bloke · 2008-06-05 18:39:35

zero wrote:

My photos aren’t great. Does your plugin enhance them, Stef? For example could it turn my dross into wonderful photos like this?

:-D

Ah the trusty old iPhoto effects. ~~Hours~~ Minutes of fun.

Textpattern CMS

Textpattern CMS support forum

#85 2008-06-02 15:45:20

Re: smd_gallery: super-flexible gallery generator

#86 2008-06-02 16:24:01

Re: smd_gallery: super-flexible gallery generator

#87 2008-06-02 16:51:05

Re: smd_gallery: super-flexible gallery generator

#88 2008-06-02 18:03:51

Re: smd_gallery: super-flexible gallery generator

#89 2008-06-02 20:30:40

Re: smd_gallery: super-flexible gallery generator

#90 2008-06-02 20:55:27

Re: smd_gallery: super-flexible gallery generator

#91 2008-06-03 02:40:46

Re: smd_gallery: super-flexible gallery generator

#92 2008-06-04 11:09:07

Re: smd_gallery: super-flexible gallery generator

#93 2008-06-04 22:55:43

Re: smd_gallery: super-flexible gallery generator

#94 2008-06-05 09:06:30

Re: smd_gallery: super-flexible gallery generator

#95 2008-06-05 17:55:07

Re: smd_gallery: super-flexible gallery generator

#96 2008-06-05 18:39:35

Re: smd_gallery: super-flexible gallery generator

Board footer