dwheeler

Topic: captions with line breaks?

Hi everyone,

I want to set the captions in "art label" form like this:

Title
Medium
Size

I can't figure out how to separate it into these three tiers?  Is it possible?

Thanks for any help,
Dan

SpicyNumberOne

Re: captions with line breaks?

Did you ever find out how to do this? I have the same question. I've been searching everywhere and the answers I get never quite do it.

dwheeler

Re: captions with line breaks?

I did.  I found it under FAQ I think?  It was "adding html to your captions" or something.
I had to change a line of code in the jquery.galleria (around line 310...) to be this:
    _wrapper.siblings('.caption').html(unescape(_thumb.attr('title')));

Then for the gallery pages it would look like this for titles:
       title="<b>Artwork Name</b><br> Oil on Canvas <br> 8.5 x 11 inches"></li>

So I had a bold name, next line medium, next line dimensions.

skrupsky

Re: captions with line breaks?

this works...but it doesn't seem to validate in the HTML...tags aren't allowed in attributes?
is there anything you can do to get around this?

Georgio

Re: captions with line breaks?

Mate, think there is no way on earth on how to get around HTML rules... I've got my own idea of using a simple DIV as a caption instead the attribute "title"  as DIV is fully flexible in terms of applying CSS.
The partial solution is here:
You can create a DIV and put it after the <img> tag but still within the <li> </li> tags.Then put any text inside and style it as you wish. But by doing this you are loosing the fading effect... which is. So my effort at the moment is to find on how to apply jQuery fading functions on the DIV to make it fading in and out.

xugular

Re: captions with line breaks?

@ Georgio:

Try adding the code for fading in and fading out your <div> in the onImage function. For example, for a div's id = "divCaption"

onImage   : function(image,caption,thumb) {
   image.css('display','none').fadeIn(500);
   caption.css('display','none').fadeIn(500);
   
   $("#divCaption").css('display','none').fadeIn(500);

   var _li = thumb.parents('li');
   _li.siblings().children('img.selected').fadeTo(500,0.3);
   thumb.fadeTo('fast',1).addClass('selected');
}

Last edited by xugular (2008-11-23 02:45:40)

Georgio

Re: captions with line breaks?

@xugular
Hey mate,
THANKS HEAPS for your post !! - the text placed in the DIV now perfectly fades up.

benson

Re: captions with line breaks?

How did you get the div to display a different caption for each pi/thumbnail? Thanks.

Georgio

Re: captions with line breaks?

Mate, my excitement was a bit early - I guess you're experiencing the same problem like me when the first caption doesn't fade out and sits there even though the second caption comes up.
The only working solution at the moment is abandon the fading effect and leave only DIV's instide <li> </li> tags (styled as you wish) that somehow work and do replace each other correctly. But I'm still trying to find out how to make it working with the fade in/out effect.

eldowan

Re: captions with line breaks?

dwheeler wrote:

Hi everyone,

I want to set the captions in "art label" form like this:

Title
Medium
Size

I can't figure out how to separate it into these three tiers?  Is it possible?

Thanks for any help,
Dan

I've done something similar, try this:

In the li where the image is located, place attributes called "ptitle" "pmedium" "psize" with the values as you need like this:
<img src="tb.jpg" ptitle="image title here" pmedium="oil on canvas" psize="10ft by 12ft" />

Edit jquery.galleria.js like so:

Search for this string: "insert the caption"
I have edited mine (version 1.0; line 308) to be the following:

_wrapper.siblings('.caption').html(_thumb.attr('title') + "Title " + _thumb.attr('ptitle') + " <br> Medium " + _thumb.attr('pmedium') + "<br> Size " + _thumb.attr('ptitle'));

If you don't want the image tag title to be displayed in the caption, you should just be able to take out that section and make the above line read as follows:

_wrapper.siblings('.caption').html("Title " + _thumb.attr('ptitle') + " <br> Medium " + _thumb.attr('pmedium') + "<br> Size " + _thumb.attr('ptitle'));

I extrapolated from my simple use with only one custom tag, but this might work for you. If not, is *should* get you near where you want to be.

287d

Re: captions with line breaks?

dwheeler wrote:

Hi everyone,
I want to set the captions in "art label" form like this:
Title
Medium
Size
I can't figure out how to separate it into these three tiers?  Is it possible?
Thanks for any help,
Dan

>>>>>In case anyone else has this issue: I found this: http://monc.se/kitchen/146/galleria-a-j … ment-23403
for you to add linebreaks and other html mark up. Let me know if it works.
(If the link doesn't work go to: http://monc.se/kitchen/146/galleria-a-j … ge-gallery scroll half way down to perry's answer on march 10 )


benson wrote:

How did you get the div to display a different caption for each pi/thumbnail? Thanks.

Not sure but... did you mean a caption per image? It's just the line in the html page where you specify a title for each image, e.g.:
<li><img src="YOUR IMAGE" title="YOUR CAPTION" border="0"/></li>

reef9

Re: captions with line breaks?

Hi,

I successfully used the following code to get html in the caption
_wrapper.siblings('.caption').html(unescape(_thumb.attr('title')));

I now need the onImage rollover text for the thumbnails to display html
in the same manner. I'm not a great javascripter but from the posts
it seems that specifying an onImage function is the answer.  Any help
is much appreciated.