aro_slideshow v2

rloaderro · 2007-03-05 15:26:37

mrdale wrote:

[edit] second thoughts, I think the problem is with double quotes in a caption which transfer into the javascript call that the plugin generates. Any ideas for a fix other than not using double quotes?

hm.. I guess I will need to add some escaping stuff! Look for an update later today…

I was loading categories like this orderby=“id,desc” and this still doesn’t wanna work…

You can order by multiple attributes, but the asc / desc syntax is with a colon: orderby="id:desc" or orderby="id:desc category:asc" for an example of ordering by two different attributes. I guess there is more information on the slimbox thread.

rloaderro · 2007-03-05 15:29:52

mtprell wrote:

Another question: is it possible to have the picture area resize like slimbox, i.e., transition between landscape and portrait images? I have both in the slideshow and the portrait will be cut off at the landscape dimension.

Probably it’s possible, but it would be something for the next version of the javascript. In the meantime try setting the type of the slideshow to “pan” or “combo” – the slideshow will calculate and show the entire image, regardless of orientation, via panning movement.

rloaderro · 2007-03-05 15:32:44

mrdale wrote:

[edit] Oh, and >bloke updated smd_slimbox to do the subcategory thing. Perhaps you could update slideshow with the improved smd funtionality? {asks super-nicely}

Yes, I will release an updated plugin today.

rloaderro · 2007-03-05 15:39:29

jstubbs wrote:

OK, I found another problem. If using both plugins on the same page, when clicking on a slimbox image the slideshow images display ON TOP of the slimbox images. That’s not so great :-)

Try this: in the slimbox.css, try giving #lbOverlay and #lbCenter ridiculously high z-indexes, with lbCenter being 1 > than lbOverlay. And just to extra careful, we can add the “!important” keyword to override anything set in the js:

#lbOverlay {
	...
	z-index: 100000 !important;
}
#lbCenter {
	...
	z-index: 100001 !important;
}

mrdale · 2007-03-05 16:03:37

>rloaderro

OK, one last thing, and then (I promise) I’ll leave you alone. It would be useful to use “alt-text” and “caption” at the same time. Any chance you could break those apart and provide wraptag capability for the alt-text. I use the ‘alt-text’ as a kind of title and the caption as a ‘body’ in my galleries.

Cheers! and many thanks. I hesitate to ask too much, because this plugins has already been one of the most pleasant surprises of the year.

lee · 2007-03-06 22:40:12

I was having problems with space at the bottom of the images and no matter what I did with css it wouldn’t go, so in desperation I flipped around the code at the bottom of the plugin and it went. Seen in FF and IE. Try it out by putting a border on the .slideshow class and you might see what I mean. On the other hand I might be mad.

$outStr .= tag(‘<img src=”’.hu.$img_dir.’/’.$id.$ext.’” alt=”’.$alt.’” width=”’.$w.’” height=”’.$h.’” />’, $wraptag, $wrapclass.’ id=“slideshow’.$slideshow_count.’”’).n.n;

$outStr .= ‘<script type=“text/javascript”>’.n;
$outStr .= t.$slideshow_var.$slideshow_count.’ = new Slideshow(“slideshow’.$slideshow_count.’”, { hu: “’.hu.$img_dir.’/”, images: [‘.join(‘,’,$images).’], captions: [‘.join(‘,’,$captions).’], classes: [‘.join(‘,’,$classes).’]’.$duration.$height.$navigation.$pan.$resize.$transition.$type.$width.$zoom.’ });’.n;
if ($callback) $outStr .= t.str_replace($slideshow_var, $slideshow_var.$slideshow_count, $callback).n;
$outStr .= ‘</script>’.n.n;

to

$outStr .= ‘<script type=“text/javascript”>’.n;
$outStr .= t.$slideshow_var.$slideshow_count.’ = new Slideshow(“slideshow’.$slideshow_count.’”, { hu: “’.hu.$img_dir.’/”, images: [‘.join(‘,’,$images).’], captions: [‘.join(‘,’,$captions).’], classes: [‘.join(‘,’,$classes).’]’.$duration.$height.$navigation.$pan.$resize.$transition.$type.$width.$zoom.’ });’.n;
if ($callback) $outStr .= t.str_replace($slideshow_var, $slideshow_var.$slideshow_count, $callback).n;
$outStr .= ‘</script>’.n.n;

$outStr .= tag(‘<img src=”’.hu.$img_dir.’/’.$id.$ext.’” alt=”’.$alt.’” width=”’.$w.’” height=”’.$h.’” />’, $wraptag, $wrapclass.’ id=“slideshow’.$slideshow_count.’”’).n.n;

EDIT: but it also stopped the slide show from working!

Last edited by lee (2007-03-06 22:48:00)

rloaderro · 2007-03-07 19:17:17

lee wrote:

EDIT: but it also stopped the slide show from working!

Yes, I imagine that’s throwing a JS error since the code is referencing an HTML element that doesn’t yet exist. I guess if the JS isn’t executing it’s going to appear as though your problem has been solved, but that’s not true. You have to remember that while the page looks as though there is only an IMG wrapped by a DIV tag, once the JS kicks in, the HTML actually looks something like this;

<div class="slideshow" id="slideshow0">
	<div> <!— this is the slideshow element —>
		<img src="http://your.textpattern.site/images/1.jpg" alt="some description" width="400" height="300" /> 
	</div>
	<ul> <!— this is the navigation element —>
		<li><a class="prev"></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a class="next"></a></li>
	</ul>
	<p></p> <!— this is the captions element —>
</div>

If you are using captions or navigation options, that space might be caused by the inserted P or UL tags. In fact, slideshow also applies some necessary CSS styles to the elements in order to make everything work:

div.slideshow {
	display: block;
	position: relative; 
	width: [width of slideshow];
}
div.slideshow div {
	display: block;
	height: [height of slideshow];         
	overflow: hidden;
	position: relative; 
	width: [width of slideshow];
}
div.slideshow div img {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

Maybe it would be easier if I moved this to a stylesheet? My only concern is if any of these values are changed, slideshow might not work right visually. Anyway you can override any of these values in your stylesheets by applying the “!important” keyword after the CSS declaration. For example, notice that the slideshow DIV has a width but no height (mostly so I could center it easily on the example pages). If for some reason you don’t want it to have a defined width, you can set in your stylesheet: div.slideshow { width: auto !important; } or something like that to override the predefined value.

Maybe if you have an example online I can tell you exactly what the problem is?

rloaderro · 2007-03-07 19:22:03

BTW, regarding the status of the plugin, I am in the process of corresponding with Stef Dawson (aka Bloke of smd_slimbox). I might wait for his next round of enhancements which should be coming shortly, but the upcoming version of slideshow will undoubtably use smd_lib – or some variation – as a shared library between the plugins. Anyway, there will be an update soon, but probably not until next week or so.

I also wanted to mention this site I found, which has, I think, a really unique implementation of slideshow: PENG

lee · 2007-03-07 19:48:29

Thank you very much.

.slideshow p {
display: none;
}

fixed my problem.

Vitruvius · 2007-03-11 06:26:41

I have been trying to get this plugin to work for a number of hours and am having no joy.

All I get is the first image inside the div and that is that.

Firebug (in firefox) is telling me that “$E is not defined…” in slideshow.js (line 2).

I am using smd_slimbox – and it is working fine.

I have tried disabling smd_slimbox.

I have tried using uncompressed versions of mootools.js and slideshow.js.

Not sure what else to do – any pointers would be appreciated!

Thanks

SH

Last edited by Vitruvius (2007-03-11 06:27:18)

Vitruvius · 2007-03-11 23:46:47

Stet the above message – I did get it working. It turns out it was a problem with a compressed version of slideshow.js. When I used the uncompressed version of slideshow.js with the compressed version of mootools.js – it did work.

It will be great when/if they are incorporated in smd_lib :)

Just for interest, I’m using the plugin in a slightly different way – to display rotating logos on this page (bottom right)

Thank you again for this great plugin :)

SH

Last edited by Vitruvius (2007-03-11 23:47:21)

lee · 2007-03-12 18:08:50

I tried using the HTML a tag in an image caption and the slideshow stopped sliding (show=“caption” is set) – it just displayed the first image without a caption. I’m not really sure if slideshow is supposed to do this or not of if there is a proper way to have clickable captions. Cheers, Lee

rloaderro · 2007-03-12 18:22:07

lee wrote:

I tried using the HTML a tag in an image caption and the slideshow stopped sliding (show=“caption” is set) – it just displayed the first image without a caption. I’m not really sure if slideshow is supposed to do this or not of if there is a proper way to have clickable captions. Cheers,

Yes, just make sure the quotes in your html are single-quotes so they don’s conflict with the javascript itself:

<a href='http://link.to.somewhere' title='click this'>Check this out</a>

If that makes sense. Actually I have made this fix (automatic quote escaping) in the latest version of the plugin I have locally. Hopefully I can update the available version soon…

lee · 2007-03-12 19:49:25

Thanks, that fixed it.

jgdobbins · 2007-03-17 07:00:57

Aeron, I made a few puzzled and feeble attempts to adapt version 2 to my site and suddenly, in a flash of inspiration, inserted a custom_field, then a simple txp:if_custom_field call in the default form, and with the <aro_slideshow… script in the article’s newly assigned cutom field, VOILA!!! It Works!…BEAUTIFULLY MAN…IT’s Wonderful!!! Many thanks for this new version. It is fantastic. You can see mine in action here:

www.n4mdesign.com/

Hats off to you amigo, you do great work and ‘empower the people’! Saludos

Textpattern CMS

Textpattern CMS support forum

#16 2007-03-05 15:26:37

Re: aro_slideshow v2

#17 2007-03-05 15:29:52

Re: aro_slideshow v2

#18 2007-03-05 15:32:44

Re: aro_slideshow v2

#19 2007-03-05 15:39:29

Re: aro_slideshow v2

#20 2007-03-05 16:03:37

Re: aro_slideshow v2

#21 2007-03-06 22:40:12

Re: aro_slideshow v2

#22 2007-03-07 19:17:17

Re: aro_slideshow v2

#23 2007-03-07 19:22:03

Re: aro_slideshow v2

#24 2007-03-07 19:48:29

Re: aro_slideshow v2

#25 2007-03-11 06:26:41

Re: aro_slideshow v2

#26 2007-03-11 23:46:47

Re: aro_slideshow v2

#27 2007-03-12 18:08:50

Re: aro_slideshow v2

#28 2007-03-12 18:22:07

Re: aro_slideshow v2

#29 2007-03-12 19:49:25

Re: aro_slideshow v2

#30 2007-03-17 07:00:57

Re: aro_slideshow v2

Board footer