Pergunta do WordPress OnePress: Lightbox para qualquer galeria e imagem (LightGallery)

Um usuário perguntou ?

Basicamente, eu estava procurando soluções personalizadas que eu poderia ter aqui: onepress lightbox para galerias do WordPress

no Onepress.js com lightgallery – v1.3.9 – 05-02-2017

		if ($.fn.lightGallery) {
			var wrap_tag = $(".enable-lightbox", $context).find('.g-item').first();
			var tag_selector="a";
			if( wrap_tag.is( 'div' ) ){
				tag_selector="div";
			}
			
			$(".enable-lightbox", $context).lightGallery({
				mode: "lg-fade",
				selector: tag_selector
				//cssEasing : 'cubic-bezier(0.25, 0, 0.25, 1)'
			});
		}

Exemplo de código de saída Onepress na página inicial:

<div class="gallery-content">
	<div class="gallery-grid g-zoom-in enable-lightbox g-col-3">
		<a class="g-item" title="A" href="
			<span class="inner">
				<span class="inner-content">
					<img src="/wp-content/uploads/a-480x300.jpg" alt="a" />
				</span>
			</span>
		</a>
		<a class="g-item" title="b" href="
			<span class="inner">
				<span class="inner-content">
					<img src="/wp-content/uploads/b-480x300.jpg" alt="b" />
				</span>
			</span>
		</a>
	</div>
</div>

Exemplo de código de saída da galeria de blogs do WordPress

<figure class="wp-block-gallery columns-3 is-cropped">
	<ul class="blocks-gallery-grid">
		<li class="blocks-gallery-item">
			<figure>
				<a href="
					<img class="wp-image-117" src="/wp-content/uploads/a.jpg-1024x682.jpg" alt="a" data-id="117" data-full-url=" data-link=" />
					
				</a>
				<figcaption class="blocks-gallery-item__caption">
					a
				</figcaption>
			</figure>
		</li>
		<li class="blocks-gallery-item">
			<figure>
				<a href="
					<img class="wp-image-124" src="/wp-content/uploads/b-1024x640.jpg"   alt="b" data-id="124" data-full-url="/wp-content/uploads/b" data-link="/gallery/b/" />
				</a>
				<figcaption class="blocks-gallery-item__caption">
					b
				</figcaption>
			</figure>
		</li>
	</ul>
</figure>

WP 5.2+ Amostra de código de saída da imagem do bloco Gutenberg
<figure class="wp-block-image size-large"><a href=" src=" alt="" class="wp-image-8" /></a></figure>

Não tenho habilidades para codificar php ou js do zero, então tenho procurado soluções possíveis para obter uma caixa de luz que funcione para galerias e imagens em posts e páginas.

A1) Pasta ao redor da galeria e imagens:

+ Classe CSS Enable-lightbox para galeria e bloco de imagem. Fácil visualização: iciwp.com/automatically-wrap-images-in-the_content-with-custom-htmlPartida definitiva: wordpress.stackexchange.com/questions/279861/wrap-a-span-tag-around-authors-post-count

Não consegui encontrar um exemplo que atribua ao início e ao final da tag, pois este código selecionará todas as terminações da FIGURA:

function filter_figure($content){
    return preg_replace('<figure class="wp-block-gallery', '<div class="gallery-content"><figure class="wp-block-gallery enable-lightbox', $content);
    return preg_replace('figure class="wp-block-image', '<div class="gallery-content">figure class="wp-block-image enable-lightbox', $content);
    return preg_replace('</figure>', '</figure></div>', $content);
}
add_filter('the_content', 'filter_figure');

A2) Bloqueio de pastas – consulte github.com/liip/wrapper-block-example-wp-plugin

Eu não tentei porque depende de deletar manualmente este elemento para cada galeria/imagem; usar código HTML personalizado pode obter o mesmo resultado (é necessária mais codificação manual)

B) Roteiro temático para crianças – ver sachinchoolur.github.io/lightGallery/demos/html-markup.html

funções.php

function my_themechild_js() {
    wp_enqueue_script( 'themechild-js', get_stylesheet_directory_uri() . '/scripts.js', array( 'jquery' ),'1.0',true );
}
add_action( 'wp_enqueue_scripts', 'my_themechild_js' );

scripts.js

$('.wp-block-gallery').lightGallery({
	selector: 'a'
});
$('.wp-block-image').lightGallery({
	selector: 'a'
});

Não parece funcionar.

Se alguém puder me ajudar a aplicar uma lightbox Onepress em galerias/imagens de postagem/páginas, seria ótimo! Na minha humilde opinião, o caminho B) JS parece mais limpo (menos código, tempo de satisfação) e mais simples

Este tópico foi alterado há um ano por.

(@longnguyen)

1 ano atrás

Esta resposta foi modificada 1 ano atrás por.

(@crisfo)

12 meses atrás

@longnguyen, seu post parece (acidentalmente) em branco?

(@longnguyen)

12 meses atrás

Olá @crisfo

Em primeiro lugar, o tema OnePress que você está usando tem uma versão mais antiga, atualize para a versão mais recente 2.2.4 para obter os novos recursos, corrija um bug …

Você pode então usar outra imagem lightbox do plugin para visualizar posts/páginas

De.

(@crisfo)

11 meses, 2 semanas atrás

Oi @longnguyen, estou usando o Onepress versão 2.2.4 – lightware v1.3.9 parece estar incluído

Eu gostaria de usar outros plugins de imagem de caixa de luz para trabalhar em galerias / imagens em postagens / páginas devido a: a) consistência de caixa de luz (não ter apenas duas páginas da web) b) um plugin adicional que não é essencialmente necessário para evitar (necessária atualização). , compatibilidade de possíveis problemas) c) evitar uma pegada mais pesada (carregar scripts adicionais, etc.)

A marcação personalizada do blog Gutenberg para imagens e galerias provavelmente seria uma solução pessoal (como eu disse, não consigo codificar do zero). Definitivamente a melhor solução se o Onepress pudesse suportar um lightbox para imagens/galerias (opcional) ?

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *