Efficient Coding, and Gradient Colour

Page: 1

Author Post
Member
Registered: Jan 2012
Posts: 98
What I love about Floatbox is that it will do just everything. What I hate about it is that it won't do it for me!

After a fair bit of trial and error, I have got this working:
<div id="info0" style="display:none"><?php echo $row_co['caption0'];?></div>
<div id="info1" style="display:none"><?php echo $row_co['caption1'];?></div>
<div id="info2" style="display:none"><?php echo $row_co['caption2'];?></div>
<div id="info3" style="display:none"><?php echo $row_co['caption3'];?></div>
<div id="info4" style="display:none"><?php echo $row_co['caption4'];?></div>
<td><a href="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic0'] ?>" class="floatbox" title="<?php echo $row_co['title0'];?>" data-fb-options="className:upload, info:#info0, infoOptions:`width:280, height:100, minBoxHeight: 80, minBoxWidth: 260, boxColor:#f3f3f3, contentBackgroundColor:#f8f8f8`, group:1"><img src="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic0'] ?>"></a></td>
<td><a href="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic1'] ?>" class="floatbox" title="<?php echo $row_co['title1'];?>" data-fb-options="className:upload, info:#info1, infoOptions:`width:280, height:100, minBoxHeight: 80, minBoxWidth: 260, boxColor:#f3f3f3, contentBackgroundColor:#f8f8f8`, group:1"><img src="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic1'] ?>"></a></td>
<td><a href="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic2'] ?>" class="floatbox" title="<?php echo $row_co['title2'];?>" data-fb-options="className:upload, info:#info2, infoOptions:`width:280, height:100, minBoxHeight: 80, minBoxWidth: 260, boxColor:#f3f3f3, contentBackgroundColor:#f8f8f8`, group:1"><img src="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic2'] ?>"></a></td>
<td><a href="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic3'] ?>" class="floatbox" title="<?php echo $row_co['title3'];?>" data-fb-options="className:upload, info:#info3, infoOptions:`width:280, height:100, minBoxHeight: 80, minBoxWidth: 260, boxColor:#f3f3f3, contentBackgroundColor:#f8f8f8`, group:1"><img src="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic3'] ?>"></a></td>
<td><a href="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic4'] ?>" class="floatbox" title="<?php echo $row_co['title4'];?>" data-fb-options="className:upload, info:#info4, infoOptions:`width:280, height:100, minBoxHeight: 80, minBoxWidth: 260, boxColor:#f3f3f3, contentBackgroundColor:#f8f8f8`, group:1"><img src="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic4'] ?>"></a></td>


However there's a lot of code repetition. And it will get even worse when I have ten thumbnails instead of five. I can't wrap the whole lot in a div with the data-fb-options only written once, because there is a little bit of the data-fb-options that isn't repeated exactly. Surely there is a way though?

As the styling of my site has a lot of boxes with gradient colours in them, I would like the info box to do the same. Is that possible? I've tried all the possibilities I can think of, without success.
Administrator
Registered: Aug 2008
Posts: 3382
Are you asking about mechanisms for declaring option preferences once and having them assigned to multiple links? If so, have you looked at the Configuring options section of the instructions, and the 3 or 4 sections that follow that one?

In summary, options can be assigned
--> at the individual link level
--> to a containing div or any other element type
--> at the page level in short script sections
--> site-wide in the options.js file

Intermingled with the above hierarchy is the ability to assign option settings based on class names and content types.

The infoOptions option is not special in this regard and can be assigned through any of those mechanisms. It is special in the sense that 'info...' options can also be assigned through the built-in 'childBox' class options, because all floatboxes opened from info... links are child floatboxes.
Member
Registered: Jan 2012
Posts: 98
That was the area I had been working with, and having problems with. I've had another go with it. I took a lot of stuff out of the individual links so they are now
<td><a href="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic0'] ?>" class="floatbox" title="<?php echo $row_co['title0'];?>" data-fb-options="info:#info0"><img src="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic0'] ?>"></a></td>
<td><a href="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic1'] ?>" class="floatbox" title="<?php echo $row_co['title1'];?>" data-fb-options="info:#info1"><img src="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic1'] ?>"></a></td>
<td><a href="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic2'] ?>" class="floatbox" title="<?php echo $row_co['title2'];?>" data-fb-options="info:#info2"><img src="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic2'] ?>"></a></td>
<td><a href="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic3'] ?>" class="floatbox" title="<?php echo $row_co['title3'];?>" data-fb-options="info:#info3"><img src="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic3'] ?>"></a></td>
<td><a href="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic4'] ?>" class="floatbox" title="<?php echo $row_co['title4'];?>" data-fb-options="info:#info4"><img src="images/cos/<?php echo $row_co['co_id'] ?>/<?php echo $row_co['pic4'] ?>"></a></td>

