[pmwiki-users] Galleria

Petko Yotov 5ko at 5ko.fr
Sat Jun 11 07:41:51 CDT 2011


On Saturday 11 June 2011 06:27:51, DaveG wrote :
> On 6/10/2011 11:18 PM, DaveG wrote:
> >> The example will not work in PmWiki without some tweaking, but it
> >> shouldn't be hard.
> > 
> > Thanks, that seems like a workable solution, although I've not yet been
> > able to find a selector that can get text after the BR.
> 
> Unfortunately I can't yet get it to work in the context:
> $('#demo').galleria({
...

I looked briefly at the recipe and here is what I found.

1. When your image is in a bulletted list, the "| Caption" part is not 
converted to "<br/>Caption" and the image is not wrapped in a div. Tell your 
users to wrap the Caption with (for example) double apostrophes which PmWiki 
uses for italics/emphasized text, and jQuery can easily identify.

2. I don't need the (:galleria list=#section:) markup if I use one CSS class 
"Galleria", and let the library find all such blocks automatically:

>>Galleria<<
* Attach:Im1.jpg"Title1" | ''Some caption1, including %red% styles%%.''
* Attach:Im2.jpg"Title2" | ''Some caption2, including %green% styles%%.''
>><<
A 2nd Calleria will also work in the page, even without bulletted list.
>>Galleria<<
Attach:Im3.jpg"Title3" | ''Some caption3, including %red% styles%%.''
Attach:Im4.jpg"Title4" | ''Some caption4, including %red% styles%%.''
>><<

3. Here is the javascript that goes to the HTML he	ader. I have it in 
config.php, you should adapt it for the recipe, probably allowing width and 
height to be configurable:

$HTMLHeaderFmt['galleria-js'] = '<script type="text/javascript"
  src="$PubDirUrl/galleria/galleria-1.2.3.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
  $(".Galleria").galleria({
    width: 500,
    height: 400,
    dataConfig: function(img){ 
      return { description: $(img).nextAll(\'em\').html() }; 
    }
  });
});
//--></script>';

This snippet will take care of all Galleria blocks without the need to specify 
id=#demo etc., contrary to next(), nextAll() finds the 'em' element even after 
a <br/> break.

This works, I'll leave it to you to incorporate it in your recipe, if you 
wish. :-)

Petko



More information about the pmwiki-users mailing list