Picures in captions to new floatbox?

Page: 1

Author Post
Wombat23
Guest
Floatbox is exactly the look I wanted - nice job!

I have a gallery set up (www.annas-blank-canvas.com/test/). I want to have at least two images in the caption area(in addition to the caption), that when clicked open another floatbox within the first floatbox. My goal is to allow people to scroll through the paintings, and have a couple of images in the caption areas that are detail shots that they can click on if they are interested. When they click, this would open a "stacked" floatbox. These detail shots would be different for each painting.

I tried to get this going on the first image - it didn't work like I hoped. I attempted to modify the "info" command.

Can you post what script I would need to put in there to get it to work? My detail files are *.jpg.
Administrator
Registered: Aug 2008
Posts: 3382
It sounds like you want to do this by putting html in the caption. You can put any html you like in a caption. Just be sure to surround it with back-quotes (`) and escape all the html entities in the caption string.

For example, for html like this:
<a href="detail.jpg" rel="floatbox"><img src="detail_thumb.jpg" /></a>
you would set a caption like this:
caption:`&lt;a href=&quot;detail.jpg&quot; rel=&quot;floatbox&quot;&gt;&lt;img src=&quot;detail_thumb.jpg&quot; /&gt;&lt;/a&gt;`

You may also be interested in using popup thumbnails here. See the "Popup thumbnail" example on the demo page.
Wombat23
Guest
I'm not getting this to work. This is the code I have for the first picture. I want to have text one line and then a small thumbnail or two underneath the text (but above the "image 1 of 14" line) that when clicked open up a stacked floatbox.

<a title="The Young Explorer - $3000" href="The Young Explorer.jpg" rel="floatbox.group" rev="caption:'Alayna <a href="The Young Explorer.jpg" rel="floatbox"><img src="The Young Explorer.jpg /></a>'" ><img title="The Young Explorer" height="158" hspace="0" src="The Young Explorer.jpg" width="127" border="0" ></p></a></td>

The page is http://www.annas-blank-canvas.com/test/

Thanks for your help!
Administrator
Registered: Aug 2008
Posts: 3382
Please don't take offense at my bluntness, but you're not paying attention.

To repeat...

You have to surround the caption string in backquotes. They look like this: `
It's the character that shares the ~ key. You've used a standard single quote character.

You have to escape html entities in the caption string. That is, <=&lt; >=&gt; "=&quot;

Take a look at the example I quoted earlier. You're getting close.
Wombat23
Guest
Thanks - I got the floatbox working (awesome!!!), but now all my text is bold. I went through everything I could find and tried adding some CSS to fix it, but my text is still bold. Is this something floatbox is causing?

http://www.annas-blank-canvas.com/test/
Administrator
Registered: Aug 2008
Posts: 3382
I'm getting the following error in the caption with Chrome:
Quote
This page contains the following errors:
error on line 1 at column 150: Opening and ending tag mismatch: br line 0 and div
Below is a rendering of the page up to the first error.


Try changing &lt;br&gt;&lt;br&gt; to &lt;br /&gt;&lt;br /&gt;

The above change may fix your problem and so you may not need the css section you have at the top of the page. However, there are errors in that css section. You're missing required ";" chars. It should look like...
<style type="text/css"> 
h1 {font-size: 100%; font-style: normal;}
h2 {font-style: normal;}
p {font-weight: normal; font-size: 2px; font-style: normal;}
a {text-decoration:none;}
</style>
Wombat23
Guest
Everything looks great now - thanks for the help! I posted a link for your site.

Page: 1