smd_gallery: super-flexible gallery generator

visualpeople · 2008-05-28 00:39:56

Wow, that’s quite a catch. I owe you big time!

Funny how it seems so obvious when it’s pointed out to you!

Just in case anyone else is wanting to do this — This is how I get smd_gallery along with some wonderful help from smd_if to determine whether it’s on the first or last page of a gallery.

In my pageform form:

<ul class="navimg">
<txp:smd_if field="{navprevpageurl}" operator="ends" value="=0" > <li><txp:permlink>&lt;</txp:permlink></li>
<txp:else />
{navprev:&lt;}
</txp:smd_if>
<txp:smd_if field="{navthispageurl}" operator="eq" value="{navlastpageurl}" > <li><txp:permlink>&gt;</txp:permlink></li>
<txp:else />
{navnext:&gt;}
</txp:smd_if> 
</ul>

I think I could have used {navfirstpageurl} instead of <txp:permlink> but in this particular instance, I wanted to get back to the actual link to the article rather than just the first image.

Maybe there’s an easier way? But this works great — in fact, does things I didn’t think were possible just a few short days ago. Thanks Bloke!

progre55 · 2008-05-29 16:46:42

Bloke:

Quick question. I have used both your slimbox plug in (which is great) when I have a gallery and Aaron’s slideshow plug in when I needed a straight forward slideshow.

I know that Aaron no longer is supporting his slideshow. I also know that Aaron says moving forward we should move to using your new plug in and combine it with his Slideshow script.

Now I am in a situation where I need a fairly straight foward 6 image slideshow. The “trick” is that I need the transition to be a wipe which works automatically without thumbnails. I am sure this is an easy thing to do with your new plug in, but any guidance would be appreciated.

Thanks.

progre55

Last edited by progre55 (2008-05-30 12:04:23)

cuda · 2008-05-29 21:36:51

This plugin pulls images from your site and formats them to your liking so for the slideshow you would first use a tag like this:

<txp:smd_gallery category=“animals” form=“gallery” /> in your template where you wanted the slideshow then go make a form called “gallery” to do the formating.

and for this slideshow two the formating needs to be like this and the script takes care of the rest:

so the form would be something like this:

then include the appropriate scripts for the slideshow in the head of your document……download the plugin and read the help it is great….also read the documentation on andrews slideshow 2 and then ask any specific questions you may have.

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

Textpattern CMS

Textpattern CMS support forum

#73 2008-05-28 00:39:56

Re: smd_gallery: super-flexible gallery generator

#74 2008-05-29 16:46:42

Re: smd_gallery: super-flexible gallery generator

#75 2008-05-29 21:36:51

Re: smd_gallery: super-flexible gallery generator

#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

Board footer