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

[carlosmadeiracunha 3]

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.

 

 

[marsolim 110]

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

[carlosmadeiracunha 3]

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.

[carlosmadeiracunha 3]

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.