Como eu poderia usar jQuery .closest() para determinar a imagem mais próxima e passar o caminho para a função PHP

Question

Estou tentando escrever um shortcode Wordpress que seja inteligente o suficiente para encontrar a imagem mais próxima do posicionamento dos shortcodes dentro da visualização HTML.

Gostaria de usar o jQuery para determinar qual é a imagem mais próxima e depois passá-la para a função abaixo.Devo mencionar que é possível que o shortcode seja usado várias vezes em uma postagem.

Eu procurei usar .closest() para conseguir isso, mas não tenho certeza de como passar essas informações para minha função.

function pinterest_post() {

global $post;
$icon_url = urlencode(site_url().'/wp-content/themes/Kin/images/pinterest.png');
$posturl = urlencode(get_permalink());
$pinurl = 'http://pinterest.com/pin/create/button/?url='.$posturl.'&media='.$icon_url;
$pinurl .= '&description='.urlencode(get_the_title());

return '
    <div class="pinterest_post">
        <a href="'.$pinurl.'"><img src="/wp-content/themes/Kin/images/pinterest.png"/></a>
    </div>';
}

add_shortcode('pin', 'pinterest_post');

Qualquer sugestão para conseguir isso seria muito apreciada.

Answer 1

Depois de repensar minha abordagem, achei mais fácil permitir ao usuário especificar a URL da imagem como parâmetro do shortcode.Em última análise, isso lhes dará maior controle sobre qual imagem é mostrada e evitará ter que atravessar o DOM várias vezes para cada instância de [pin] em uma postagem.

Minha função modificada e exemplo de uso:

function pinterest_post($atts = '') {

    global $post;

    $image_fallback = get_bloginfo(template_url).'/images/logo-green-for-website.gif';
    $icon_url = get_bloginfo(template_url).'/images/pinterest.png';

    extract(shortcode_atts(array('path' => $image_fallback,), $atts));
    $image_url = $path;

    $posturl = urlencode(get_permalink());

    $pinurl = 'http://pinterest.com/pin/create/button/?url='.$posturl;
    $pinurl .= '&description='.urlencode(get_the_title());
    $pinurl .= '&media='.$image_url;

    return '
        <div class="pinterest_post">
            <a href="'.$pinurl.'"><img src="'.$icon_url.'"/></a>
        </div>';
}

add_shortcode('pin', 'pinterest_post');

Uso dentro de uma postagem Wordpress:

[caminho do pino = "http://www.site.com/image.jpg"]

Answer 2

Você pode usar o offset() função para determinar o deslocamento de um elemento em relação ao documento.

Então, com uma fórmula matemática simples de distância, você pode calcular a distância entre quaisquer dois elementos: sqrt((x1-x2)^2 + (y1-y2)^2)

Então, para encerrar tudo:

1. determinar o deslocamento do alfinete elemento
2. encontre todas as imagens no documento
3. determine a imagem com a distância mínima ao elemento pino com base em seu deslocamento
4. Faz o que quiseres com isso

Verifique isso jsFiddle em ação :)

Se em vez disso matemático definição de mais próximo que você deseja

• o img elemento que é encontrado no mesmo pai DOM que o pin, e no mesmo nível, você deve verificar o $('.pin').siblings('img') seletor
• ou se quiser, em qualquer nível, você pode fazer algo como $('.pin').parent().find('img')