Strange lightbox issue

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
5/25/2011 5:35:54 AM
Silviuz
Gravatar
Total Posts 21
View Posts
Silviuz

Strange lightbox issue

Hi everybody, i'm performing a typical lightbox (2) gallery.

Everything works fine but...
I need to put a link into the caption and to do that i follow the instructions as described here

you need to convert quotes and greater and less than symbols into their html entity equivalents.

I do that and the very first time i save it works fine! BUT when i go back to the editor to modify other things the html structure automatically changes from this

<a href="images/image.jpg" title="SOME TEXT. &lt;a href=&quot;http://www.mojo.com&quot;&gt;PRODUCT SHEET&lt;/a&gt;"> <img alt="" height="70" src="images/imagethumb.jpg" width="70" /> </a>

to this

<a href="images/image.jpg" title="SOME TEXT. &lt;a  data-cke-saved-href=&quot;http://www.mojo.com&quot;&gt;PRODUCT href=&quot;http://www.mojo.com&quot;&gt;PRODUCT SHEET&lt;/a&gt;"> <img alt="" height="70" src="images/imagethumb.jpg" width="70" /> </a>

So it automatically adds the string "data-cke-saved" and repeats part of the link tag (http://www.mojo.com&quot;&gt;PRODUCT href=&quot;) causing a bad display of the link

If i delete the parts in bold everything works perfectly....but if i go back to the editor...crash!
Can anyone help me solve this problem?

Thanks

5/25/2011 1:08:12 PM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Strange lightbox issue

Hi Silviuz,

Well it looks like a strange way to to add a link to the caption by adding an html link as the title.  Probably the editor thinks that is invalid (it doesn't expect something clever like wanting to put an url in the title) and it tries to clean up what it sees as incorrect stuff, or it might be a bug in the CKeditor.

You might try using TinyMCE instead of CKeditor and see if it works any better.

I know that with CKeditor if you save the content while in html source view without going back to design view, it will save it exactly as you enter the content. But if it is trying to fix it that will happen every time the editor loads in wysiwyg view, so it will be a problem every time you go to edit it again you would have to keep correcting it in html source view every time and then save it without going back to wysiwyg view.

Hope that helps,

Joe

5/26/2011 11:20:56 AM
Silviuz
Gravatar
Total Posts 21
View Posts
Silviuz

[Solved] Re: Strange lightbox issue

Ok Joe, as you suggest TinyMCE works better and the html structure remains the same at every update of the page.

I agree with you that is a strange way to to add a link to the caption but convert quotes and greater and less than symbols into their html entity equivalents seems to be the best practice at the moment.

I solved the problem using Slimbox v 2.0 but... "cracking" the slimbox2.js.

For those who wants to know how...

1) just find the term "title" inside the slimbox2.js file and turn it into "className"

2) add your css classes into the slimbox2.css file to draw you gallery.

3) write the html in this way:
<a class="<a href=&quot;http://www.mojoportal.com&quot; target=&quot;_blank&quot;>MOJOPORTAL</a> title="The greatest WebSite" href="bigimage.jpg" rel="lightbox"> <img src="imagethumb.jpg" alt="" width="70" height="70" /> </a>


So:

A) Javascript "className" variable turns into html "class" attribute and allows to have a perfect link into the caption

B) "title" displays the correct tooltip on mouse hover

C) "rel" switches on the lightbox

 

Hope this small tutorial can help.

Thanks
Silviuz

You must sign in to post in the forums. This thread is closed to new posts.