[SOLUCIONADO] Dar estilo a divs en slider fotorama

[helenp]

Hola,
He conseguido añadir botones adicionales al slider de fotorama.

Yo para colocar lo que he generado con el jquery en el div fotorama-control lo he hecho asi:

Código Javascript:

jQuery("<div class='fotorama-control fotorama_custom__arr--prev'><</div>").insertAfter(".fotorama__nav-wrap");
    jQuery("<div class='fotorama-control fotorama_custom__arr--next'>></div>").insertAfter(".fotorama__nav-wrap");
    jQuery("<div class='fotorama-control fotorama_custom__arr--last'>>></div>").insertAfter(".fotorama__nav-wrap");
    jQuery("<div class='fotorama-control fotorama_custom__fullscreen-icon'>x</div>").insertAfter(".fotorama__nav-wrap");
    jQuery("<div id='start' class='fotorama-control fotorama_custom__buttonplay'>P</div>").insertAfter(".fotorama__nav-wrap");
    jQuery("<div id='stop' class='fotorama-control fotorama_custom__buttonstop'>S</div>").insertAfter(".fotorama__nav-wrap");
 

Y despues en el html se muestra en este div:
<div class="fotorama-control"></div>

Funciona bien, pero el problema viene cuando quiero dar estilo al div fotorama-control.
Necesito un div distinto para poner poner un background-color y un ancho como hay 6 divs fotorama-control pues no puedo.
Si hago esto para dar estilo al div barra:
<div id="barra">
<div class="fotorama-control"></div>
</div>
Pues se inserta antes de la barra y no dentro del div barra.
Que he hecho mal y que puedo hacer?
Quiero hacer como una barra de botones, y claro necesito poner un ancho y color de fondo al div fotorama-control.
Gracias

[NueveReinas]

Iniciado por helenp

Funciona bien, pero el problema viene cuando quiero dar estilo al div fotorama-control.

Quizá estés modificando estilos necesarios para que funciona bien.

¿Has probado con algo así? ¿Qué resultados te da?

Código HTML:

<div class="fotorama-control"><div id="barra"></div></div>
 

[helenp]

Iniciado por NueveReinas

Quizá estés modificando estilos necesarios para que funciona bien.

¿Has probado con algo así? ¿Qué resultados te da?

Código HTML:

<div class="fotorama-control"><div id="barra"></div></div>
 

Gracias, pero no va, vienen los "botones" encima del div.
Aquí tengo un ejemplo:
http://jsfiddle.net/72jTR/139/

Estoy pensando si no debo de inentar con append, ya lo he intentado pero no me ha salido,
no creo que pueda quitar insertAfter.

[helenp]

Ya funciona, al menos en chrome.
He cambiado el insert.after a append, y he apendido el div:

Código Javascript:

$('.fotorama') .fotorama() .each(function () { 
$('.fotorama__nav', this).after( $(this) .next('.fotorama-control') .show() ); }); $('.fotorama-control').append("<span class='fotorama_custom__arr--prev'><</span>"); jQuery('.fotorama_custom__arr--prev').click(function () { fotorama.show('<');