Can Floatbox be used with RoyalSlider

Page: 1

Author Post
Member
Registered: Jul 2013
Posts: 17
I'm using RoyalSlider and would like to use FloatBox to open a slideshow when the large image is clicked.

I don't know enough about Javascript to attach FB to the image. I tried attaching it in the HTML and it doesn't work.

FloatBox works on the page (click top image (SusanSommer) to see it work) .

I attached FB to the LAST image. It doesn't work.

Any ideas would be appreciated. Thanks.

Page is here:
http://susansommer.com/fb.htm
Administrator
Registered: Aug 2008
Posts: 3382
1. Floatbox is not attached to the last image. By attaching, I think you mean configuring a link around the thumbnail img that will open a floatbox when clicked. You have an empty link (an <a> element with no clickable content) placed nearby the thumbnail, but that cannot do anything.

You have...
<a ...></a>
<div>
<img ...>
</div>

If there was to be any hope of floatbox behaviour when clicking that thumbnail, it would have to reside inside the link, as in...
<div>
<a ...><img ...></a>
</div>


2. Those thumbnails are already configured to open in the RoyalSlider gallery viewer. To simultaneously configure those thumbnails to open as a Floatbox gallery is a conflict and probably not what you're looking for. Even if successful in getting those thumbnails configured for both galleries, it is very unlikely that they will both fire. One will probably win (the last one to apply its configuration to the markup) or they may trip each other up and neither will work.


3. If you intend to have a thumbnail click open the RoyalSlider view and then have a click on the big image in the RS gallery open up a Floatbox gallery, you would have to figure out how to code that up yourself using a scripted click action on the RS gallery images and the Floatbox API start() call. It would be a similar customization task as wanting a click on an image shown in a Floatbox gallery to initiate display in the RoyalSlider gallery as well. The galleries show images, not links, and a standard Floatbox setup opens from links, not from images.

My advice is, pick a gallery viewer and use that one. Don't try to configure two gallery viewer packages to work simultaneously on the same content. That will bring a world of hurt and probably won't work anyway.
Member
Registered: Jul 2013
Posts: 17
Thanks for the help. I have this working properly now. Here's how it looks. Works great on cell phone too. Click the big image to see the Floatbox gallery run.

The one remaining problem is that the floatbox gallery doesn't open at all on internet explorer.

I tagged the top image (Susan Sommer) with floatbox just as a test and it opens just fine.

I tried everything I can think of but do not understand why this doesn't work with internet explorer.

Any help would be appreciated. Thanks.
Administrator
Registered: Aug 2008
Posts: 3382
There are two errors showing up in IE's developer tools. Let's get those fixed and see what happens.

1. 'slider' is undefined on line 417

2. The <a> element at line 379 has an illegal closing tag in its first segment, as in <a .../>...</a>. This may be enough to confuse IE's HTML parser.
Member
Registered: Jul 2013
Posts: 17
OK, thanks, got those two errors fixed. Still Floatbox doesn't run.
see it here
Administrator
Registered: Aug 2008
Posts: 3382
There's a fair chance that the problem is illegal space characters in the href and src paths. If you must have spaces in your file names, those spaces need to be encoded as %20 in all href and src references.

It's always a good idea to check your document's validity at http://validator.w3.org/ to eliminate structural and syntactic problems.
Member
Registered: Jul 2013
Posts: 17
Thanks for your suggestions.

I reduced the slider to 2 images and changed the image names so that there are no more spaces.

Fixed all validation errors except 4 alt tags.

Still won't open Floatbox.

Here is the updated page
Administrator
Registered: Aug 2008
Posts: 3382
We are well into that world of hurt that I mentioned in my first reply on this thread with regard to pointing two javascript gallery packages at the same content.

I'm also well into providing RoyalSlider tech support here. Floatbox is working fine without RS on the page, but RS is not playing nice and is stepping on something when present.

I know a little bit about what RS is stepping on. Floatbox places some event listeners on the document to keep track of user input, including mouse clicks. When RS is present in IE, that event listener never receives the click event. There must be something in the RS code that is cancelling the click event before it propagates to the document. Why it's cancelling the event, and why in IE and not other browsers, would be determined by reviewing the RS source code or talking to the RS developer, neither of which I'm prepared to do.

I think there is one last hope (other than getting the RS code changed to be more cooperative). Rather than adding the 'floatbox' class and using floatbox's internal click handler, leave that class off and add onclick="fb.start( this ); return false;" to the big image link.

If that last trick doesn't help, I'll refer you back to the world of hurt comment and provide a link to RoyalSlider support.

I hope it does work. The page looks good and the combo of viewers is an easy and effective way to peruse a large gallery set.
Member
Registered: Jul 2013
Posts: 17
Genius !

Thank you so much for your help with this project. I would have never come up with the answer.

Removing the floatbox class and adding onclick="fb.start( this ); return false;" fixed the problem.

Here is the finished product:

Well almost finished. I'm off to the RoyalSlider forum to see if I can get it to load faster.

Thanks again for all your help.

Page: 1