And I put this script in the head of the page
  fbPageOptions = {
className:upload,
infoOptions:`width:280, height:100, minBoxHeight: 80, minBoxWidth: 260, boxColor:"#f3f3f3", contentBackgroundColor:"#f8f8f8"`,
group:1
};

According to my reading of the instructions, that should work, but it doesn't. It appears that the fbPageOptions is being ignored. I did notice that Dreamweaver says there is a syntax error in the infoOptions line but no amount of fiddling with quotes and commas will satisfy that.

Any thoughts on gradient colour?
Administrator
Registered: Aug 2008
Posts: 3382
Sorry, but I'm not going to decipher server side php code, and don't have any particular thoughts on gradient colours to share. If you're having trouble on a page and need assistance, you will have to link me to that page and tell me exactly what problem to look for there. Experience has shown that problems can only be debugged in the context in which they occur, and that trying to guess what an issue might be by rummaging through purported code snippetss almost never yields results. Got a link, and problem description?
Member
Registered: Jan 2012
Posts: 98
Theres no deciphering to be done on the server-side code. But, OK, when the server has delivered the html to the browser, it will be something like:
<td><a href="images/cos/folder/filename.jpg" class="floatbox" title="Title" data-fb-options="info:#info0"><img src="images/cos/folder/filename.jpg>"></a></td>

Repeated four times over with different images and a different hidden div for the "info".

The point I am trying to make is that the classNameand infoOptions work when they are put into the data-fb-options on each link, but not when they are put into the separate fbPageOptions script.

I didn't give a link to a page because anyone else coming to this thread in the future is likely to find the page has disappeared, or at least changed. But if you feel it helps, it's http://www.made-in-england.info/company.php?co_id=1.

Forget about the gradient colour. I eventually found a snippet of information buried in the documentation that got me a solution.
Administrator
Registered: Aug 2008
Posts: 3382
Thanks for the link and the page to look at. It's not for posterity but so I have somewhere to see what the problem is and why it is happening.

However, the link to the page doesn't help as there are no fbPageOptions set on it and everything that is there seems to be working as it should.

I believe I can read between the lines of your posts and pick up on some frustration around the fact that I haven't been able to simply answer your question or solve your problem. Please bear in mind that you have been very vague in outlining what it is you want assistance with. I'm still not clear about whether you have a question, a problem, or both. As an example, I'm glad the answer to your gradient colours question was found in the docs, but I still have no clue what that question was. I think you will find that there are many "snippets of information buried in the documentation" that cover most aspects of using Floatbox.

With each post I get a little more info about what it is that's giving you grief. I'll take a stab at guessing the exact problem here, and discuss that a little. Maybe we'll get lucky and hit your target.


Certainly, setting infoOptions in fbPageOptions works fine and reliably. Also, setting infoOptions within a link's data-fb-options attributes works fine and reliably. If infoOptions is set in both places, the one on the link takes precedence.

Perhaps you set infoOptions in both fbPageOptions and on the link, and then expected those two settings to blend into a kind of mashup of options from both places. If so, sorry, it just does not work that way. The infoOptions option has the same behaviour as all the other options. If we set colorTheme:red in fbPageOptions and colorTheme:blue on the link options, blue wins. Similarly, if fbPageOptions has an entry for infoOptions and so does the link, then it is the link's infoOptions that will be applied. The infoOptions setting does not get picked apart and blended with infoOptions that are set at a different level.


You can use the classOptions capability to apply a general set of options to info boxes and leave the infoOptions setting available to apply specific settings at the link level. To do this, you would need to reference the class name in the link's infoOptions. An example might help.

Suppose we have a section of classOptions defined, either in the options.js file or in an fbClassOptions definition, that looked like this:
myInfo: {
modal: false,
shadowType: 'halo'
}

Suppose also that there is a link on the page with info and infoOptions set in it like this:

<a href="pic1.jpg" data-fb-options="info:#infoDiv1 infoOptions:`className:myInfo width:777`">click here</a>

We will get a non-modal info box, 777px wide, with a halo shadow.


For both our sakes, I really hope this essay comes close to talking about what you want to talk about. Cheers....
Member
Registered: Jan 2012
Posts: 98
Yes, admin, you are very perceptive: I was getting a bit tetchy, for which I apologise.

You did indeed home in on my problem; that a set of infoOptions that worked on the link (which meant repeating the same stuff 10 times) didn't work in PageOptions or ClassOptions. I've gone back to the subject again now and found that it was an issue of syntax:
On the link, I had to use back ticks around the string of options.
The back ticks were breaking it when used in PageOptions or ClassOptions.
I've now got it working in ClassOptions by using double quotes instead.

I still have a couple of other things to sort out before it all works as required but hopefully I will manage that by myself without having to resort to the support forum again.

Thanks :)

Page: 1