JScript

Programação & Desenvolvimento


Você não está conectado. Conecte-se ou registre-se

Usar o campo de descrição para funcionar como imagem (PunBB & phpBB2)

3 participantes

Ir para baixo  Mensagem [Página 1 de 1]

Hancki

Hancki
Desenvolvedores
Desenvolvedores

Olá a todos!
Uma funcionalidade 100% criada por mim, que consiste basicamente nisto...
1º - https://i.imgur.com/G3KvNn5.png
Resultado na lista de tópicos: https://i.imgur.com/gacEt1g.gif (efeito lightbox)

Só funcionará para quem tiver a opção de descrição ativa.

- Template topics_list_box
Procurar por:
Código:
{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
Substituir por:
Código:
<a rel="lightbox" href="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}" id="hanckidescpopup"><img class="hanckidesc" src="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}"/></a>

- CSS:
Código:
.pun tbody.statused td.tcl {
  padding-right: 10px !important;
}
img.hanckidesc {
  float: right !important;
}
img.hanckidesc {
  max-width: 150px !important;
  max-height: 50px !important;
  margin-top: -10px !important;
  padding: 1px !important;
  z-index: 10 !important;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);  
}
.lightboxOverlay {
  top: 0;
  left: 0;
  z-index: 999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
  position:fixed;
}
.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 999;
  line-height: 0;
  font-weight: normal;
}
.lightbox img.lb-image {
  position:fixed;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
}

- JS:
Código:
$(document).ready(function() {
    $.getScript('https://raw.github.com/lokesh/lightbox2/master/js/lightbox.js');
});

$(function () {
        $('input[name="description"]').change(function () {
            var ValidFileExtension = ['jpg', 'JPG', 'jpeg', 'JPEG', 'png', 'PNG', 'gif', 'GIF', 'bmp','BMP'];
        if ($.inArray($(this).val().split('.').pop().toLowerCase(), ValidFileExtension) == -1) {
            alert("Lamentamos, mas os formatos aceites são: '.jpeg','.jpg', '.png', '.gif', '.bmp'");
        }
    })
})
Já com função de alerta para os formatos disponíveis.

Hancki

JScript

JScript
Administradores
Administradores

Excelente código amigo, obrigado por compartilhar conosco!

Edit: Muito elegante o efeito!!!

JS



Última edição por JScript em Sáb 22 Fev 2014, 10:27 pm, editado 1 vez(es) (Motivo da edição : Wow!)

http://autoitbrasil.com

waghcwb

waghcwb
Desenvolvedores
Desenvolvedores

Efeito muito interessante amigo.. Gostei muito!

http://wagneraugusto.com.br/

Conteúdo patrocinado



Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos