Fare in modo che le miniature in WooCommerce sostituiscano l'immagine principale invece di aprire fancybox

Ho appena ottenuto l'effetto da solo. Lo posterò qui nel caso altri trovino questo thread:

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') elimina le dimensioni dall'URL dell'immagine per restituire l'immagine completa e non la miniatura. Sostituiscilo con le dimensioni delle tue miniature.

La mia soluzione si basa su:

• https://stackoverflow.com/questions/17307451/replace-main-image-with-thumbnail-on-click-with-jquery
• https://stackoverflow.com/questions/1149747/click-function-not-working-for-me

Soluzione JavaScript

Poiché la risposta originale funziona già con la sostituzione di stringhe, ma deve essere modificata per ogni singolo caso d'uso, ecco una soluzione che utilizza un Regex .test() veloce racchiuso in una funzione auto-invocante che utilizza il metodo predefinito per prevenire eventi (come il seguire i link) dall'accadere.

Questo plugin cancellerà la prima occorrenza di qualsiasi 2-4 cifre separate da una x e seguite da altre 2-4 cifre. Alcuni esempi:

nome-immagine-123x456.ext
nome_immagine123x456.ext
nomeImmagine1230x45.ext
nomeImmagine12x4567.ext

Ecco il plugin vero e proprio. Dovrai solo compilare un singolo elemento: il selettore effettivo.

Da Fare: L'unica cosa che dovrai fare è fornire il tuo selettore effettivo (invece di .class-of-the-thumbnail-image) per l'immagine. Sarebbe meglio (a) inserire una classe e poi aggiungere un filtro alla miniatura per aggiungere questa classe a ogni immagine che desideri targettare.

<?php
defined( 'ABSPATH' ) or exit;
/* Plugin Name: (#83993) Dimensione immagine completa */

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() è veloce, quindi lo usiamo *prima* di fare qualcosa
        if ( search.test( $src ) ) {
            var $url = $src.replace( search, '' );
            $( '.class-of-the-thumbnail-image' ).attr( 'src', $url );
        }
    } );
} )( jQuery );
    </script>
    <?
}

Un possibile punto in cui il tuo plugin potrebbe agganciarsi sarebbe combinare questo con un filtro su post_thumbnail_html. Questo filtro ha alcuni argomenti: $html, $post_id, $post_thumbnail_id, $size, $attr che puoi usare per modificare l'HTML.

Un altro, forse ancora migliore, sarebbe il filtro wp_get_attachment_image_attributes all'interno di wp_get_attachment_image(), che viene chiamato da get_the_post_thumbnail(), che a sua volta è racchiuso da the_post_thumbnail().

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

Basta aggiungere qualcosa come il seguente al plugin sopra:

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

Soluzione lato server: PHP

Molto più semplice di qualsiasi altra cosa è usare il seguente filtro - nel caso soddisfi il tuo caso d'uso.

apply_filters( 'post_thumbnail_size', $size );

Puoi semplicemente chiamare la dimensione completa per ogni miniatura del post e il gioco è fatto. Poi ridimensiona l'immagine tramite CSS.

Dopo che WordPress ha implementato le immagini responsive in WordPress 4.4, questi altri script tendono ad essere problematici/non funzionanti a causa degli attributi srcset aggiunti.

Ecco lo snippet che utilizzo per risolvere i problemi legati a questo:

$(document).on('click', '.thumbnails .zoom', function() {
    var photo_fullsize = $(this).find('img').attr('src').replace('-180x180','');
    var photo_srcset = $(this).find('img').attr('srcset').replace('-180x180','');
    $('.woocommerce-main-image img').attr('src', photo_fullsize);
    $('.woocommerce-main-image img').attr('srcset', photo_srcset);
    return false;
});

Ho trovato questo http://www.magictoolbox.com/magiczoomplus/ e gestisce esattamente ciò di cui avevo bisogno. Ho semplicemente impostato lo zoom su "inner" così non si apre una finestra di zoom separata e ha anche la funzionalità di hover sulle miniature che sostituisce l'immagine principale. Forse potrebbe essere utile a qualcuno che ha un problema simile.

Ho avuto problemi utilizzando l'esempio dalla risposta accettata, quindi l'ho riscritto un po'. Nel caso qualcuno avesse bisogno di un esempio funzionante, non dipendente dalla sostituzione delle dimensioni delle miniature, che disabilita anche l'azione predefinita di PrettyPhoto.

$(".thumbnails").find("a.zoom").unbind('click');
$('.thumbnails .zoom').on('click', function(e){
    console.log( $('.thumbnails .zoom') );
    var photo_fullsize =  $(this).attr('href');
    $('.woocommerce-main-image img').attr('src', photo_fullsize);
    $('a.woocommerce-main-image').attr('href', photo_fullsize);
    return false;
});