0

I am doing a controlpanel below fotorama. Everything is working, except that I am not able to add the spans for the buttons created in the jquery into a div. I am using insertAfter as it needs to be After the fotorama_nav_wrap. I have been playing with append, but I can´t manage it. I want to have the buttons in this div:

This is the jquery: // 1. Initialize fotorama manually. var $fotoramaDiv = jQuery('.fotorama_custom').fotorama();

// 2. Get the API object.
var fotorama = $fotoramaDiv.data('fotorama');


if (jQuery('.fotorama_custom__arr').length > 0) {
    jQuery('.fotorama_custom__arr').remove();
}

jQuery("<span class='fotorama_custom__arr--prev'>       <</span>").insertAfter(".fotorama__nav-wrap");
jQuery("<span class='fotorama_custom__arr--next'>></span").insertAfter(".fotorama__nav-wrap");
jQuery("<span class='fotorama_custom__buttonplay'>P</span>").insertAfter(".fotorama__nav-wrap");
jQuery("<span class='fotorama_custom__buttonstop'>S</span>").insertAfter(".fotorama__nav-wrap");
jQuery('.fotorama_custom__arr--prev').click(function () {
fotorama.show('<');
});
jQuery('.fotorama_custom__arr--next').click(function () {
    fotorama.show('>');
});
$(function () {
    var $fotorama = $('#start-n-stop'),
            fotorama = $fotorama.data('fotorama'),
            $thumbBorder = $('.fotorama__thumb-border', $fotorama),
            thumbBorderColor = $thumbBorder.css('border-color'),
            thumbBackground = $thumbBorder.css('background'),
            $start = $('#start'),
            $stop = $('#stop');
            etc.

Updated with solution: It works now, I changed the insert.After to append, and then appended the div: 

 $('.fotorama') // Initialize .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('<');
4

0 回答 0