Anyone able to use options in rel attribute

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

Anyone able to use options in rel attribute

manfer
This post was updated on .
The docs of shadowbox claims there is a method to configure all shadowbox options within the rel attribute of a link.

And this is really a useful feature if you want to have things in the same page with different behaviour. For example you can have an image gallery that you want to display in shadowbox as a slideshow. You have a videoclip that you want opened in shadowbox with a different overlay color than default. You have a swf movie that you want to opened in shadobox to which you want to pass flashvars.

Although, maybe this is probably better done with js shadowbox API functions (open and setup), using rel attribute to configure options would be nice too.

The rel attribute method would be something like this:

<a href="myfile.swf" rel="shadowbox; width=640; height=480;
options={flashVars: {var:'yeah'}, overlayColor:'#F00'}">Open me in shadowbox</a>

The question is, someone is able to use that method? If I'm correct this feature is broken and looking to the date of the file that contains the bug it is broken for a year now at least. I think this has been reported a lot of times because nobody was able to pass flashVars in rel attribute but nothing has been done to resolve this issue or if it has been resolved here (I have not read all threads or done an in depth search to be sure of that) it has not been commited to shadowbox.

I'm surprise because it is not so difficult to debug, you only need firebug to look what's wrong (once you include debug code to track the problem) with that options parameter and for a person familiarized with the code should be a matter of minutes to find the bug once it has been reported and you are pointed to an error on options passed with rel attribute. It took me a little more that some minutes because I was not familiarized with the code. Besides I first lost a lot of time trying to figure out if there where something wrong on my syntax. At first I couldn't imagine an error on code but in my syntax. If you look for the correct syntax some people has experimented a lot of different ones without realizing themselves it is not a problem of syntax but a bug. And when you look for the bug it is there and it is not very difficul to find it.

If I do this too long post is because I'm a little disgusted about the fact that this is a paid library for commercial use and seems to have a very poor support.

It's amazing a reported and simple bug like this is around for a year. I really even don't know if I should contribute an explonation on what is wrong and how to solve it.

I'm sorry to have to write this but it is because in my effort to find what was wrong I saw a lot of issues, many of them claiming they have pay for the library and they don't have even an answer.
Reply | Threaded
Open this post in threaded view
|

Re: Anyone able to use options in rel attribute

manfer
options is not working inside rel attribute because a simple reason. When shadowbox gets the content of rel attribute he is extracting an string. So the content of options is going to be a string and if it is done correctly it should be a JSON string. And there is not an automatic cast in javascript that would cast the JSON string into an object. So, to correct this we need to parse the JSON string. This can be done in the shadowbox file core.js, in the function at lines 385-388 which actual code is as follows:
S.applyOptions = function(options) {
  lastOptions = apply({}, S.options);
  apply(S.options, options);
}
We have to parse that options parameter when it is a JSON string. And how can we do that? We can use eval:
options = eval('(' + options + ')');
but there can be security issues when used because it can execute code. So it is not the best solution. Other solution is to use a JSON parser. A proper solution is to use the JSON.parse function of the open source JSON parser json2.js by Douglas Crockford.
options = JSON.parse(options);
In most recent browsers this JSON.parse function is native and very fast and json2.js will use that native version unless not available (older browsers). The other thing to take into account is this parser will only accept text that comply with JSON syntax. So the modified code to make shadowbox be able to accept options in rel attribute is:
S.applyOptions = function(options) {
  lastOptions = apply({}, S.options);
  if (typeof options == "string") options = JSON.parse(options); 
  apply(S.options, options);
}
And if we want it to work for old browsers too, we have to import in HEAD the json2.js library. And as I just explained above, we have to use correct JSON syntax. So an example of a shadowbox link would be:
<a href='example.swf' rel='shadowbox;width=500;height=200;
options={"flashVars":{"myvar":"myvalue"},"overlayColor":"#F00"}'>Inline shadowbox options</a>
Look at the quotations to comply to JSON syntax.

And that's all, with that change you'll have a shadowbox library that supports per link inline configuration of options within rel attribute.
Reply | Threaded
Open this post in threaded view
|

Re: Anyone able to use options in rel attribute

Carla
In reply to this post by manfer
Thanks for share it =)

But I still having problems. The SWF item opens in a new window, while the images opens in shadowbox properly. Maybe I'm forgetting something.

In the minifier file I found the function
S.applyOptions=function(options){lastOptions=apply({},S.options);apply(S.options,options)};
I copied+pasted the your function at this place

The HTML:
< a href="video.swf" rel='shadowbox[media];options={"flashVars":{"video_id":"123"}};height=270;width=320' > click to see video 123 < /a>
< a href="video.swf" rel='shadowbox[media];options={"flashVars":{"video_id":"456"}};height=270;width=320' > click to see video 456< /a>
< a href="photo.jpg" rel='shadowbox[media]' > click to see a photo < /a>


Before change the js funciton the SWF file was opening in shadowbox without pass the flashvars.
Now, after change the funcion, SWF opens in a new window without pass the flashvars.

Any idea?
Reply | Threaded
Open this post in threaded view
|

Re: Anyone able to use options in rel attribute

Chris Pink
In reply to this post by manfer
Yes, is the simple answer.

Shadowbox is a free piece of software. For you to use the word 'disgusting' is in itself disgusting.

I wish to publically say Thank You to the developers of Shadowbox for a wonderful piece of software I have been using for years.

And for your information, it is not broken. I have just made this;

a href="images/myImage.png" rel="shadowbox[marker];options={continuous:false,slideshowDelay:0}"

to override a slideshow in the init code.

and it works perfectly.

So it is your debugging, or your expectations that are at fault.

Please take your rudeness elesewhere.