Как я могу использовать jQuery.closest() для определения ближайшего изображения и передачи пути к функции PHP

Question

Я пытаюсь написать шорткод Wordpress, который будет достаточно умным, чтобы найти изображение, наиболее близкое к размещению шорткодов внутри представления HTML.

Я хотел бы использовать jQuery, чтобы определить ближайшее изображение, а затем передать его функции ниже.Следует отметить, что короткий код можно использовать в сообщении несколько раз.

Я рассмотрел возможность использования .closest() чтобы добиться этого, но я не знаю, как передать эту информацию в мою функцию.

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');

Любые предложения по достижению этой цели будут высоко оценены.

Answer 1

После переосмысления моего подхода я обнаружил, что он самым простым, чтобы позволить пользователю указывать URL-адрес изображения в качестве параметра шорты.Это в конечном итоге даст им больший контроль над тем, какое изображение отображается и предотвратит необходимость поперечного домена несколько раз для каждого экземпляра [PIN-код] в пост.

Моя модифицированная функция и пример использования:

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');

.

Использование внутри WordPress Post:

[PIN-код="http://www.site.com/image.jpg"]

Answer 2

Вы можете использовать offset() функция для определения смещения элемента относительно документа.

Затем с помощью простой математической формулы расстояния вы можете вычислить расстояние между любыми двумя элементами: sqrt((x1-x2)^2 + (y1-y2)^2)

Итак, подведем итоги:

1. определить смещение приколоть элемент
2. найти все изображения в документе
3. определить изображение с минимальным расстоянием до элемента вывода на основе его смещения
4. делай с этим все, что хочешь

Проверь это jsFiddle В бою :)

Если вместо этого математический определение ближайшего, которое вы хотите

• тот img элемент, который находится в том же родительском элементе DOM, что и pin, и на том же уровне вам следует проверить $('.pin').siblings('img') селектор
• или если вы хотите на любом уровне, вы можете сделать что-то вроде $('.pin').parent().find('img')