Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

progre55
Member
Registered: 2006-05-02
Posts: 668

Re: smd_gallery: super-flexible gallery generator

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)

Offline

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

castanet
Member
From: Oxford
Registered: 2005-03-19
Posts: 97

Re: smd_gallery: super-flexible gallery generator

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.

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 8,778
Website

Re: smd_gallery: super-flexible gallery generator

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


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

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

castanet
Member
From: Oxford
Registered: 2005-03-19
Posts: 97

Re: smd_gallery: super-flexible gallery generator

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

Offline

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

zero
Member
From: Lancashire
Registered: 2004-04-19
Posts: 1,174
Website

Re: smd_gallery: super-flexible gallery generator

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


Wondrous Healing 3 wondrous ways to a healthy old age
Safe Reiki Harmless natural healing.

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 8,778
Website

Re: smd_gallery: super-flexible gallery generator

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.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#97 2008-06-06 02:31:35

immarabi
Member
Registered: 2008-04-29
Posts: 57

Re: smd_gallery: super-flexible gallery generator

Thanks for the detail on setting up smd_gallery with Slideshow 2! i am not good with java, hope you all can help me once more

I have just one error. It is in IE 6 and 7. The script won’t run and it says “Error on page” line 74 char 3
‘Slideshow’ is undefined.

This is the section containing line 74 char 3

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

Last edited by immarabi (2008-06-06 02:35:21)

Offline

#98 2008-06-06 12:46:22

progre55
Member
Registered: 2006-05-02
Posts: 668

Re: smd_gallery: super-flexible gallery generator

immarabi:

Did you put the slideshow javascript in the HEADER.

It should look like this:

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

progre55

PS: I updated my previous entry to include the Header section just in case it may have been throwing anyone off.

Last edited by progre55 (2008-06-06 12:50:23)

Offline

#99 2008-06-06 12:48:55

progre55
Member
Registered: 2006-05-02
Posts: 668

Re: smd_gallery: super-flexible gallery generator

Bloke:

I think I saw somewhere where this plug in and your slim box plug in do not play nicely. Is that only if they are on the same page?

I need to use this plug in and combine it with a jqwery slideshow, but other sections/pages of the site use slimbox and I would rather not tinker with those areas.

progre55

Offline

#100 2008-06-06 14:50:04

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 8,778
Website

Re: smd_gallery: super-flexible gallery generator

progre55 wrote:

I think I saw somewhere where this plug in and your slim box plug in do not play nicely.

*gasp* sacrilege :0)

afaik, they play fine together. There’s nothing I can think of in the code that will conflict; the difficulty is with the libraries. If you try and put mootools and jQuery on the same page without some remedial action (on the part of jQuery, since mootools assumes it’s the centre of the universe) then the two will clash. You need to add jQuery.noConflict(); to your page and then they’ll share the sand instead of kicking it in each other’s faces.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

Board footer

Powered by FluxBB