index.php

<div class="row">
	<div class="col-md-12">
		<div class="panel mb10">
			<div class="panel-heading">
				<div class="panel-title">
					<i class="fa fa-picture-o"></i> <?PHP echo $title_for_layout . ': ' . $empresaLogada['Empresa']['nome_fantasia']; ?>
                </div>
			</div>            
			<div class="panel-body">
            
            
            <?PHP if ($this->GFunction->verifyRole2($userLogado, $this->Session->read('empresa_logada'))) { ?>
            
                <div class="well well-sm">
                    <p class="text-warning"><strong>Atenção:</strong></p>                    
                    <ul class="fa-ul">
                        <li><i class="fa-li fa fa-check text-danger"></i> Permitido apenas imagens (.jpg, .png, .gif).</li>
                        <li><i class="fa-li fa fa-check text-danger"></i> Imagens com tamanho máximo de 1mb.</li>
                    </ul>
                </div>
            
                <form action="<?PHP echo Router::url('/', true); ?>admin/fotos/ajax" class="dropzone" id="dropZone">
                    <input type="hidden" name="empresa_id" value="4" />
                    <input type="hidden" name="tipo_acao" value="upload" />
                </form>
                
                <div id="msg_upload" class="mt10"></div>
			</div>
		</div>
	</div>
</div>



<div class="row">
	<div class="col-md-12">
		<div class="panel">
			<div class="panel-body">
            
            <?PHP } // Fim If admin_empresa ?>
            
                <div>
                  <ul id="Grid"><?PHP
                        /**
                        foreach($fotos as $Foto) {
                            echo '
                                <li class="template-upload mix">
                                    <div class="upload-preview">
                                            <span class="preview">'. stripslashes($Foto['Foto']['_Arquivo']['img_timthumb']) .'</span>
                                    </div>
                                    <div class="preview-buttons">
                                            <a href="'. $Foto['Foto']['_Arquivo']['img_path'] .'" class="btn btn-info mr5 btn-sm inline-object fancybox">
                                                <i class="glyphicons glyphicons-eye_open"></i>                                                 
                                            </a>
                                            <a class="btn btn-danger mr5 btn-sm inline-object">
                                                <i class="glyphicons glyphicons-bin"></i>                                                 
                                            </a>
                                    </div>
                                </li>
                            ';
                        }
                        */
                  ?></ul>
                </div>
            
            
            
			</div>
		</div>
	</div>
</div>





<div class="hide">
    <div id="dialog_formulario_legenda" style="display: block; overflow: auto;">
        <div class="form-group">
            <?PHP echo $this->Form->input('legenda', array( 'format' => array('label', 'input'), 'class'=>'form-control', 'label'=>array('class'=>false))); ?>
        </div>
    </div>
</div>

<?PHP
echo $this->Html->css( array(  
                            Router::url('/', true) . 'js/vendor/plugins/dropzone/downloads/css/dropzone.css',
                            Router::url('/', true) . 'js/vendor/plugins/mfpopup/dist/magnific-popup.css',
                        ), array('inline' => false)
);

echo $this->Html->script( array( 
                            'vendor/plugins/dropzone/downloads/dropzone.min.js',
                            'vendor/plugins/mfpopup/dist/jquery.magnific-popup.min.js',
                        ), array('inline' => false) 
);
?>

<script type="text/javascript"><?php $this->Html->scriptStart(array('inline' => false)); ?>
function listarFotos() {
    $.ajax({
		url: URL_BASE + "admin/fotos/ajax",
		data: { 'tipo_acao': 'listar_fotos_empresa' },
		async: false,
        type: 'POST',
		dataType: "json",
        beforeSend: function() { dialogLoading(); },
        error: function( jqXHR, textStatus ) { closeLoading(); dialog('Erro', 'Problema na requisição.<br />Tente novamente mais tarde.') },
        success: function( data ) {
            if (data.status) {
                
                html = '';
                if (data.retorno.length>0) {
                    $.each(data.retorno, function(key, obj){
                        html += '<li class="template-upload">\
                                    <div class="upload-preview">\
                                            <span class="preview">\
                                                <img src="'+ timthumb(obj.Foto._Arquivo.img, 160, 120) +'" width="160" height="120" alt="'+obj.Foto.legenda+'">\
                                            </span>\
                                    </div>\
                                    <div class="preview-buttons" id="foto_'+obj.Foto.id+'">\
                                            <a href="'+ obj.Foto._Arquivo.img_path +'" title="'+escapeStr(obj.Foto.legenda)+'" class="btn btn-info btn_foto mr5 btn-sm inline-object fancybox">\
                                                <i class="fa fa-eye"></i>\
                                            </a>\
<?PHP if ($this->GFunction->verifyRole2($userLogado, $this->Session->read('empresa_logada'))) { ?>
                                            <a class="btn btn-info bt_legenda mr5 btn-sm inline-object">\
                                                <i class="fa fa-tags"></i>\
                                            </a>\
                                            <a class="btn btn-danger bt_delete_foto mr5 btn-sm inline-object" title="Excluir">\
                                                <i class="fa fa-trash-o"></i>\
                                            </a>\
<?PHP } ?>
                                    </div>\
                                </li>';
                    });
                } else {
                    html = '<li class="template-upload">\
                        <div class="upload-preview">\
                            <span class="preview"><?PHP echo $this->Timthumb->image('/img/no-photo.png', array('width' => 160, 'zoom_crop'=> 1)); ?></span>\
                        </div>\
                        <div class="preview-buttons">\
                            <span class="text-white">Sem foto.</span>\
                        </div>\
                    </li>';
                }
                
                $('#Grid').html(html);
                
            } else {
                if (data.error_input.empresa_id) {
                    dialog('Erro', data.error_input.empresa_id);
                    setTimeout(function(){ window.location = URL_BASE + 'admin/dashboard/escolhe_perfil' }, 1000);
                    
                } else {
                    dialog('Erro', 'Problema ao executar a ação.');
                }
            }
            
            closeLoading();
		}
	});
}

