Ir para conteúdo

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 ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
×

Informação importante

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