Înlocuirea imaginii principale cu miniaturi în WooCommerce în loc de deschiderea fancybox

Tocmai am reușit să obțin efectul dorit pe cont propriu. Voi posta soluția aici în caz că alții vor găsi acest 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') elimină dimensiunea din URL-ul imaginii pentru a obține imaginea la dimensiune completă și nu thumbnail-ul. Înlocuiți această valoare cu dimensiunile thumbnail-urilor voastre.

Soluția mea se bazează pe:

• 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

Soluție JavaScript

Deși răspunsul original funcționează cu înlocuirea de șiruri, trebuie modificat pentru fiecare caz în parte. Iată o soluție care utilizează un Regex .test() rapid, încapsulat într-o funcție auto-invocată care folosește metoda implicită pentru a preveni acțiunile (cum ar fi urmărirea linkurilor).

Acest plugin va șterge prima apariție a oricăror 2-4 cifre separate de un x și urmate de alte 2-4 cifre. Câteva exemple:

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

Iată plugin-ul efectiv. Singurul lucru pe care trebuie să-l faci este să completezi selectorul real (în loc de .class-of-the-thumbnail-image) pentru imagine. Cel mai bine ar fi să adaugi o clasă și apoi să folosești un filtru pentru thumbnail pentru a adăuga această clasă la fiecare imagine pe care dorești să o targetezi.

<?php
defined( 'ABSPATH' ) or exit;
/* Plugin Name: (#83993) Dimensiunea completă a imaginii */

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() este rapid, așa că îl folosim *înainte* să facem ceva
        if ( search.test( $src ) ) {
            var $url = $src.replace( search, '' );
            $( '.class-of-the-thumbnail-image' ).attr( 'src', $url );
        }
    } );
} )( jQuery );
    </script>
    <?
}

Un posibil punct în care plugin-ul tău ar putea interveni ar fi combinarea acestuia cu un filtru pe post_thumbnail_html. Acest filtru are câteva argumente: $html, $post_id, $post_thumbnail_id, $size, $attr pe care le poți folosi pentru a modifica HTML-ul.

O altă soluție, poate chiar mai bună, ar fi filtrul wp_get_attachment_image_attributes din wp_get_attachment_image(), care este apelat de get_the_post_thumbnail(), care la rândul său este încapsulat de the_post_thumbnail().

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

Pur și simplu adaugă ceva similar cu următorul cod în plugin-ul de mai sus:

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

Soluție pe partea de server: PHP

Mult mai ușor decât orice altceva este să folosești următorul filtru - în cazul în care se potrivește cu cerințele tale.

apply_filters( 'post_thumbnail_size', $size );

Poți apela pur și simplu dimensiunea completă pentru fiecare thumbnail de post și ești gata. Apoi poți redimensiona imaginea prin CSS.

După ce WordPress a implementat imaginile responsive în WordPress 4.4, aceste alte scripturi tind să aibă erori sau să nu funcționeze din cauza atributelor adăugate srcset.

Iată fragmentul de cod pe care îl folosesc pentru a rezolva aceste probleme:

$(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;
});

Am găsit această http://www.magictoolbox.com/magiczoomplus/ și rezolvă exact ce aveam nevoie. Pur și simplu am setat zoom-ul pe "inner" astfel încât nu se deschide o fereastră separată pentru zoom și are funcționalitatea de hover pe thumbnails care înlocuiește imaginea principală. Poate acest lucru ar putea ajuta pe cineva cu o problemă similară.

Am avut probleme folosind exemplul din răspunsul acceptat, așa că l-am rescris puțin, doar în cazul în care cineva ar avea nevoie de un exemplu funcțional, care nu depinde de înlocuirea dimensiunii miniaturii și care, de asemenea, dezactivează acțiunea implicită 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;
});