<?PHP if ($this->GFunction->verifyRole2($userLogado, $this->Session->read('empresa_logada'))) { ?>
var excluir_foto = function( obj_id ) {
    if (obj_id) {
        var id = parseInt( obj_id.replace('foto_','') );
        if (id) {
            $.ajax({
        		url: URL_BASE + "admin/fotos/ajax",
                data: {
                    'tipo_acao': 'excluir_foto',
                    'id' : id
                },
                async: false,
                type: 'POST',
                beforeSend: function() { dialogLoading(); },
                complete: function() { closeLoading(); },
                dataType: "json",
                success: function( data ) {
                    if (data.status) {
                        dialog('Sucesso', 'Excluído com sucesso.');
                        $( '#'+obj_id ).closest('li.template-upload').fadeOut(function() {
                            $(this).remove();
                        });
                    } else {
                        dialog('Erro', 'Problema ao executar a ação.<br />' + trataErroCake( data.error_input ));
                    }
                }
        	});
        } else {
            dialog('Erro', 'Problema ao executar a ação.<br />' );
        }
    }
}

function editar_legenda( obj_id ) {
    if (obj_id) {
        var id = parseInt( obj_id.replace('foto_','') );
        if (id) {
                            
            $("#dialog_formulario_legenda").dialog({
        		autoOpen: false,
        		title: "Editar Legenda",
        		bgiframe: true,
        		modal: true,
        		resizable: true,
        		draggable: true,
                width:400,
                close: function() {},
                open: function() {
                    var $dialog = $(this);                    
                    $('#dialog_formulario_legenda').find('input#legenda').val( $( '#'+obj_id ).find('a.btn_foto').attr('title') );
                },
        		buttons: {
                    Ok: function() {
                        var $dialog = $(this);
                        
                        $.ajax({
                    		url: URL_BASE + "admin/fotos/ajax",
                            data: {
                                'tipo_acao': 'editar_legenda',
                                'id' : id,
                                'formulario' : $('#dialog_formulario_legenda').find('input, select').serializeArray()
                            },
                            async: false,
                            type: 'POST',
                            beforeSend: function() { dialogLoading(); },
                            complete: function() { closeLoading(); },
                            dataType: "json",
                            success: function( data ) {
                                if (data.status) {
                                    dialog('Sucesso', 'Alterado com sucesso.');
                                    $( '#'+obj_id ).find('a.btn_foto').attr('title', data.retorno.Foto.legenda);
                                } else {
                                    dialog('Erro', 'Problema ao executar a ação.<br />' + trataErroCake( data.error_input ));
                                }
                                
                                $dialog.dialog('close');
                                closeLoading();
                            }
                    	});
                    },
                    Cancelar: function() { $(this).dialog('close'); }
        		}
        	 });
        	 $("#dialog_formulario_legenda").dialog('open');
                          
        } else {
            dialog('Erro', 'Problema ao executar a ação.<br />' );
        }
    }         
    return false;
}
<?PHP } // Fim if admin_empresa ?>

jQuery(document).ready(function() {
    
    listarFotos();

<?PHP if ($this->GFunction->verifyRole2($userLogado, $this->Session->read('empresa_logada'))) { ?>
	Dropzone.options.dropZone = {
		paramName: "arquivo",
		maxFilesize: 1,
        acceptedFiles: 'image/*',
        thumbnailWidth: 104,
        dictFallbackMessage: "Seu navegador não suporta o upload de arquivos no modo arrastar.",
        dictFileTooBig: "O arquivo é muito grande ({{filesize}}Mb).<br /> Tamanho máximo permitido: {{maxFilesize}}Mb.",
        dictInvalidFileType: "Você não pode fazer upload de arquivos deste tipo.",
		dictDefaultMessage :
		'<i class="fa fa-cloud-upload"></i> \
		 <span class="main-text"><strong>Solte os arquivos aqui</strong></span><br />  \
         <span class="mini">ou</span><br /> \
         <span class="btn btn-default ">selecionar arquivos</span> \
		',
        init: function() {
            this.on("error", function(file, errorMessage) {
                boxAlert( '<strong>'+file.name+': </strong>'+errorMessage, '#msg_upload', 'danger');
            });
            
            this.on("success", function(file, responseText) {
                var jsonReturn = JSON.parse( responseText );
                
                if (!jsonReturn.status) {
                    this.removeFile(file);
                    boxAlert( '<strong>'+file.name+': </strong>' + trataErroCake( jsonReturn.error_input, false ), '#msg_upload', 'danger');
                }
            });
            
            this.on("complete", function(file) {
                this.removeFile(file);
                
                if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                    listarFotos();
                }
            });
        }
	};   
    
    
    $(document).on('click', 'a.bt_delete_foto', function() {
        var obj_id = $(this).closest('div.preview-buttons').attr('id');        
    	confirmLink( function(){ excluir_foto( obj_id ); } );
    });
    $(document).on('click', 'a.bt_legenda', function() {
        var obj_id = $(this).closest('div.preview-buttons').attr('id');
        editar_legenda( obj_id );
    });
<?PHP } ?>
		
});
<?php $this->Html->scriptEnd(); ?></script>