smd_gallery: super-flexible gallery generator

ff0000.it · 2012-03-23 11:09:31

uli wrote:

It’s been a while since I last used smd_gallery but from what I see you’re using replacement tags outside the gallery tag. Try placing the script tag inside the form (try above or below the HTML, like I said: it’s been a while).

Thanks Uli, now the Javascript error is gone… i messed up something else, but it seems to be going on the right way :-)

Last edited by ff0000.it (2012-03-23 11:29:13)

ff0000.it · 2012-03-27 08:44:31

The slideshow won’t work… damn It||me… It seems to produce the code:

<div id="frontpage-slideshow" class="slideshow">
 <div aria-labelledby="Slideshow-1332837225729" style="height: 300px; width: 400px;" class="slideshow-images">
  <a id="">
   <img style="display: none;" src="http://local.textpattern/images/18.png" alt="" height="425" width="760">
  </a>
  <a id="">
   <img id="" style="display: none;" src="http://local.textpattern/images/18.png" alt="" height="425" width="760">
  </a>
 </div>
 <div id="Slideshow-1332837225729" role="description" aria-hidden="false" aria-busy="false" class="slideshow-captions">
 </div>
 <div role="menubar" aria-hidden="true" class="slideshow-controller">
  <ul role="menu">
   <li class="first">
    <a title="Shift + Leftwards Arrow" tabindex="0" role="menuitem"></a>
   </li>
   <li class="prev">
    <a title="Leftwards Arrow" tabindex="1" role="menuitem"></a>
   </li>
   <li class="pause">
    <a class="" title="P" tabindex="2" role="menuitem"></a>
   </li>
   <li class="next">
    <a class="" title="Rightwards Arrow" tabindex="3" role="menuitem"></a>
   </li>
   <li class="last">
    <a class="" title="Shift + Rightwards Arrow" tabindex="4" role="menuitem"></a>
   </li>
  </ul>
 </div> 
 <div role="progressbar" class="slideshow-loader" aria-hidden="false"></div> 
 <div style="overflow: hidden;" role="menubar" class="slideshow-thumbnails">
  <ul style="left: 0px; position: absolute; top: 0px;" role="menu">
   <li id="Slideshow-13328372257860">
    <a tabindex="0" role="menuitem" href="hu" class="slideshow-thumbnails-hidden"><img src="hu"></a>
   </li>
   <li id="Slideshow-13328372257861">
    <a tabindex="1" role="menuitem" href="images" class="slideshow-thumbnails-hidden"><img src="images"></a>
   </li>
   <li id="Slideshow-13328372257862">
    <a tabindex="2" role="menuitem" href="captions" class="slideshow-thumbnails-hidden"><img src="captions"></a>
   </li>
   <li id="Slideshow-13328372257863">
    <a tabindex="3" role="menuitem" href="classes" class="slideshow-thumbnails-hidden"><img src="classes"></a>
   </li>
   <li id="Slideshow-13328372257864">
    <a tabindex="4" role="menuitem" href="slide" class="slideshow-thumbnails-hidden"><img src="slide"></a>
   </li>
   <li id="Slideshow-13328372257865">
    <a tabindex="5" role="menuitem" href="type" class="slideshow-thumbnails-hidden"><img src="type"></a>
   </li>
  </ul>
 </div>
</div>
<script type="text/javascript">
var frontpage_slideshow =
  new Slideshow("frontpage-slideshow",
                { hu: "http://local.textpattern/images/",
                  images: ["18.png","17.png","16.png","15.png","14.png","13.png"],
                  captions: ["","","","","","Alternate text - Canvas blue - en"],
                  classes: ["prev","next","active"],
                  slide: 1,
                  type: "fade"
                });
</script>

But it won’t at all: all images are styled with “display: none”. Any hint on this one?

Cheers,
ff0000.it

ff0000.it · 2012-03-28 07:10:47

Hi all,

finally I get the slideshow working! :-)
Here’s the working solution for a basic slideshow (I don’t play with slideshow2 options yet):

In the page

