Заставьте миниатюры в woocommerce заменить основное изображение вместо того, чтобы открыть fancybox

Я хотел бы, чтобы миниатюры под основным изображением на странице единого продукта заменили основное изображение, когда они или нажаты или на парении, я предпочитаю парение. Прямо сейчас миниатюры просто открываются в их собственном fancybox. Это - очень типичная функция на самых больших сайтах электронной коммерции, и странно, что это не опция в woocommerce. Любая справка будет значительно цениться.

4
01.02.2013, 00:25
3 ответа

Я нашел этот http://www.magictoolbox.com/magiczoomplus/, и это обрабатывает то, в чем я нуждался. Я просто установил масштабирование на внутренний, таким образом, оно не открывает окно масштабирования, и оно имеет парение миниатюры, которое заменяет основное изображение. Возможно, это могло помочь кому-то с подобной проблемой.

0
19.02.2020, 22:09
  • 1
    должны быть больше, чем простые ссылки. Они должны на самом деле быть ответом вместо маршрута, где кто-то, возможно, найдет ответ. Помогите предотвращению гнили ссылки, отредактируйте Ваш ответ и предоставьте необходимую информацию, которая помогает OP, а также позже посетителям решить их проблему. –  kaiser 16.03.2014, 03:01

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

jQuery(document).on('click','.thumbnails .zoom', function(){
        var photo_fullsize =  jQuery(this).find('img').attr('src').replace('-100x132','');
        jQuery('.woocommerce-main-image img').attr('src', photo_fullsize);
        return false;
    }); 

.replace ('-100x132') устраняет размер из URL изображения для возврата полного образа а не миниатюры. Замените его своими собственными размерами миниатюр.

Мое решение на основе:

6
19.02.2020, 22:09
  • 1
    '-100x132' может работать на Вас, но кто гарантирует, что у кого-либо еще есть тот же размер миниатюры? –  gmazzap♦ 20.08.2013, 16:53
  • 2
    Вы правы, я отредактировал, чтобы быть более ясным. Благодарность за указание на это. –  Gastón Labarthe 20.08.2013, 16:59
  • 3
    , я уверен, что это работает отлично, но что-то вроде этого для первой строки более просто, я думаю: jQuery('.thumbnails .zoom').click(function(){ принятие там является другими вызовами jQuery на странице, и таким образом, в это включают jQuery(document).ready(function() { и т.д. –  yitwail 20.09.2013, 07:14

Решение JavaScript

Как исходный ответ уже работают со строковой заменой, но должен быть изменен для каждого варианта использования, вот решение с помощью быстрого Regex .test() обернутый в сам вызывающий функцию, которая использует метод по умолчанию для предотвращения событий (как следующие ссылки) от случая.

Этот плагин удалит первое вхождение любых 2-4 цифр, разделенных x и сопровождаемый еще 2-4 цифрами. Некоторые примеры

image-name-123x456.ext
image_name123x456.ext
imageName1230x45.ext
imageName12x4567.ext

Вот фактический плагин. Необходимо будет просто заполнить единственный бит: фактический селектор.

Сделать: единственная вещь, которую необходимо будет сделать, обеспечивает фактический селектор (вместо .class-of-the-thumbnail-image) для изображения. Лучше всего был бы к (a), заполняют некоторый класс и затем добавляют фильтр к миниатюре для добавления этого класса к каждому изображению, для которого Вы хотите быть нацеленными.

<?php
defined( 'ABSPATH' ) or exit;
/* Plugin Name: (#83993) Full image size */

add_action( 'wp_footer', 'wpse83993FullImageSize' );
function wpse83993FullImageSize()
{
    ?>
    <script type="text/javascript">
( function( $ ) {
    $( '.thumbnails .zoom' ).on( 'click', function( event ) {
        event.preventDefault();

        var $img = $( this ).find( 'img' ),
            $src = $img.attr( 'src' ),
            search = /^([-]?)([\d]{2,4})((\s*)(x)(\s*))([\d]{2,4})$/;

        // Regex .test() is fast, so we use it *before* we actually do something
        if ( search.test( $src ) ) {
            var $url = $src.replace( search, '' );
            $( '.class-of-the-thumbnail-image' ).attr( 'src', $url );
        }
    } );
} )( jQuery );
    </script>
    <?
}

Одна возможная точка, где Ваш плагин мог сцепиться в, должна будет объединить это с фильтром на post_thumbnail_html. Этот фильтр имеет некоторые аргументы: $html, $post_id, $post_thumbnail_id, $size, $attr то, что можно использовать для изменения HTML.

Другой, возможно, еще лучше был бы wp_get_attachment_image_attributes- фильтр внутри wp_get_attachment_image(), которым называют get_the_post_thumbnail(), который самостоятельно перенесен the_post_thumbnail().

apply_filters( 'wp_get_attachment_image_attributes', $attr, $attachment );

Просто добавьте что-то как следующее к плагину выше:

add_filter( 'wp_get_attachment_image_attributes', 'wpse83993AddDefaultThumbnailClass', 20, 2 );
function wpse83993AddDefaultThumbnailClass( $atts, $attachment )
{
    $atts['class'] .= "class-of-the-thumbnail-image";
    return $atts;
}

Серверное решение: PHP

Намного легче, чем что-либо еще должен использовать следующий фильтр - в случае, если он встречает Ваш вариант использования.

apply_filters( 'post_thumbnail_size', $size );

Можно добавить, просто называют полный размер для каждой миниатюры сообщения, и Вы в порядке. Затем уменьшите изображение с помощью CSS.

4
19.02.2020, 22:09
  • 1
    Большой ответ! Просто тонкая настройка: Я должен был использовать этот regex: /(-?)(\d{2,4})(x)(\d{2,4})/ заставить это соответствовать. –  Jodi Warren 13.08.2014, 19:59

Теги

Похожие вопросы