Make a gallery without empty anchors

Page: 1

Author Post
Member
Registered: May 2011
Posts: 17
From the Demo example we see mulitple empty anchors:

<div class="floatbox" data-fb-options="doSlideshow:true group:demo2 caption:href">
<a href="zion_valley.jpg"><img src="zion_valley_thm.jpg"/></a>
<a href="courthouse.jpg"></a>
<a href="angel's_landing.jpg"></a>
<a href="landscape_arch.jpg"></a>
<a href="utah_road.jpg"></a>
</div>

My problem is that TinyMCE editor loves to blow away empty anchors which I tend to agree with since empty anchors are mostly undesired.

Is there an alternate structure to having a gallery? I'm wondering if the image list source can be ajaxed or if a javascript function would have to be wrtten to build the list of anchor nodes then call fb.Activate again. Any better easier way?
Administrator
Registered: Aug 2008
Posts: 3382
Empty anchors are 100% valid HTML and TinyMCE should not be stripping valid HTML out of your page. But it is, so...

The cheapest and easiest way to control TinyMCE might be to place something in the anchors and hide them with display:none
<div class="floatbox" data-fb-options="doSlideshow:true group:demo2 caption:href">
<a href="zion_valley.jpg"><img src="zion_valley_thm.jpg"/></a>
<div style="display:none;">
<a href="courthouse.jpg">x</a>
<a href="angel&#039;s_landing.jpg">x</a>
<a href="landscape_arch.jpg">x</a>
<a href="utah_road.jpg">x</a>
</div>
</div>


Or, more structured and re-usable could be something like:
<style>
.empties a { display: none; }
.empties a:first-child { display: inline; }
</style>

<div class="floatbox empties" data-fb-options="doSlideshow:true group:demo2 caption:href">
<a href="zion_valley.jpg"><img src="zion_valley_thm.jpg"/></a>
<a href="courthouse.jpg">x</a>
<a href="angel&#039;s_landing.jpg">x</a>
<a href="landscape_arch.jpg">x</a>
<a href="utah_road.jpg">x</a>
</div>


It would be better if tinyMCE would stop playing Father Knows Best and leave your valid and useful markup alone. Somebody should talk to those guys...

Page: 1