Como verificar se uma imagem contém link???
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](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.Discussão (3)
Carregando comentários...