smd_gallery: super-flexible gallery generator

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.

immarabi · 2008-06-06 02:31:35

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)

progre55 · 2008-06-06 12:46:22

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)

progre55 · 2008-06-06 12:48:55

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

Bloke · 2008-06-06 14:50:04

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.

progre55 · 2008-06-06 14:51:05

Bloke:

Thanks for the quick response.

progre55

immarabi · 2008-06-06 17:14:03

progre55 wrote:
Did you put the slideshow javascript in the HEADER.

Yes I did put the correct javascript in the header

There are two errors actually.
‘Slideshow’ undefined

and “expected identifier, string or number” on line 44, which is this in the source:

<div id="my_show" class="slideshow">
  <img src="http://www.xxxxxxxxxx.com/images/16.gif" alt="" />
</div>

you can look at the site here

So anyway, to be more specific, my form, which is called “sshow” looks like this:

<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}'});
</script>

and my tag is this:

<txp:smd_gallery category="catalog" form="sshow" collate="quote:{imagedef}" />

Last edited by immarabi (2008-06-06 17:42:45)

Bloke · 2008-06-06 19:19:38

@immarabi:

Baffling. It looks identical to the example progre55 posted and I can’t see anything that would cause it not to work.

I don’t get the errors you listed and I can start the slideshow by hovering over it, hitting Pause and then hitting Play. So my guess is it’s some kind of auto-start thing? Past that, I’m out of ideas sorry. Anyone?

P.S. if you find out what it is, please post here so we can bask in the knowledge! Ta…

Edit: oh wait, it’s working now. Guess you found the problem…?

Last edited by Bloke (2008-06-06 19:20:22)

immarabi · 2008-06-06 20:02:56

oh wait, it’s working now. Guess you found the problem…?

No, I didn’t! that is weird. Are you sure you were looking in IE. In firefox, everything is fine. You might think that it isn’t working, but that is just because I have it set to stay on the image for 4 sec. which seems like eternity in the internet world

Bloke · 2008-06-06 20:21:14

immarabi wrote:

Are you sure you were looking in IE.

*cough* missed that bit, sorry. I’ll learn to read before posting next time.

What an odd error message. Buggered if I can see anything wrong with the code. In my experience, the usual culprit for the 3rd error — Micro$oft’s catch-all “object expected” — is a namespace clash when you have a js variable and a DOM element with the same name (id). But since the only js on the page is the 2 lines of slideshow or mootools…

In firefox, everything is fine.

Except now I’ve just started receiving an odd error in that too:

Access to restricted URI denied" code: "1012

Never seen that one before either but I wonder if it’s somehow related? Sorry I’m not much help right now.

Last edited by Bloke (2008-06-06 20:21:51)

Textpattern CMS

Textpattern CMS support forum

#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

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

Re: smd_gallery: super-flexible gallery generator

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

Re: smd_gallery: super-flexible gallery generator

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

Re: smd_gallery: super-flexible gallery generator

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

Re: smd_gallery: super-flexible gallery generator

#101 2008-06-06 14:51:05

Re: smd_gallery: super-flexible gallery generator

#102 2008-06-06 17:14:03

Re: smd_gallery: super-flexible gallery generator

#103 2008-06-06 19:19:38

Re: smd_gallery: super-flexible gallery generator

#104 2008-06-06 20:02:56

Re: smd_gallery: super-flexible gallery generator

#105 2008-06-06 20:21:14

Re: smd_gallery: super-flexible gallery generator

Board footer