Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

ff0000.it
New Member
From: Italy
Registered: 2012-03-14
Posts: 9

Re: smd_gallery: super-flexible gallery generator

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)

Offline

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

ff0000.it
New Member
From: Italy
Registered: 2012-03-14
Posts: 9

Re: smd_gallery: super-flexible gallery generator

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

Offline

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

ff0000.it
New Member
From: Italy
Registered: 2012-03-14
Posts: 9

Re: smd_gallery: super-flexible gallery generator

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

Offline

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

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 809
Website

Re: smd_gallery: super-flexible gallery generator

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)

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,468
Website GitHub

Re: smd_gallery: super-flexible gallery generator

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.


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

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

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 809
Website

Re: smd_gallery: super-flexible gallery generator

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?

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,468
Website GitHub

Re: smd_gallery: super-flexible gallery generator

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.


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

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

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 809
Website

Re: smd_gallery: super-flexible gallery generator

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

:)

Offline

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

Zubanoid
New Member
Registered: 2012-04-01
Posts: 8

Re: smd_gallery: super-flexible gallery generator

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

Offline

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

Zubanoid
New Member
Registered: 2012-04-01
Posts: 8

Re: smd_gallery: super-flexible gallery generator

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)

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,743
Website

Re: smd_gallery: super-flexible gallery generator

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.


TXP Builders – finely-crafted code, design and txp

Offline

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

Zubanoid
New Member
Registered: 2012-04-01
Posts: 8

Re: smd_gallery: super-flexible gallery generator

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

Offline

Board footer

Powered by FluxBB