Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.>
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.
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.
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