Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

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

Re: smd_gallery: super-flexible gallery generator

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


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

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

jstubbs
Moderator
From: Hong Kong
Registered: 2004-12-13
Posts: 2,394
Website

Re: smd_gallery: super-flexible gallery generator

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?

Offline

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

cuda
Member
From: Georgia, USA
Registered: 2008-02-06
Posts: 70
Website

Re: smd_gallery: super-flexible gallery generator

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)

Offline

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

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

Re: smd_gallery: super-flexible gallery generator

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

Offline

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

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

Re: smd_gallery: super-flexible gallery generator

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:

  1. ask rloaderro to detect if hu has a trailing slash already and omit the 2nd one if so
  2. Hard-code the path as hu: '/images'
  3. Wait for me to add a feature to remove trailing slashes to the gallery plugin
  1. 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.


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

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

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

Re: smd_gallery: super-flexible gallery generator

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)

Offline

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

cuda
Member
From: Georgia, USA
Registered: 2008-02-06
Posts: 70
Website

Re: smd_gallery: super-flexible gallery generator

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)

Offline

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

jstubbs
Moderator
From: Hong Kong
Registered: 2004-12-13
Posts: 2,394
Website

Re: smd_gallery: super-flexible gallery generator

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.

Offline

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

cuda
Member
From: Georgia, USA
Registered: 2008-02-06
Posts: 70
Website

Re: smd_gallery: super-flexible gallery generator

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)

Offline

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

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

Re: smd_gallery: super-flexible gallery generator

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


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