visualização da imagem em fancybox e filemanager responsivo não funcionar (string vazia passada para getElementById ().)

votos
0

Eu trabalho com responsivefilemanager e fancybox para upload e adicionar images_url e visualização da imagem gallery.when i clique em filemanager fancybox perto e adicionar visualização para caixa de imagem (nenhuma imagem), mas em fancybox 2.1.5 quando eu clico em fancybox imagem não fechou e não mostrar visualização da imagem. meu trabalho de código com fancybox 1.3.4 mas com última versão 2.1.5 não funcionou.

JS:

$(document).ready(function() {
$(function() {
    $('.thumbcheck').tooltip();
    $('#btn-sub').click(function() {
        $('#name').removeClass('has-error');
        $('#err_name').hide();
        name=   $('#gallery_name').val();
        if(name.length==0){
            $('#name').addClass(has-error);
            $('#err_name').show();
        }
        else
         $(#form-gallery).submit();
    });
    $('#append').on('click', '.btn-remove', function() {
        var parent = $(this).closest('.form-group');
        var input   =   parent.find('.width100').next('input').val();
        if($('input[name=cover]').val()==input ){
            $('input[name=cover]').val('');
        }
        parent.remove();
    });
    $(#checkall).on('ifChecked', function(event) {
        //Check all checkboxes
        $(input[type='checkbox'], .table-striped).iCheck(check);
        $('#action-box').show();
    });
    $(#checkall).on('ifUnchecked', function(event) {
        //Check all checkboxes
        $(input[type='checkbox'], .table-striped).iCheck(uncheck);
        $('#action-box').hide();
    });
    $(.checkbox).on('ifChecked', function(event) {
        $('#action-box').show();
    });
    $(.checkbox).on('ifUnchecked', function(event) {
        var length = $(.table-striped input[type='checkbox']:checked).length;
        if ($(.table-striped input[type='checkbox']:checked).length === 0) {
            $('#action-box').hide();
            $(#selectAll).iCheck(uncheck);
        }
    });
    $('.img-thumb').next().change(function() {
        $('.img-thumb').attr('src', $('.img-thumb').next().val())
    });
    $('#btnAdd').click(function() {
        var form_group = $('#form-group').html();
        var new_id = rand();
        var baseurl = $('#baseurl').html();
        $('#upload').clone().attr('id', new_id);
        $('#upload-img').clone().attr('id', 'img-' + new_id);
        $('.thumbcheck').clone().attr('data-id',new_id);
        $('#append').append(form_group);
        $('#upload').attr('id', new_id);
        $('#upload-img').attr('id', 'img-' + new_id);
        $('.thumbcheck').eq(-2).attr('data-id',new_id);
        $('#' + new_id).next('a').next('a').attr('href', baseurl + new_id);
        $('#' + new_id).next('a').next('a').fancybox({
            'width': '75%',
            'height': '90%',
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'type': 'iframe',
            onClosed: function() {
                var imgurl = $('#'+new_id).val();
                var check   =   $('#append').find('.thumbcheck[data-id='+new_id+']').find('i');
                console.log($('#append').find('.thumbcheck[data-id='+new_id+']'));
                console.log(check);
                console.log(check.attr('class'));
                if(check.attr('class')=='fa icon-circle-blank'){
                    console.log('sd');
                    $('#thumb').val(imgurl);
                }
                if (imgurl.length > 0) {
                    $('#img-' + new_id).attr('src', ''+imgurl);
                }
            }
        });
        $('.thumbcheck').tooltip();
    });
    $(document).on('click','.thumbcheck',function(){
        var value   =   $('#'+$(this).data('id')).val();
        if($(this).find('i').attr('class')=='fa icon-circle'){
            $(document).find('.thumbcheck i').attr('class','fa icon-circle');
            $(this).find('i').attr('class','fa icon-circle-blank');
            $('input[name=cover]').val(value);
        }
        else {
            return false;
        }
    });
    $('.boxGetFile').fancybox({
        'width': '75%',
        'height': '90%',
        'autoScale': false,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'iframe',
        onClosed: function(link, index) {
                var id      =   $(link).data('id');
                var imgurl  =   $('#'+id).val();
                var check   =   $(document).find('.thumbcheck[data-id='+id+']').find('i');
                if(check.attr('class')=='fa fa-circle'){
                    $('input[name=cover]').val(imgurl);
                }
                if (imgurl.length > 0) {
                    $('#img-' + id).attr('src',  ''+imgurl);
                }
            }
    });
});
function rand() {
    var text = ;
    var possible = ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789;

    for (var i = 0; i < 8; i++)
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    return text;
}

});

HTML:

<div class=form-group>
   <label class=col-sm-3 control-label></label>
      <div class=col-sm-9>
        <a class='btn btn-primary btn-xs' id='btnAdd'>Add Image</a>
      </div>
</div>
<div class=form-group>
                    <div class=col-sm-offset-2 col-sm-10>
                                            </div>
                </div>

        </div>
    </div>

</div>
<div id='baseurl' style=display:none>http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=<</div>
<div style=display: none; id='form-group'>

    <div class=form-group custom-cols>
        <div class=col-sm-12 control-label>
            <div class=col-sm-2>
                <div class=input-append>
                    <div class='col-sm-10 no-pad'><img src=data:image/png;base64,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 id='upload-img' class=width100 />
                        <input name=image_url[] id=upload type=text value= style='display: none'>
                        <a class=width24 thumbcheck data-toggle=tooltip data-placement=bottom title=Gallery Cover data-id=><i class=fa fa-circle-o></i></a> 
                        <a class=col-sm-8 no-pad boxGetFile><h6>select image</h6></a>
                    </div>

                </div>
            </div>
            <div class=col-sm-7 padding-left-8>
                <input type=text name='image_title[]' class=form-control placeholder='Image title' />
                <input type=text name='image_alt[]' class=form-control placeholder='Image alt' />
            </div>
            <div class=col-sm-1>
                <a href=# onclick=return false; class=glyphicon glyphicon-remove btn-remove></a>
            </div>

Como posso resolver o meu problema?

  • Demonstração trabalhou com fancybox 1.3.4 AQUI

  • Demonstração NOTWorked com fancybox 2.1.5 AQUI

NOTA: na demonstração por favor clique add no

Em cada clique na imagem que eu vejo esse erro no console do Firebug:

digite

Publicado 18/09/2014 em 19:36
fonte usuário
Em outras línguas...                            


1 respostas

votos
1

Eu acho que os elementos previstos na pergunta não são suficientes para fornecer uma resposta precisa, mas para a recompensa I vai adivinhar;)

Depois de um rápido olhar para o código-fonte do seu (nenhum trabalho) DEMONSTRA usando fancybox v2.1.5, eu encontrei alguns problemas que você pode precisar para corrigir in, a fim de ter uma página de trabalho:

1). Você não tem uma adequada DOCTYPE(eu quis dizer, não DOCTYPEem todos)
2). Você tem uma estática </div>tag de fechamento (linha 179), pouco antes do <div id="baseurl">
3). Você tem uma estática <!de abertura (tipo de) comentário condicional (linha 204)
4). Yo não tem um fechamento </html>tag
5). A questão de base url:

Você tem essa linha de html

<div id='baseurl' style="display:none">http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=<</div>

Repare no final da linha &field_id=<</div>: o adicional <eu acho que é um erro de digitação, não é ?.

Então você tem essa variável:

var baseurl = $('#baseurl').html();

... que realmente retorna:

http://madenade.besaba.com/file/filemanager/dialog.php?type=2&amp;field_id=&lt;

Se você executar essa URL diretamente no seu navegador (de fancybox) que faz retornar o mesmo erro js ao selecionar a imagem em fancybox. O que eu acho é que as entidades HTML escapado de alguma forma estão mexendo com a funcionalidade do gerenciador de arquivos responsivo.

Por exemplo, se você abrir o url sem escapar as entidades html (em uma nova aba / janela) como:
http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=s7cJMxQl

... (excluindo o <erro de digitação), o único erro é quando provocando o $.fancybox.close()método, que faz sentido.

Eu recomendo que você faça um:

var baseurl = $("#baseurl").text(); // don't escape html entities

ou definir o valor de um dataatributo para um código mais limpo como

<div id="baseurl" data-base="http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=" style="display:none"></div>

... então a variável

var baseurl = $("#baseurl").data("base");
Respondeu 21/09/2014 em 04:38
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more