smd_gallery: super-flexible gallery generator

progre55 · 2008-05-30 11:47:28

Cuda:

Thanks for the response. I did not realize how indepth Bloke made the instructions until I loaded the plug in. He even has a slideshow sample. Lesson learned, never underestimate Bloke. : )

I followed the instructions, but have come across a hitch. First, I know that the plug in is working, because I see image 1. If I remove image 1 from the category, then I see image 2.

My problem is that I cannot get the slideshow effect to work. I know that the problem is this part of the instructions:

<script type="text/javascript">
myShow1 = new Slideshow("slideshow1",
  { hu: "<txp:site_url />images/",
    images: [{imglist}],
    captions: [{alt}],
    classes: ["prev","next","active"],
    type: "fade"
  });
</script>

I have been unsuccesful in marrying the above to Aaron’s Slideshow 2. I have tried several combinations and placements with no success.

The effect I am trying to achieve is a simple bottom up wipe with a set number of pictures automatically.

Any guidance by yourself or Bloke would be appreciated. I am continuing to dig.

To be complete, the following is how I have things set up:

<head>

<script type="text/javascript" src="/js/mootools.js"></script>
<script type="text/javascript" src="/js/slideshow.js"></script>

<tag>

<txp:smd_gallery category="main" form="gallery" combo="imglist:{id}{ext}" collate="quote:{imglist}:{alt}" />

<form>

<div class="slideshow" id="slideshow1">
 <img src="<txp:site_url />images/{id#1}.jpg"
     alt="{alt#1}" width="{width#1}" height="{height#1}" />
</div>

Thanks.

progre55

Last edited by progre55 (2008-05-30 12:03:20)

cuda · 2008-05-30 14:04:59

first check your javascript paths, use an absolute path to make sure the js is being included also I think you need to include the slideshow.css file. From andrews example this is the JS output you are looking for in your head.

 window.addEvent('domready', function(){
	    var data = {
	      '1.jpg': { 'caption': 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.' },     
              '2.jpg': { 'caption': 'Quisque ut neque. Nam ultricies.' },	    
              '3.jpg': { 'caption': 'Curabitur aliquam velit id odio.' }
	    }
	    var myShow = new Slideshow('my_show', data, { captions: true, controller: true, hu: 'images/' });
	  });

But maybe bloke can chime in and give the best way to get this output….trying to wrap my head around the combos and collate modes…..to early in the morning

Bloke · 2008-05-31 09:41:24

Thanks for stepping in, cuda; sorry for the delay.

Progre55, the way Aeron has designed Slideshow 2 differs from the example in the plugin help but the principle is the same (note to self: make a Slideshow 2 example).

You still use collate mode to gather together all the images you want to display and then call the gallery form once to populate the various javascript pieces. Thus, you would probably do this (untested)…

Tag:

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

What that does is put the plugin in collate mode and collect together all images in category the_cat into a long comma-separated list (since delim defaults to a comma). It puts quotes round each entry, i.e. if your category had 6 images in it numbered 1, 3, 5, 7, 9 and 11 the value of {imagedef} might be this: '1.jpg', '3.jpg', '5.png', '7.jpg', '9.jpg', '11.jpg'. It’s important to note that every replacement variable gets the same treatment, so for example, {ext} would be .jpg, .jpg, .png, .jpg, .jpg, .jpg. The difference is that we haven’t told the plugin to put quotes round each item in {ext}.

Since slideshow requires the javascript data variable to contain a list of quoted image file names in square brackets we can now just drop {imagedef} into the relevant place in the form. But because every item in every replacement array is a list, and the my_show div requires just the first one on initialisation, we must add #1 to every replacement variable name here to pull out only the first entry from the list.

So, the gallery form is something like:

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

Note that I’ve included another variable {imagepath} in the ‘hu’ option (only outputting the 1st path since we can assume all images are in the same directory, right?). You could hard-code that as 'images/' if you like but then if you moved the image directory in future, the form would have to be changed to reflect the new location.

Incidentally, I’m just guessing the myShow.start(); bit. I can’t see in Aeron’s demo page how it works (it’s too damn clever for me!)

As for the ‘slide up wipe’ part, that will be an option you supply to the slideshow plugin. Have a look at the mootools documentation to see if there’s a built-in transition that does that and add, say, , transition: Fx.Transitions.wipeUp} (or equivalent) as an option to the new Slideshow line inside the { }.

Does that help at all?

Last edited by Bloke (2008-05-31 09:46:38)

jelle · 2008-05-31 09:58:30

Hi,

I was looking for simple and good looking gallery. I found Galleria: http://devkick.com/lab/galleria/

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

Very nice in combination with smd_gallery.

keith · 2008-06-01 02:07:37

Thanks for that, Jelle – it looks great!

Bloke · 2008-06-01 07:03:35

Yes, thanks jelle. Looks a perfect fit for TXP and smd_gallery; can’t wait to see a site that combines them…

jstubbs · 2008-06-01 17:18:54

Stef, I’m trying to find a simple way to insert a single image into an article, but not seeing the best way. I would like to use the thumbnail image in the article, with the larger image displaying on an image click.

I am using Fancy Zoom on this site along with smd_gallery, and all works beautifully. Its only the single image in an article that stumps me a little. Ideally, it would be great to insert a single image using upm_image.

Is that possible?

cuda · 2008-06-02 01:57:47

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

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

progre55 · 2008-06-02 15:03:53

Bloke:

Sorry for the delay in getting back to you, but unfortunately your response did not solve the problem. Even if I disregard the transition part, following your instructions I do not get a slideshow.

What I get is it acted like a “lightbox” type effect. It shows the first image with the category “main”, with a delay. When you click on the image it opens up a new window of that image. I also get five bullet points after the image itself.

If this helps, I get an error on the page message that states “Object does not support this method” and is referring to the part of the code that I belive is “myShow.start();” Also, when I scroll over the actual images I see the path as “images//3.jpg”

If I view the source code, I have the following:

<div id="my_show" class="slideshow">
  <a rel="lightbox" href="3.jpg"><img src="http://www.xxxxxx.com/images/3.jpg" alt="" /></a>
</div>
<script type="text/javascript">
  var data = ["3.jpg","4.jpg"];
  var myShow = new Slideshow('my_show', data, {controller: true, hu: 'http://www.xxxxxx.com/images/', linked: true});
  myShow.start();
</script>

The following is my tag:

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

The following is my gallery form:

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

The following is my header:

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

As always, I greatly apprecaite your assiatnce. Let me know if I missed anything that may be important to the puzzle.

progre55

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

Textpattern CMS

Textpattern CMS support forum

#76 2008-05-30 11:47:28

Re: smd_gallery: super-flexible gallery generator

#77 2008-05-30 14:04:59

Re: smd_gallery: super-flexible gallery generator

#78 2008-05-31 09:41:24

Re: smd_gallery: super-flexible gallery generator

#79 2008-05-31 09:58:30

Re: smd_gallery: super-flexible gallery generator

#80 2008-06-01 02:07:37

Re: smd_gallery: super-flexible gallery generator

#81 2008-06-01 07:03:35

Re: smd_gallery: super-flexible gallery generator

#82 2008-06-01 17:18:54

Re: smd_gallery: super-flexible gallery generator

#83 2008-06-02 01:57:47

Re: smd_gallery: super-flexible gallery generator

#84 2008-06-02 15:03:53

Re: smd_gallery: super-flexible gallery generator

#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

Board footer