Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

carlosmadeiracunha

Como verificar se uma imagem contém link???

Recommended Posts

Hoje eu gostaria de implementar um um blog que estou projetando pra um site e pensei no seguinte, o usuário[administrado] vai escrever uma matéria e neste texto pode conter imagens com links ou não que levarão a abrir um lightbox, vai depender de o quanto ele tiver familiaridade com sistemas de edição WYSIWYG, pois bem, ele vai gravar no banco de dados e pronto, até aí está tranquilo.  Eu estou usando o Magnific Popup, muito bom por sinal, pela facilidade de se usar.

Bem, o visitante vai entrar neste blog e acessar a matéria, se existir imagem com link para o lightbox beleza, agora se não existe o link eu já consegui colocar este link via jquery, ótimo, aí vem um problema, as imagens que já têm o link, com este "meu script" abrem duas vezes, tipo como se existisse duas imagens iguais mas as que não têm abrem normalmente.

Agora a minha pergunta:

Como verificar se uma imagem contém link???

 

O código da página do blog está assim:

<div class="wow fadeInUp unico" data-wow-delay="0.6s">
	<span class="small">Postado por: <?php echo $administrador; ?></span>
	<h1><?php echo $titulo_post; ?></h1>
  
  	*[1 - aqui eu mesmo coloco o link por ser o corpo do blog e porque existem outras informações como "data-info" ]
  	<!-- aqui é ativado o Magnific Popup com a classe zoom-gallery,
		a imagem que estiver dentro desta classe e com link acessará o lightbox -->
	<div class="box_capa_blog zoom-gallery">
		<a href="uploads/<?php echo $capa_post; ?>" rel="tooltip" data-info="Clique para ver em tamanho maior" title="<?php echo $titulo_post; ?>">
			<img class="capa_blog" alt="<?php echo $titulo_post; ?>" src="uploads/<?php echo $capa_post; ?>" />
		</a>
	</div>
	
  	**[2 - aqui não sabemos se o usuário vai ou não colocar o link na imagem na hora de escrever a matéria]
  	<!-- aqui que está o problema, o usuário pode inserir imagens no texto com ou sem link para o lightbox -->
  	<div class="texto zoom-gallery">
		<p>
			<?php echo $texto_post;?>
		</p>
	</div><!-- div class="texto" -->
  
</div><!--<div class="wow fadeInUp unico" -->

Para melhor entenderem, coloquei dentro de cochetes [ 1 ]* e [ 2 ]** algumas informações importantes.

No cochete [ 1 ] é que está o problema, como eu tenho e devo colocar o link para que o visitante saiba que existe o lightbox, o meu script está duplicando o link e fazendo aparecer a imagem duas vezes na galeria em lightbox, gostaria de fazer um if dentro deste "meu script" pra verificar se a imagem contém ou não hiperlink.

Código do "meu script":

<script>
$(document).ready(function() {
	$('.zoom-gallery img').each(function() {
		var currentImage 	= $(this);
		if (currentImage.attr("alt") <= 0) {
			currentImage.wrap("<a title='Sem descrição' target='_blank' href='" + currentImage.attr("src") + "'</a>");
		} else {
			currentImage.wrap("<a title='" + currentImage.attr("alt") + "' target='_blank' href='" + currentImage.attr("src") + "'</a>");
		}
		
	});
});
</script>

 

Tem como? Procurei um monte por aí mas o que eu acho é a verificação de texto se contém ou não imagem e não consegui modificar para o meu propósito.

 

Isso que eu estou querendo fazer é pra deixar o blog bem mais "bonito", mas com certeza não estou achando legal esta duplicata de imagem no lightbox.

A página é esta, http://www.neoraddepoxipiso.com.br/neoradd/blog.php?artigo=os_10_maiores_porta_avioes_do_mundo&rel=31

Desde já agradeço pela ajuda.

 

____________________________________________________________________________________________

Resolvido o problema em parte.

 

O problema do cochete [ 1 ]*  foi resolvido retirando a classe zoom-gallery da div e inserindo direto no link ficando assim:

<div class="box_capa_blog">
	<a class="zoom-gallery" href="uploads/<?php echo $capa_post; ?>" rel="tooltip" data-info="Clique para ver em tamanho maior" title="<?php echo $titulo_post; ?>">
		<img class="capa_blog" alt="<?php echo $titulo_post; ?>" src="uploads/<?php echo $capa_post; ?>" />
	</a>
</div>

 

Mas apareceu um erro que eu não havia visto antes.

Agora o problema é outro, é verificação de hiperlik, o "meu script" está fazendo a classe zoom-gallery interpretar que o link  sem imagem é para uma imagem fazendo abrir o lightbox e dando erro.

O problema está no meu script porque o Magic Popup funciona perfeitamente sem ele em outras partes do código do site.

Qualquer link que esteja, tendo imagem ou não,  dentro da classe zoom-gallery no cochete [ 2 ]*, que é onde mostra o texto vindo do banco de dados e que foi escrito pelo usuário[administrador] ,  abre o lightbox, e agora?

Visitem o link acima para poderem comprovar e ver oque está acontecendo, no final do post eu coloquei um link sem imagem pra página externa mas ele abre o lightbox fazendo inserção deste link na contagem e também dando erro na galeria.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

não entendi direito como o usuário vai dizer se é pra ter link ou não mas e se fosse um checkbox e aí seria só checar se o check tá checado

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 2017-5-7 at 21:53, marsolim disse:

não entendi direito como o usuário vai dizer se é pra ter link ou não mas e se fosse um checkbox e aí seria só checar se o check tá checado

Não, acho que você não entendeu mesmo, o usuário[administrador] não vai dizer nada, o visitante é que vai verificar que tem lightbox se passar o mouse sobre a imagem porque existe o tooltip.

 

Eu quero deixar esta informação, por isso que eu mesmo fiz o link na imagem que serve como primária ( capa ) da matéria no blog mas não tem como eu saber se o usuário[administrador] vai ou não inserir o link na imagem quando escrever a matéria por isso a pergunta Como verificar se uma imagem contém link???

 

E a questão nem é se vai ter link ou não na imagem no texto da matéria, porque o meu scritp já coloca o link pro lightbox automaticamente só que se o usuário( administrador, não o visitante ) inserir link na imagem, o lightbox vai entender que existe duas imagens porque o meu script duplica o link.

 

Pra que o script não duplique o link eu preciso fazer um if nele informando se tem ou não link na imagem, se já existir, não insere link mas se não existir insere.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Resolvido!

________________________________

Pronto, eu já resolvi os problemas, imaginava que o erro estivesse no meu script e perdi muito tempo tentando acertá-lo mas no script do Magnific Popup tem um delegate na tag "a", eu coloquei uma classe nela e acabaram-se os problemas.

Neste script estava assim:

$(document).ready(function() {
	/* galeria de imagens */
	$('.zoom-gallery').magnificPopup({
		delegate: 'a',
		type: 'image', ...

/////// E agora ficou assim:

$(document).ready(function() {
	/* galeria de imagens */
	$('.zoom-gallery').magnificPopup({
		delegate: 'a.gallery_popup',
		type: 'image', ...

E no meu script eu tive que adicionar a classe gallery_popup ao link "automático" que o script insere e ficou assim:

<script>
$(document).ready(function() {
    $('.zoom-gallery img').each(function() {
        var currentImage = $(this);
        if (currentImage.attr("alt") <= 0) {
            currentImage.wrap("<a class=\"gallery_popup\" title='Sem descrição' href='" + currentImage.attr("src") + "'</a>");
        } 
        else if (currentImage.attr("alt") == null) {
            currentImage.wrap("<a class=\"gallery_popup\" title='Sem descrição' href='" + currentImage.attr("src") + "'</a>");
        } 
        else {
            currentImage.wrap("<a class=\"gallery_popup\" title='" + currentImage.attr("alt") + "' href='" + currentImage.attr("src") + "'</a>");
        }//if (currentImage.attr("alt") <= 0) {
                
    })//$('.zoom-gallery img').each(function() {
});	
</script>

 

Com esta pequena mudança a tag "a" que estiver com a classe gallery_popup é a que vai chamar a função e não todas as tags "a".

Achei que era problema no meu script mas tinha uma delegação atrapalhando o meu propósito.

 

Agora vou ter que adicionar a classe gallery_popup a todos os links relacionados a classe zoom-gallery nos códigos do site, tudo bem, e quem disse que ia ser fácil né???

Se alguém quiser implementar fique a vontade mas deixe aqui no tópico para que eu também possa usar e se achar um erro no meu script, por favor me avise também pra eu poder mudar, obrigado.

 

Um ótimo estudo, trabalho pra todos.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.

      Estou com uma dúvida, referente cálculo de valores em tempo real.

      Tenho uma rotina, que faz o cálculo, o problema é mostrar o resultado.

      Quero mostrar o RESULTADO assim: 0,00  ou  0.00

      Abaixo posto o código.
      jQuery('input').on('keyup',function(){ //Remover ponto e trocar a virgula por ponto var m = document.getElementById("pgRest").value; while (m.indexOf(".") >= 0) { m = m.replace(".", ""); } m = m.replace(",","."); //Remover ponto e trocar a virgula por ponto var j = document.getElementById("pgDsct").value; while (j.indexOf(".") >= 0) { j = j.replace(".", ""); } j = j.replace(",","."); m = parseFloat(jQuery('#pgRest').val() != '' ? jQuery('#pgRest').val() : 0); j = parseFloat(jQuery('#pgDsct').val() != '' ? jQuery('#pgDsct').val() : 0); //Mostra o Resultado em Tempo Real jQuery('#pgTroco').val(m - j); <<=== aqui estou errando })  
       
      Grato,
       
      Cesar
       
       
    • Por violin101
      Caro amigos, saudações.

      Tenho uma tabela escrita em JS que funciona corretamente.
       
      Minha dúvida:
      - como devo fazer para quando a Tabela HTML estiver vazia, exibir o LOGO da Empresa ?

      Abaixo posto o script:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'i' ) return;// Não é Ctrl+A, portanto interrompemos o script evt.preventDefault(); //Chama a Função Calcular Qtde X Valor Venda calcvda(); var idProdutos = document.getElementById("idProdutos").value; var descricao = document.getElementById("descricao").value; var prd_unid = document.getElementById("prd_unid").value; var estoque_atual = document.getElementById("estoque_atual").value; var qtde = document.getElementById("qtde").value; var vlrunit = document.getElementById("vlrunit").value; var vlrtotals = document.getElementById("vlrtotal").value; var vlrtotal = vlrtotals.toLocaleString('pt-br', {minimumFractionDigits: 2}); if(validarConsumo(estoque_atual)){ //Chama a Modal com Alerta. $("#modal_qtdemaior").modal(); } else { if(qtde == "" || vlrunit == "" || vlrtotal == ""){ //Chama a Modal com Alerta. $("#modal_quantidade").modal(); } else { //Monta a Tabela com os Itens html = "<tr style='font-size:13px;'>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>"; html += "<td width='47%' height='10'>"+ "<input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+ "<input type='hidden' name='esp[]' value='"+prd_unid+"'> - ESP:"+prd_unid+ "<input type='hidden' name='estoq[]' value='"+estoque_atual+"'></td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='qtde[]' value='"+qtde+"'>"+qtde+"</td>"; html += "<td width='12%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrunit[]' value='"+vlrunit+"'>"+vlrunit+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-uvas btn-remove-produto' style='margin-right:1%; padding:1px 3px; font-size:12px;' title='Remover Item da Lista'>"+ "<span class='fa fa-minus' style='font-size:12px;'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#idProdutos").val(null); $("#descricao").val(null); $("#prd_unid").val(null); $("#qtde").val(null); $("#vlrunit").val(null); $("#vlrtotal").val(null); $("#idProdutos").focus(); //Se INCLUIR NOVO produto - Limpa a Forma de Pagamento $("#pgSoma").val(null); $("#pgRest").val(null); $("#pgDsct").val(null); $("#pgTroco").val(null); $("#tbpagar tbody").empty(); }//Fim do IF-qtde }//Fim do Validar Consumo });//Fim da Função btn-agregar  
      Grato,

      Cesar
       
    • Por violin101
      Caros amigos, saudações.

      Estou com uma pequena dúvida se é possível ser realizado.

      Preciso passar 2 IDs para o Sistema executar a função, estou utilizando desta forma e gostaria de saber como faço via JS para passar os parâmetro que preciso.

      Observação:
      Dentro da TABELA utilizei 2 Forms, para passar os IDS que preciso, funcionou conforme código abaixo.
      <div class="card-body"> <table id="tab_clie" class="table table-bordered table-hover"> <thead> <tr> <th style="text-align:center; width:10%;">Pedido Nº</th> <th style="text-align:center; width:10%;">Data Pedido</th> <th style="text-align:center; width:32%;">Fornecedor</th> <th style="text-align:center; width:10%;">Status</th> <th style="text-align:center; width:5%;">Ação</th> </tr> </thead> <tbody> <?php foreach ($results as $r) { $dta_ped = date(('d/m/Y'), strtotime($r->dataPedido)); switch ($r->pd_status) { case '1': $status = '&nbsp;&nbsp;Aberto&nbsp;&nbsp;'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#000000'; //Cor: Preta break; case '2': $status = 'Atendido Total'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#086108'; //Cor: Verde break; case '3': $status = 'Atendido Parcial'; $txt = '#000000'; //Cor: Branco $cor = '#FEA118'; //Cor: Amarelo break; default: $status = 'Cancelado'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#D20101'; //Cor: Vermelho break; } echo '<tr>'; echo '<td width="10%" height="10" style="text-align:center;">'.$r->pd_numero.'</td>'; echo '<td width="10%" height="10" style="text-align:center;">'.$dta_ped.'</td>'; echo '<td width="32%" height="10" style="text-align:left;">'.$r->nome.'</td>'; echo '<td width="10%" height="10" style="text-align:left;"><span class="badge" style="color:'.$txt.'; background-color:'.$cor.'; border-color:'.$cor.'">'.$status.'</span></td>'; echo '<td width="5%" style="text-align:center;">'; ?> <div class="row"> <?php if($this->permission->checkPermission($this->session->userdata('permissao'), 'vPedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/visualizar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-warning" title="Visualizar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-search icon-white"></i></button> </form> <?php } if($this->permission->checkPermission($this->session->userdata('permissao'), 'ePedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/editar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-primary" title="Editar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-edit icon-white"></i></button> </form> <?php } ?> </div> <?php echo '</td>'; echo '</tr>'; } ?> </tbody> </table> </div>
      Grato,

      Cesar.
    • Por belann
      Olá!
       
      Estou usando o editor quill em uma página html, sem fazer a instalação com npm, mas usando as api´s via internet com http, no entanto não consigo fazer a tecla enter funcionar para mudança de linha, tentei essa configuração abaixo, mas não funcionou.
       
      modules: {       syntax: true,       toolbar: '#toolbar-container',       keyboard: {         bindings: {           enter: {             key: 13,             handler: function(range, context) {                       quill.formatLine(range.index, range.length, { 'align': '' });             }           }  
       
    • Por violin101
      Caros amigos, saudações.
       
      Gostaria de poder tirar uma dúvida com os amigos.
       
      Como faço uma função para Comparar a Data Digitada pelo o Usuário com a Data Atual ?

      Data Digitada:  01/09/2024
       
      Exemplo:
      25/09/2024 é menor que DATA Atual  ====> mensagem: informe uma data válida.
      25/09/2024 é igual DATA Atual ===> o sistema libera os INPUT's.
       
      Como faço uma comparação com a Data Atual, para não Deixar Gravar Data retroativa a data Atual.
       
      Grato,
       
      Cesar
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.