<txp:smd_gallery category="frontpage-slideshow-1"
                 combo="images=>'{id}{ext}':{'caption':'{alt}'}"
                 collate="quote:{images}:{alt}"
                 form="frontpage_slideshow" 
                 paramdelim="=>" />

Differences between the example on the plugin’s help are “paramdelim” and “combo” variables, you’ve to set “paramdelim” to something else than the default ‘:’, because the “combo” variable has to describe a JS object so you need ‘:’ to be a free character and not to be parsed by the plugin.

In the form

<div id="frontpage-slideshow" class="slideshow">
  <img src="<txp:site_url />images/{id#1}{ext#1}"
      alt="{alt#1}" />
</div>
<script type="text/javascript">
var frontpage_slideshow =
  new Slideshow("frontpage-slideshow", {{images}},
                { hu: "<txp:site_url />images/",
                  captions: true,
                });
</script>

Here the combo “images” are sorrounded by “{…}” and becomes a JS object as show from the source code of slideshow2’s first example [http://www.electricprism.com/aeron/slideshow/example1.html.

As a TXP newbie I couldn’t know if I do the homeworks in the right way, but It works :-P
Kudos to Bloke for this flexible plugin, you’ve done a great work!

Cheers,
ff0000

RedFox · 2012-04-18 04:27:07

tag > <txp:smd_gallery category="kostuums" form="gallery" thumblimit="3" thumb="0" debug="0" />

form > <a rel="lightbox-{category}" href="{url}" title="A picture of {caption}"> <txp:thumbnail id="{id}" /> </a>

As far as I understand smd_gallery … it should render 3 thumbnails showing a lightbox of 12 images (category=kostuums) … but it shows all thumbnails … !?

Any help is appreciated.

Last edited by RedFox (2012-04-18 05:11:06)

Bloke · 2012-04-18 08:05:26

RedFox wrote:

it should render 3 thumbnails showing a lightbox of 12 images (category=kostuums) … but it shows all thumbnails

If you’re using thumblimit you need to use the (badly named, sorry) {object} replacement tag in your form/container. That understands the thumblimit attribute and applies it. If you want to customise the output of the {object} replacement, use objectform.

Hope that helps.

RedFox · 2012-04-18 10:49:19

Bloke wrote:

If you’re using thumblimit you need to use the (badly named, sorry) {object} replacement tag in your form/container.

form is now > <a rel="lightbox-{category}" href="{url}" title="A picture of {caption}"> {object} </a> … and (of course) smd_gallery is working as intended … :)

I wonder … is it possible to define three specific thumbnails from the gallery?

Bloke · 2012-04-18 11:05:48

RedFox wrote:

is it possible to define three specific thumbnails from the gallery?

Not unless you bring them ‘to the top’ of the list by some other means, e.g. manipulating/abusing the sort attribute or maybe putting them in a separate category and then bringing both the ‘thumbnail’ category and ‘actual image’ categories together into one gallery via the category attribute. Not sure how successful it’ll be, but it might be worth five minutes of experimentation. Note also that sort="fixed" is a valid option.

RedFox · 2012-04-18 11:25:39

<txp:smd_gallery category="kostuums" form="gallery" thumblimit="3" thumb="0" debug="0" sort="fixed" id="38,52,53" />

:)

Zubanoid · 2012-04-29 11:35:20

Hi all,
I have been trying to get this plug in going and am probably missing something simple here. So, forgive me for not trawling through forums to find the answer!

First of all, here is the site I’m working on: http://www.linesinthesand.com.au (if the site has a Flash player, this means I have reverted it back to it’s original condition – I have inherited this site…..)

I have installed smd_lib & smd_gallery ok. I have an article on the page with images assigned to it.

Could someone please give me step by step instructions on what I need to do to get it working? What doe do I need to put where? Do I only need code in an article or do I need it in a form as well?

Note, I’m relatively new to Textpattern. Usually I use Joomla or Wordpress….

Cheers

Zubanoid · 2012-04-30 00:47:20

Hi again,

In the page I have:

<txp:smd_gallery category="frontpage-slideshow-1"
                 combo="images=>'{id}{ext}':{'caption':'{alt}'}"
                 collate="quote:{images}:{alt}"
                 form="frontpage_slideshow" 
                 paramdelim="=>" />

In the form I have:

<div id="frontpage-slideshow" class="slideshow">
  <img src="<txp:site_url />images/{id#1}{ext#1}"
      alt="{alt#1}" />
</div>
<script type="text/javascript">
var frontpage_slideshow =
  new Slideshow("frontpage-slideshow", {{images}},
                { hu: "<txp:site_url />images/",
                  captions: true,
                });
</script>

The output HTML is:

	<div id="frontpage-slideshow" class="slideshow">
  <img src="http://www.linesinthesand.com.au/images/63.jpg"
      alt="" />
</div>
<script type="text/javascript">
var frontpage_slideshow =
  new Slideshow("frontpage-slideshow", {'63.jpg':{'caption':''},'64.jpg':{'caption':''},'65.jpg':{'caption':''},'66.jpg':{'caption':''},'67.jpg':{'caption':''},'68.jpg':{'caption':''},'69.jpg':{'caption':''},'70.jpg':{'caption':''},'71.jpg':{'caption':''},'72.jpg':{'caption':''},'73.jpg':{'caption':''}},
                { hu: "http://www.linesinthesand.com.au/images/",
                  captions: true,
                });
</script>

The images are there and loading at least one… Please see here: http://www.linesinthesand.com.au

Any suggestions??? Help!

Cheers
Bill

{Edited to add bc.’s for better code display. – Uli}

Last edited by uli (2012-04-30 10:57:24)

jakob · 2012-04-30 06:47:34

Hi Bill,

Not quite sure what your question is, and I’m not so familiar with using smd_gallery in combo-mode, but it looks like you are going about things the right way.

If you’re wondering why the slideshow isn’t starting, the js-console (in web inspector) shows an error 16 ReferenceError: Can't find variable: $type which might be the reason. Possibly it’s a mootools / plugin incompatibility – the plugin says it was written for mootools 1.2 but you’re using 1.4.5 and I’ve found that either using the compatibility version of a newer mootools version or reverting back to an earlier version of mootools often helps.

Also, if you put curly brackets around {caption} in your first code snippet, you should get correct caption output instead of the word ‘caption’.

Note: you can use bc.. paste your multi-line code here and then a blank line and then p. Start a new normal sentence after code block to insert your code into posts cleanly.

Zubanoid · 2012-04-30 07:25:55

Thanks Jakob.

I have put mootools 1.2.5 but still no luck :( I can see an error in Firefox – Slideshow is not defined…

I’m not really a programmer so I’m not very good a debugging! Any chance you could take another look at it? http://www.linesinthesand.com.au

Cheers
Bill

Textpattern CMS

Textpattern CMS support forum

#901 2012-03-23 11:09:31

Re: smd_gallery: super-flexible gallery generator

#902 2012-03-27 08:44:31

Re: smd_gallery: super-flexible gallery generator

#903 2012-03-28 07:10:47

Re: smd_gallery: super-flexible gallery generator

In the page

In the form

#904 2012-04-18 04:27:07

Re: smd_gallery: super-flexible gallery generator

#905 2012-04-18 08:05:26

Re: smd_gallery: super-flexible gallery generator

#906 2012-04-18 10:49:19

Re: smd_gallery: super-flexible gallery generator

#907 2012-04-18 11:05:48

Re: smd_gallery: super-flexible gallery generator

#908 2012-04-18 11:25:39

Re: smd_gallery: super-flexible gallery generator

#909 2012-04-29 11:35:20

Re: smd_gallery: super-flexible gallery generator

#910 2012-04-30 00:47:20

Re: smd_gallery: super-flexible gallery generator

#911 2012-04-30 06:47:34

Re: smd_gallery: super-flexible gallery generator

#912 2012-04-30 07:25:55

Re: smd_gallery: super-flexible gallery generator

Board footer